apply all changes to examples as well

Author: erictheise

example01/index.html

@@ -87,7 +87,7 @@
   var gl;
   function initGL(canvas) {
     try {
-      gl = canvas.getContext("experimental-webgl");
+      gl = canvas.getContext("webgl");
       gl.viewportWidth = canvas.width;
       gl.viewportHeight = canvas.height;
     } catch(e) {
@@ -175,7 +175,7 @@
          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 Float32Array(vertices), gl.STATIC_DRAW);
     vertexPositionBuffer.itemSize = 2;
@@ -188,7 +188,7 @@
       [ 0.7,  1.2],
       [-2.2,  1.2],
       [ 0.7, -1.2],
-      [-2.2, -1.2],
+      [-2.2, -1.2]
   ];
   function drawScene() {
     gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
@@ -214,7 +214,7 @@
 
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
-    gl.deleteBuffer(plotPositionBuffer)
+    gl.deleteBuffer(plotPositionBuffer);
 
     zoom *= 1.02;
     document.getElementById("zoomOutput").value = zoom;
@@ -243,7 +243,7 @@
 
     var canvas = document.getElementById("example01-canvas");
     initGL(canvas);
-    initShaders()
+    initShaders();
     initBuffers();
 
     gl.clearColor(0.0, 0.0, 0.0, 1.0);

example02/glMatrix-0.9.5.min.js

@@ -4,8 +4,8 @@
 <title>Learning WebGL &mdash; Mandelbrot shader on a spinning cube</title>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 
-<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
-<script type="text/javascript" src="webgl-utils.js"></script>
+<script type="text/javascript" src="../js/gl-matrix-2.2.1.js"></script>
+<script type="text/javascript" src="../js/webgl-utils.js"></script>
 
 
 <script id="color-shader-fs" type="x-shader/x-fragment">
@@ -125,7 +125,7 @@
   var gl;
   function initGL(canvas) {
     try {
-      gl = canvas.getContext("experimental-webgl");
+      gl = canvas.getContext("webgl");
       gl.viewportWidth = canvas.width;
       gl.viewportHeight = canvas.height;
     } catch(e) {
@@ -221,7 +221,8 @@
 
   function mvPushMatrix() {
     var copy = mat4.create();
-    mat4.set(mvMatrix, copy);
+    // Update: mat4.set(mvMatrix, copy); mat4.set() was removed from gl-matrix, use mat4.copy().
+    mat4.copy(copy, mvMatrix);
     mvMatrixStack.push(copy);
   }
 
@@ -244,7 +245,7 @@
   }
 
 
-  var cubes = Array();
+  var cubes = [];
   function MandelbrotCube(xPos, yPos, zPos, xVel, yVel, zVel, xRot, yRot, zRot) {
     this.xPos = xPos;
     this.yPos = yPos;
@@ -307,19 +308,19 @@
         }
       }
     }
-  }
+  };
 
 
   MandelbrotCube.prototype.draw = function() {
     setCurrentProgram(mandelbrotProgram);
 
     mat4.identity(mvMatrix);
 
-    mat4.translate(mvMatrix, [this.xPos, this.yPos, this.zPos]);
+    mat4.translate(mvMatrix, mvMatrix, [this.xPos, this.yPos, this.zPos]);
 
-    mat4.rotate(mvMatrix, degToRad(this.xRot), [1, 0, 0]);
-    mat4.rotate(mvMatrix, degToRad(this.yRot), [0, 1, 0]);
-    mat4.rotate(mvMatrix, degToRad(this.zRot), [0, 0, 1]);
+    mat4.rotate(mvMatrix, mvMatrix, degToRad(this.xRot), [1, 0, 0]);
+    mat4.rotate(mvMatrix, mvMatrix, degToRad(this.yRot), [0, 1, 0]);
+    mat4.rotate(mvMatrix, mvMatrix, degToRad(this.zRot), [0, 0, 1]);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
     gl.vertexAttribPointer(mandelbrotProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
@@ -328,9 +329,9 @@
     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
     var positions = [];
     for (var i = 0; i < 6; i++) {
-      positions.push(-2.2 / this.zooms[i] + this.centerOffsetsX[i], -1.2 / this.zooms[i] + this.centerOffsetsY[i]);;
+      positions.push(-2.2 / this.zooms[i] + this.centerOffsetsX[i], -1.2 / this.zooms[i] + this.centerOffsetsY[i]);
       positions.push( 0.7 / this.zooms[i] + this.centerOffsetsX[i], -1.2 / this.zooms[i] + this.centerOffsetsY[i]);
-      positions.push( 0.7 / this.zooms[i] + this.centerOffsetsX[i],  1.2 / this.zooms[i] + this.centerOffsetsY[i])
+      positions.push( 0.7 / this.zooms[i] + this.centerOffsetsX[i],  1.2 / this.zooms[i] + this.centerOffsetsY[i]);
       positions.push(-2.2 / this.zooms[i] + this.centerOffsetsX[i],  1.2 / this.zooms[i] + this.centerOffsetsY[i])
     }
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
@@ -341,7 +342,7 @@
     gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
 
     gl.deleteBuffer(positionBuffer);
-  }
+  };
 
 
   var boundingBoxVertexPositionBuffer;
@@ -376,7 +377,7 @@
       -5,  5, -10,
       -5,  5, -25,
        5,  5, -25,
-       5,  5, -10,
+       5,  5, -10
     ];
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
     boundingBoxVertexPositionBuffer.itemSize = 3;
@@ -408,7 +409,7 @@
       0.3, 0.3, 0.3, 1,
       0.3, 0.3, 0.3, 1,
       0.3, 0.3, 0.3, 1,
-      0.3, 0.3, 0.3, 1,
+      0.3, 0.3, 0.3, 1
     ];
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
     boundingBoxVertexColorBuffer.itemSize = 4;
@@ -464,7 +465,7 @@
       -1.0, -1.0, -1.0,
       -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 Float32Array(vertexPositions), gl.STATIC_DRAW);
     cubeVertexPositionBuffer.itemSize = 3;
@@ -479,7 +480,7 @@
       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 Uint16Array(vertexIndices), gl.STATIC_DRAW);
     cubeVertexIndexBuffer.itemSize = 1;
     cubeVertexIndexBuffer.numItems = 36;
@@ -490,7 +491,13 @@
     gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
+    // Update: mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.perspective() API has changed.
+    mat4.perspective (pMatrix, 45.0, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
+
+    // Update: mat4.translate(mvMatrix, [0, 0, -6]); mat4.translate() API has changed to mat4.translate(out, a, v)
+    // where out is the receiving matrix, a is the matrix to translate, and v is the vector to translate by. z altered to
+    // approximate original scene.
+    mat4.translate(mvMatrix, mvMatrix, [0, 0, -4.7]);
 
     for (var i in cubes) {
       cubes[i].draw();
@@ -500,6 +507,10 @@
     mat4.identity(mvMatrix);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, boundingBoxVertexPositionBuffer);
+
+    // Update: mat4.translate(mvMatrix, mvMatrix, [0, 0, 6]); added to more closely approximate original scene.
+    mat4.translate(mvMatrix, mvMatrix, [0, 0, 6]);
+
     gl.vertexAttribPointer(colorProgram.vertexPositionAttribute, boundingBoxVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, boundingBoxVertexColorBuffer);