glMatrix API has changed
Opened this issue · 4 comments
So the API for glMatrix has changed since these tutorials were written.
I have completed tutorial_001 and found that these areas need to be changed:
mat4.perspective() now requires the output matrix be the first parameter and mat4.translate() now requires three params: outMat, inMat, translationVector:
so inside drawScene() from
function drawScene() {
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);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}
to
function drawScene () {
gl.viewport (0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear (gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective (pMatrix, 45.0, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
mat4.identity (mvMatrix);
var translation = vec3.create ();
//draw the triangle
vec3.set (translation, -1.5, 1.0, -7.0);
mat4.translate (mvMatrix, mvMatrix, translation);
gl.bindBuffer (gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer (shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms ();
gl.drawArrays (gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
// draw the square
vec3.set (translation, 3.0, 0.0, 0.0);
mat4.translate (mvMatrix, mvMatrix, translation);
gl.bindBuffer (gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer (shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms ();
gl.drawArrays (gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}
You don't have to do the translation vector the way I did it, but it's there in case anyone wants cares.
In general, the new glMatrix API is much more consistent; the docs are at the URL above.
Thanks for the heads-up. Tony Parisi is now taking over the Learning WebGL lessons -- he tells me he's planning to make these changes. I'll post a link to his fork of the repo soon.
Yeah I just stumbled upon this same issue while reading the tutorials. Seeing many people ask this same thing in Stack Overflow also .. maybe time to update the tutorial :) Took a while to find this issue.
Thank you @doctorme for providing the solution :)
Thanks, was looking for it
This is the official fork of the lessons now: https://github.com/tparisi/webgl-lessons