|
| 1 | +Updates? |
| 2 | +-------- |
| 3 | + |
| 4 | +Many people find their way to Giles Thomas' "Learning WebGL Lessons" when first trying to get |
| 5 | +experience using that technology. His sixteen lessons were written between October 2009 and |
| 6 | +December 2010, and they rely on glMatrix-0.9.5.min.js. That library is at version 2.2.1 as of this |
| 7 | +writing (6 July 2014). See the well-organized glMatrix website at http://glmatrix.net/ |
| 8 | + |
| 9 | +You'll learn a lot by going through "Learning WebGL Lessons". |
| 10 | + |
| 11 | +You might think you'd learn something by updating the lessons to work with the current version |
| 12 | +of glMatrix, but, in all honesty, you won't. |
| 13 | + |
| 14 | +I've done it. I doubt I'm the first. |
| 15 | + |
| 16 | +Here's an outline of the necessary changes. |
| 17 | + |
| 18 | +* the functionality of mat4.set(mvMatrix, copy) has been replaced with mat4.copy(copy, mvMatrix). |
| 19 | + |
| 20 | +* mat4.toInverseMat3(mvMatrix, normalMatrix) and mat3.transpose(normalMatrix) have been combined |
| 21 | + into a single method in the mat3 class, mat3.normalFromMat4(). |
| 22 | + |
| 23 | +* the API of mat4.perspective has been rearranged so that |
| 24 | + |
| 25 | + mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); |
| 26 | + |
| 27 | + becomes |
| 28 | + |
| 29 | + mat4.perspective (pMatrix, 45.0, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0); |
| 30 | + |
| 31 | +* the API for a number of relevant methods now take as arguments the matrix (or vector) to be |
| 32 | + acted upon and the matrix (or vector) to receive the action. These include mat4.translate(), |
| 33 | + mat4.rotate(), and mat4.multiply(), and the update is simply to change, for example, |
| 34 | + |
| 35 | + mat4.translate(mvMatrix, [0.0, 0.0, z]); |
| 36 | + |
| 37 | + to |
| 38 | + |
| 39 | + mat4.translate (mvMatrix, mvMatrix, [0.0, 0.0, z]); |
| 40 | + |
| 41 | +* the parameters in the API for vec3.normalize() and vec3.scale() have been reversed, so that |
| 42 | + |
| 43 | + vec3.normalize(lightingDirection, adjustedLD); |
| 44 | + vec3.scale(adjustedLD, -1); |
| 45 | + |
| 46 | + becomes |
| 47 | + |
| 48 | + vec3.normalize(adjustedLD, lightingDirection); |
| 49 | + vec3.scale(adjustedLD, adjustedLD, -1); |
| 50 | + |
| 51 | + |
| 52 | +I've also changed the values of z, zoom, or zPos (and, when present, the DOM element, "lightPositionZ") |
| 53 | +to approximate the scene size in the original tutorial, added semicolons when flagged by my IDE, removed |
| 54 | +commas at ends of arrays (this is JavaScript, not Python), and replaced a few occurrences of "= Array()" |
| 55 | +with "= []". I've tried to flag all my changes with "// Update: ...". |
| 56 | + |
| 57 | +Hoping this saves a lot of people a lot of time. |
| 58 | + |
| 59 | +Eric Theise / @erictheise |
0 commit comments