lesson05/index.html

<html>

<head>
<title>Learning WebGL &mdash; lesson 5</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="sylvester.js"></script>
<script type="text/javascript" src="glUtils.js"></script>

<script id="shader-fs" type="x-shader/x-fragment">
  varying vec2 vTextureCoord;

  uniform sampler2D uSampler;

  void main(void)
  {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, 1.0 - vTextureCoord.t));
  }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying vec2 vTextureCoord;


  void main(void)
  {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;
  }
</script>


<script type="application/x-javascript">

  // This code is for Firefox/Minefield compatibility.  WebGL
  // originally used a class called CanvasFloatArray, but the
  // specification has now changed, and it's called WebGLFloatArray.
  // Firefox/Minefield still (as of 13 Nov 2009) uses the old
  // name, but WebKit/Safari uses the new one.  The main WebGL
  // code in this page uses the new name, but the compatibility
  // code that follows will stay here for the time being to make
  // sure that Firefox users can view the page.
  try
  {
    WebGLFloatArray;
  }
  catch (e)
  {
    try
    {
      WebGLArrayBuffer = CanvasArrayBuffer;
      WebGLByteArray = CanvasByteArray;
      WebGLUnsignedByteArray = CanvasUnsignedByteArray;
      WebGLShortArray = CanvasShortArray;
      WebGLUnsignedShortArray = CanvasUnsignedShortArray;
      WebGLIntArray = CanvasIntArray;
      WebGLUnsignedIntArray = CanvasUnsignedIntArray;
      WebGLFloatArray = CanvasFloatArray;
    }
    catch (e)
    {
      alert("Could not find Canvas array types for WebGL.");
    }
  }
  // End of compatibility code


  var gl;
  function initGL(canvas)
  {
    try
    {
      gl = canvas.getContext("webkit-3d");
    }
    catch(e)
    {
    }
    if (!gl)
    {
      try
      {
        gl = canvas.getContext("moz-webgl");
      }
      catch(e)
      {
      }
    }
    if (!gl)
    {
      alert("Could not initialise WebGL, sorry :-(");
    }

    // This temporary code provides support for Google Chrome, which
    // as of 30 Nov 2009 does not support the new names for the
    // functions to get shader/program parameters (among other things).
    // It should be unnecessary soon, and is only a partial fix
    // in the meantime (as, for example, there's no way to get shader
    // or program parameters that are vectors of integers).
    // See http://learningwebgl.com/blog/?p=1082 for details.
    if (!gl.getProgramParameter)
    {
      gl.getProgramParameter = gl.getProgrami
    }
    if (!gl.getShaderParameter)
    {
      gl.getShaderParameter = gl.getShaderi
    }
    // End of Chrome compatibility code

  }


  function getShader(gl, id)
  {
      var shaderScript = document.getElementById(id);
      if (!shaderScript)
          return null;

      var str = "";
      var k = shaderScript.firstChild;
      while (k)
      {
          if (k.nodeType == 3)
              str += k.textContent;
          k = k.nextSibling;
      }

      var shader;
      if (shaderScript.type == "x-shader/x-fragment")
      {
          shader = gl.createShader(gl.FRAGMENT_SHADER);
      }
      else if (shaderScript.type == "x-shader/x-vertex")
      {
          shader = gl.createShader(gl.VERTEX_SHADER);
      }
      else
      {
          return null;
      }

      gl.shaderSource(shader, str);
      gl.compileShader(shader);

      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
      {
          alert(gl.getShaderInfoLog(shader));
          return null;
      }

      return shader;
  }

  var shaderProgram;
  var vertexPositionAttribute;
  var textureCoordAttribute;
  function initShaders()
  {
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
    {
      alert("Could not initialise shaders");
    }

    gl.useProgram(shaderProgram);

    vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(vertexPositionAttribute);

    textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
    gl.enableVertexAttribArray(textureCoordAttribute);
  }


  function handleLoadedTexture(image, texture)
  {
    gl.enable(gl.TEXTURE_2D);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
  }


  var neheTexture;
  var neheImage;
  function initTexture()
  {
    neheTexture = gl.createTexture();
    neheImage = new Image();
    neheImage.onload = function()
    {
      handleLoadedTexture(neheImage, neheTexture)
    }

    neheImage.src = "nehe.gif";
  }


  var mvMatrix;
  var mvMatrixStack = [];

  function mvPushMatrix(m) {
    if (m) {
      mvMatrixStack.push(m.dup());
      mvMatrix = m.dup();
    } else {
      mvMatrixStack.push(mvMatrix.dup());
    }
  }

  function mvPopMatrix() {
    if (mvMatrixStack.length == 0)
      throw "Invalid popMatrix!";
    mvMatrix = mvMatrixStack.pop();
    return mvMatrix;
  }

  function loadIdentity()
  {
    mvMatrix = Matrix.I(4);
  }


  function multMatrix(m)
  {
    mvMatrix = mvMatrix.x(m);
  }

  function mvTranslate(v)
  {
    var m = Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4();
    multMatrix(m);
  }

  function mvRotate(ang, v)
  {
    var arad = ang * Math.PI / 180.0;
    var m = Matrix.Rotation(arad, $V([v[0], v[1], v[2]])).ensure4x4();
    multMatrix(m);
  }

  var pMatrix;
  function perspective(fovy, aspect, znear, zfar)
  {
    pMatrix = makePerspective(fovy, aspect, znear, zfar)
  }


  function setMatrixUniforms()
  {
    var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
    gl.uniformMatrix4fv(pUniform, false, new WebGLFloatArray(pMatrix.flatten()));

    var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    gl.uniformMatrix4fv(mvUniform, false, new WebGLFloatArray(mvMatrix.flatten()));
  }


  var cubeVertexPositionBuffer;
  var cubeVertexTextureCoordBuffer;
  var cubeVertexIndexBuffer;
  function initBuffers()
  {
    cubeVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    vertices = [
      // Front face
      -1.0, -1.0,  1.0,
       1.0, -1.0,  1.0,
       1.0,  1.0,  1.0,
      -1.0,  1.0,  1.0,

      // Back face
      -1.0, -1.0, -1.0,
      -1.0,  1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0, -1.0, -1.0,

      // Top face
      -1.0,  1.0, -1.0,
      -1.0,  1.0,  1.0,
       1.0,  1.0,  1.0,
       1.0,  1.0, -1.0,

      // Bottom face
      -1.0, -1.0, -1.0,
       1.0, -1.0, -1.0,
       1.0, -1.0,  1.0,
      -1.0, -1.0,  1.0,

      // Right face
       1.0, -1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0,  1.0,  1.0,
       1.0, -1.0,  1.0,

      // Left face
      -1.0, -1.0, -1.0,
      -1.0, -1.0,  1.0,
      -1.0,  1.0,  1.0,
      -1.0,  1.0, -1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);
    cubeVertexPositionBuffer.itemSize = 3;
    cubeVertexPositionBuffer.numItems = 24;

    cubeVertexTextureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
    var textureCoords = [
      // Front face
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,

      // Back face
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,

      // Top face
      0.0, 1.0,
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,

      // Bottom face
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,
      1.0, 0.0,

      // Right face
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,

      // Left face
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoords), gl.STATIC_DRAW);
    cubeVertexTextureCoordBuffer.itemSize = 2;
    cubeVertexTextureCoordBuffer.numItems = 24;

    cubeVertexIndexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
    var cubeVertexIndices = [
      0, 1, 2,      0, 2, 3,    // Front face
      4, 5, 6,      4, 6, 7,    // Back face
      8, 9, 10,     8, 10, 11,  // Top face
      12, 13, 14,   12, 14, 15, // Bottom face
      16, 17, 18,   16, 18, 19, // Right face
      20, 21, 22,   20, 22, 23  // Left face
    ]
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW);
    cubeVertexIndexBuffer.itemSize = 1;
    cubeVertexIndexBuffer.numItems = 36;
  }


  var xRot = 0;
  var yRot = 0;
  var zRot = 0;
  function drawScene()
  {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

    perspective(45, 1.0, 0.1, 100.0);
    loadIdentity();

    mvTranslate([0.0, 0.0, -5.0])

    mvRotate(xRot, [1, 0, 0]);
    mvRotate(yRot, [0, 1, 0]);
    mvRotate(zRot, [0, 0, 1]);

    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    gl.vertexAttribPointer(vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
    gl.vertexAttribPointer(textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, neheTexture);
    gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
    setMatrixUniforms();
    gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  }


  var lastTime = 0;
  function animate()
  {
    var timeNow = new Date().getTime();
    if (lastTime != 0)
    {
      var elapsed = timeNow - lastTime;

      xRot += (90 * elapsed) / 1000.0;
      yRot += (90 * elapsed) / 1000.0;
      zRot += (90 * elapsed) / 1000.0;
    }
    lastTime = timeNow;
  }


  function tick()
  {
    drawScene();
    animate();
  }


  function webGLStart()
  {
    var canvas = document.getElementById("lesson05-canvas");
    initGL(canvas);
    initShaders();
    initTexture();

    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    gl.clearDepth(1.0);

    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

    initBuffers();

    setInterval(tick, 15);
  }


</script>


</head>


<body onload="webGLStart()">
  <a href="http://learningwebgl.com/blog/?p=507">&lt;&lt; Back to Lesson 5</a><br />

  <canvas id="lesson05-canvas" style="border: none;" width="500" height="500"></canvas>

  <br/>
  <a href="http://learningwebgl.com/blog/?p=507">&lt;&lt; Back to Lesson 5</a><br />
</body>

</html>