glMatrix API has changed

[Deleted user]

So the API for glMatrix has changed since these tutorials were written.

http://glmatrix.net/

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.

[Giles Thomas]

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.

[Sakari Lehtonen]

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 :)

[Steven Pinel]

Thanks, was looking for it

[Giles Thomas]

This is the official fork of the lessons now: https://github.com/tparisi/webgl-lessons