title: WebGL using gl-matrix library mat4.translate not running
body: <p>I have this segment of code:</p>
  
  <pre><code>function setupWebGL() {
      gl.clearColor(0.1, 0.5, 0.1, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.viewport(0,0,400,300);
  
      mat4.perspective(45, 400 / 300, 0.1, 100.0, pMatrix);
      mat4.identity(mvMatrix);
      mat4.translate(mvMatrix, [0, 0, -2.0]);
    }
  </code></pre>
  
  <p>And everything in the code runs except the very last line </p>
  
  <pre><code>mat4.translate(mvMatrix, [0, 0, -2.0]);
  </code></pre>
  
  <p>I know this because I put alert functions after every line until they failed to run (I need a better way of debugging in chrome, any suggestions?) </p>
  
  <p>I'm using the gl-Matrix library found here <a href="https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix-min.js" rel="noreferrer">https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix-min.js</a></p>
  
  <p>Any ideas on why that line is stopping the code execution?</p>
  
  <p>Here is the full code:</p>
  
  <pre><code>&lt;!doctype html&gt;
      &lt;html&gt;
        &lt;head&gt;
         &lt;title&gt;WebGL - Chapter One - Lol&lt;/title&gt;
  
  &lt;style&gt;
    body{ background-color: grey; }
    canvas{ background-color: white; }
  &lt;/style&gt;
  &lt;script src = "gl-matrix-min.js"&gt;&lt;/script&gt;
  &lt;script src = "raf_polyfill.js"&gt;&lt;/script&gt;
  &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
    attribute vec3 aVertexPosition;
    attribute vec3 aVertexColor;
  
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
  
    varying highp vec4 vColor;
    void main(void){
      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
      vColor = vec4(aVertexColor, 1.0);
    }
  &lt;/script&gt;
  
  &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
    varying highp vec4 vColor;
    void main(void){
      gl_FragColor = vColor;
    }
  &lt;/script&gt;
  
  &lt;script&gt;
    var gl = null,
        canvas = null,
        glProgram = null,
        fragmentShader = null,
        vertexShader = null;
  
    var vertexPositionAttribute = null,
        trianglesVerticeBuffer = null,
        vertexColorAttribute = null,
        trianglesColorBuffer = null;
  
    var angle = 0.0;
  
    var mvMatrix = mat4.create(),
        pMatrix = mat4.create();
  
  
    function initWebGL(){
      var canvas = document.getElementById("my-canvas");
      try{
        gl = canvas.getContext("experimental-webgl");
      }catch(e){}
  
      if(gl){
  
        initShaders();
        setupBuffers();
  
        getMatrixUniforms();
  
        animLoop();
  
  
  
      }else{
        alert("Error: Your browser does not appear to support WebGL.");
      }
    }
    function animLoop(){
  
            setupWebGL();
  
            setupDynamicBuffers();
  
            setMatrixUniforms();
            drawScene();
            requestAnimationFrame(animLoop,canvas);
    }
  
    function setupWebGL() {
      //sets the clear color to red lol
      gl.clearColor(0.1, 0.5, 0.1, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.viewport(0,0,400,300);
  
      mat4.perspective(45, 400 / 300, 0.1, 100.0, pMatrix);
      mat4.identity(mvMatrix);
  mat4.translate(mvMatrix, [0, 0, -2.0]);  
  
    }
  
    function initShaders(){
      var fs_source = document.getElementById("shader-fs").innerHTML;
      var vs_source = document.getElementById("shader-vs").innerHTML;
  
  
      //compile shaders
      vertexShader = makeShader(vs_source, gl.VERTEX_SHADER);
      fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER);
      //create program
      glProgram = gl.createProgram();
  
      //attach and link shaders to the program
      gl.attachShader(glProgram, vertexShader);
      gl.attachShader(glProgram, fragmentShader);
      gl.linkProgram(glProgram);
  
      if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
        alert("Unable to initialize the shader program.");
      }
  
      //use program
      gl.useProgram(glProgram);
    }
  
    function makeShader(src, type) {
      //compile the vertex shader
      var shader = gl.createShader(type);
      gl.shaderSource(shader, src);
      gl.compileShader(shader);
  
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert("Error compiling shader: " + gl.getShaderInfoLog(shader));
      }
  
      return shader;
    }
  
    function getMatrixUniforms(){
        glProgram.pMatrixUniform = gl.getUniformLocation(glProgram, "uPMatrix");
        glProgram.mvMatrixUniform = gl.getUniformLocation(glProgram, "uMVMatrix");
    }
    function setMatrixUniforms(){
        gl.unifromMatrix4fv(glProgram.pMatrixUniform, false, pMatrix);
        gl.unifromMatrix4fv(glProgram.mvMatrixUniform, false, mvMatrix); 
    }
  
    function setupBuffers() {
      var triangleVerticeColors = [
           1.0, 0.0, 0.0,
           1.0, 1.0, 1.0,
           1.0, 0.0, 0.0,
  
           0.0, 0.0, 1.0,
           1.0, 1.0, 1.0,
           0.0, 0.0, 1.0
      ];
  
      trianglesColorBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVerticeColors), gl.STATIC_DRAW);
    }
  
    function setupDynamicBuffers(){
  
      var xTran = Math.sin(angle)/2.0;
      var triangleVertices = [
          -0.5 + xTran, 0.5, -0.5,
           0.0 + xTran, 0.0, -0.5,
          -0.5 + xTran, -0.5, -0.5,
  
           0.5 + xTran, 0.5, -0.5,
           0.0 + xTran, 0.0, -0.5,
           0.5 + xTran, -0.5, -0.5
      ];
      angle += 0.05;
  
      trianglesVerticeBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.DYNAMIC_DRAW);
  
    }
  
    function drawScene() {
      vertexPositionAttribute = gl.getAttribLocation(glProgram, "aVertexPosition");
      gl.enableVertexAttribArray(vertexPositionAttribute);
      gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer);
      gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
  
      vertexColorAttribute = gl.getAttribLocation(glProgram, "aVertexColor");
      gl.enableVertexAttribArray(vertexColorAttribute);
      gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer);
      gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 0, 0);
      gl.drawArrays(gl.TRIANGLES, 0, 6);
    }
  &lt;/script&gt;
  
  
  
  &lt;/head&gt;
  &lt;body onload="initWebGL()"&gt;
  &lt;canvas id="my-canvas" width="400" height="300"&gt;
      Your browser does not support the HTML5 canvas element.
  &lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>