title: WebGL - Invalid Operation useProgram
body: <p>I'm learning WebGL and am on <a href="http://learningwebgl.com/blog/?p=684" rel="noreferrer">this</a> tutorial that has to do with lighting. I'm new to JavaScript so I'm not so good at debugging it yet. I keep getting these errors, anyone know why I'm getting them and how to fix it?</p>
  
  <pre><code>WebGL: INVALID_OPERATION: useProgram: program not valid http://insanergamer.zxq.net/:1
  WebGL: INVALID_OPERATION: getAttribLocation: program not linked http://insanergamer.zxq.net/:1
  WebGL: INVALID_OPERATION: getUniformLocation: program not linked http://insanergamer.zxq.net/:1
  WebGL: too many errors, no more errors will be reported to the console for this context. 
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf 8" /&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
      &lt;script type="text/javascript" language="javascript" src="gl-matrix.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" language="javascript" src="webgl-utils.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" language="javascript" src="first.js"&gt;&lt;/script&gt;
  
          &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
                 precision mediump float;
  
                  varying vec2 vTextureCoord;
                  varying vec3 vLightWeighting;
  
                  uniform sampler2D uSampler;
  
                  void main(void) {
                      vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
                      gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);
                  }
  
          &lt;/script&gt;
  
          &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
              attribute vec3 aVertexPosition;
              attribute vec3 aVertexNormal;
              attribute vec2 aTextureCoord;
  
              uniform mat4 uMVMatrix;
              uniform mat4 uPMatrix;
              uniform mat3 uNMatrix;
  
              uniform vec3 uAmbientColor;
  
              uniform vec3 uLightingDirection;
              uniform vec3 uDirectionalColor;
  
              uniform bool uUseLighting;
  
              varying vec2 vTextureCoord;
              varying vec3 vLightWeighting;
  
              void main(void) {
                  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
                  vTextureCoord = aTextureCoord;
  
                  if (!uUseLighting) {
                      vLightWeighting = vec3(1.0, 1.0, 1.0);
                  } else {
                      vec3 transformedNormal = uNMatrix * aVertexNormal;
                      float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
                      vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
                  }
          &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onLoad="webGLStart()"&gt;
      &lt;header&gt;
      &lt;/header&gt;
      &lt;nav&gt;
      &lt;/nav&gt;
      &lt;section&gt;
          &lt;h3&gt;&lt;a href="todo.html"&gt;Link to the TODO page.&lt;/a&gt;&lt;/h3&gt;
  
          &lt;form&gt;
              &lt;input type="checkbox" id="lighting"&gt;&lt;/input&gt;Lighting On/Off&lt;br /&gt;
              Ambient Lighting Color: Red:&lt;input type="text" id="ambientR"&gt;&lt;/input&gt; Green:&lt;input type="text" id="ambientG"&gt;&lt;/input&gt; Blue:&lt;input type="text" id="ambientB"&gt;&lt;/input&gt; &lt;br /&gt;
              Light Direction: X:&lt;input type="text" id="lightDirectionX"&gt;&lt;/input&gt; Y:&lt;input type="text" id="lightDirectionY"&gt;&lt;/input&gt; Z:&lt;input type="text" id="lightDirectionZ"&gt;&lt;/input&gt; &lt;br /&gt;
              Direction Lighting Color: Red:&lt;input type="text" id="directionalR"&gt;&lt;/input&gt; Green:&lt;input type="text" id="directionalG"&gt;&lt;/input&gt; Blue:&lt;input type="text" id="directionalB"&gt;&lt;/input&gt; &lt;br /&gt;
          &lt;/form&gt;
  
          &lt;p&gt;Press 'F' to change Texture quality.&lt;/p&gt;
          &lt;p&gt;Use Arrow Keys to rotate cube.&lt;/p&gt;
          &lt;p&gt;Page Up and Page down to zoom in and out.&lt;/p&gt;
          &lt;canvas canvasProperties="prop" id="canvas1" style="border: none;" width="1280" height="720"&gt;&lt;/canvas&gt;
          &lt;article&gt;
              &lt;header&gt;
              &lt;/header&gt;
              &lt;footer&gt;
              &lt;/footer&gt;
          &lt;/article&gt;
      &lt;/section&gt;
      &lt;aside&gt;
      &lt;/aside&gt;
      &lt;footer&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>first.js</strong></p>
  
  <pre><code>    var gl;
  function initGL(canvas) {
      try {
          gl = canvas.getContext("experimental-webgl");
          gl.viewportWidth = canvas.width;
          gl.viewportHeight = canvas.height;
      } catch (e) {
      }
      if (!gl) {
          alert("Could not initialise WebGL, sorry :-(");
      }
  }
  
  
  function getShader(gl, id) {
      var shaderScript = document.getElementById(id);
      if (!shaderScript) {
          return null;
      }
  
      var str = "";
      var k = shaderScript.firstChild;
      while (k) {
          if (k.nodeType == 3) {
              str += k.textContent;
          }
          k = k.nextSibling;
      }
  
      var shader;
      if (shaderScript.type == "x-shader/x-fragment") {
          shader = gl.createShader(gl.FRAGMENT_SHADER);
      } else if (shaderScript.type == "x-shader/x-vertex") {
          shader = gl.createShader(gl.VERTEX_SHADER);
      } else {
          return null;
      }
  
      gl.shaderSource(shader, str);
      gl.compileShader(shader);
  
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
          alert(gl.getShaderInfoLog(shader));
          return null;
      }
  
      return shader;
  }
  
  
  var shaderProgram;
  
  function initShaders() {
      var fragmentShader = getShader(gl, "shader-fs");
      var vertexShader = getShader(gl, "shader-vs");
  
      shaderProgram = gl.createProgram();
      gl.attachShader(shaderProgram, vertexShader);
      gl.attachShader(shaderProgram, fragmentShader);
      gl.linkProgram(shaderProgram);
  
      if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
          alert("Could not initialise shaders");
      }
  
      gl.useProgram(shaderProgram);
  
      shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
      gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  
      shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
      gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
  
      shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
      gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);
  
      shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
      shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
      shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix");
      shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
      shaderProgram.useLightingUniform = gl.getUniformLocation(shaderProgram, "uUseLighting");
      shaderProgram.ambientColorUniform = gl.getUniformLocation(shaderProgram, "uAmbientColor");
      shaderProgram.lightingDirectionUniform = gl.getUniformLocation(shaderProgram, "uLightingDirection");
      shaderProgram.directionalColorUniform = gl.getUniformLocation(shaderProgram, "uDirectionalColor");
  }
  
  var cubeTextures = Array();
  function initTexture()
  {
      var cubeImage = new Image();
  
      for(var i=0;i &lt; 3; i++)
      {
          var texture = gl.createTexture();
          texture.image = cubeImage;
          cubeTextures.push(texture);
      }
  
      cubeImage.onload = function()
      {
          handleLoadedTexture(cubeTextures);
      }
      cubeImage.src = "cube.png";
  }
  
  function handleLoadedTexture(texture)
  {
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  
      gl.bindTexture(gl.TEXTURE_2D,texture[0]);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture[0].image);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  
      gl.bindTexture(gl.TEXTURE_2D, texture[1]);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture[1].image);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  
      gl.bindTexture(gl.TEXTURE_2D, texture[2]);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture[2].image);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
      gl.generateMipmap(gl.TEXTURE_2D);
  
      gl.bindTexture(gl.TEXTURE_2D, null);
  }
  
  var mvMatrix = mat4.create();
  var mvMatrixStack = []
  var pMatrix = mat4.create();
  
  function mvPushMatrix()
  {
      var copy = mat4.create();
      mat4.set(mvMatrix, copy);
      mvMatrixStack.push(copy);
  }
  
  function mvPopMatrix()
  {
      if(mvMatrixStack.length == 0)
      {
          throw "No Matrix to Pop!";
      }
      mvMatrix = mvMatrixStack.pop();
  }
  
  function degToRad(degrees)
  {
      return degrees * Math.PI / 180;
  }
  function setMatrixUniforms() {
      gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
      gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
  
      var normalMatrix = mat3.create();
      mat4.toInverseMat3(mvMatrix, normalMatrix);
      mat3.transpose(normalMatrix);
      gl.uniformMatrix3fv(shaderProgram.nMatrixUniform, false, normalMatrix);
  }
  
  var cubeVertexPositionBuffer;
  var cubeVertexTextureCoordBuffer;
  var cubeVertexIndexBuffer;
  
  function initBuffers() {
  
      cubeVertexPositionBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
      vertices = [
         // Front face
        -1.0, -1.0,  1.0,
         1.0, -1.0,  1.0,
         1.0,  1.0,  1.0,
        -1.0,  1.0,  1.0,
  
        // Back face
        -1.0, -1.0, -1.0,
        -1.0,  1.0, -1.0,
         1.0,  1.0, -1.0,
         1.0, -1.0, -1.0,
  
        // Top face
        -1.0,  1.0, -1.0,
        -1.0,  1.0,  1.0,
         1.0,  1.0,  1.0,
         1.0,  1.0, -1.0,
  
        // Bottom face
        -1.0, -1.0, -1.0,
         1.0, -1.0, -1.0,
         1.0, -1.0,  1.0,
        -1.0, -1.0,  1.0,
  
        // Right face
         1.0, -1.0, -1.0,
         1.0,  1.0, -1.0,
         1.0,  1.0,  1.0,
         1.0, -1.0,  1.0,
  
        // Left face
        -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(vertices), gl.STATIC_DRAW);
      cubeVertexPositionBuffer.itemSize = 3;
      cubeVertexPositionBuffer.numItems = 24;
  
       cubeVertexNormalBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
      var vertexNormals = [
          // Front face
           0.0,  0.0,  1.0,
           0.0,  0.0,  1.0,
           0.0,  0.0,  1.0,
           0.0,  0.0,  1.0,
  
          // Back face
           0.0,  0.0, -1.0,
           0.0,  0.0, -1.0,
           0.0,  0.0, -1.0,
           0.0,  0.0, -1.0,
  
          // Top face
           0.0,  1.0,  0.0,
           0.0,  1.0,  0.0,
           0.0,  1.0,  0.0,
           0.0,  1.0,  0.0,
  
          // Bottom face
           0.0, -1.0,  0.0,
           0.0, -1.0,  0.0,
           0.0, -1.0,  0.0,
           0.0, -1.0,  0.0,
  
          // Right face
           1.0,  0.0,  0.0,
           1.0,  0.0,  0.0,
           1.0,  0.0,  0.0,
           1.0,  0.0,  0.0,
  
          // Left face
          -1.0,  0.0,  0.0,
          -1.0,  0.0,  0.0,
          -1.0,  0.0,  0.0,
          -1.0,  0.0,  0.0
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
      cubeVertexNormalBuffer.itemSize = 3;
      cubeVertexNormalBuffer.numItems = 24;
  
      cubeVertexTextureCoordBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
      var textureCoords = [
           // Front face
            0.0, 0.0,
            1.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,
  
            // Back face
            1.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,
            0.0, 0.0,
  
            // Top face
            0.0, 1.0,
            0.0, 0.0,
            1.0, 0.0,
            1.0, 1.0,
  
            // Bottom face
            1.0, 1.0,
            0.0, 1.0,
            0.0, 0.0,
            1.0, 0.0,
  
            // Right face
            1.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,
            0.0, 0.0,
  
            // Left face
            0.0, 0.0,
            1.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
      cubeVertexTextureCoordBuffer.itemSize = 2;
      cubeVertexTextureCoordBuffer.numItems = 24;
  
      cubeVertexIndexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
      var cubeVertexIndices = [
        0, 1, 2,      0, 2, 3,    // Front face
        4, 5, 6,      4, 6, 7,    // Back face
        8, 9, 10,     8, 10, 11,  // Top face
        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(cubeVertexIndices), gl.STATIC_DRAW);
      cubeVertexIndexBuffer.itemSize = 1;
      cubeVertexIndexBuffer.numItems = 36;
  }
  
  var rCubeX = 0;
  var SpeedX = 0;
  
  var rCubeY = 0;
  var SpeedY = 0;
  
  var z = -5.0;
  
  var filter = 0;
  
  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, [0.0, 0.0, z]);
  
      mvPushMatrix();
      mat4.rotate(mvMatrix, degToRad(rCubeX), [1, 0, 0]);
      mat4.rotate(mvMatrix, degToRad(rCubeY), [0, 1, 0]);
  
      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
      gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  
      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
      gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, cubeVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
  
      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
      gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
  
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, cubeTextures[filter]);
      gl.uniform1i(shaderProgram.samplerUniform, 0);
      var lighting = document.getElementById("lighting").checked;
      gl.uniform1i(shaderProgram.useLightingUniform, lighting);
      if(lighting)
      {
          gl.uniform3f(
              shaderProgram.ambientColorUniform,
              parseFloat(document.getElementById("ambientR").value),
              parseFloat(document.getElementById("ambientG").value),
              parseFloat(document.getElementById("ambientB").value)
          );
      }
  
      var lightingDirection = [
          parseFloat(document.getElementById("lightDirectionX").value),
          parseFloat(document.getElementById("lightDirectionY").value),
          parseFloat(document.getElementById("lightDirectionZ").value)
      ];
      var adjustedLD = vec3.create();
      vec3.normalize(lightingDirection, adjustedLD);
      vec3.scale(adjustedLD, -1);
      gl.uniform3fv(shaderProgram.lightingDirectionUniform, adjustedLD);
      gl.uniform3f(
          shaderProgram.directionalColorUniform,
          parseFloat(document.getElementById("directionalR").value),
          parseFloat(document.getElementById("directionalG").value),
          parseFloat(document.getElementById("directionalB").value)   
      );
  
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
      setMatrixUniforms();
      gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  
      mvPopMatrix();
  }
  
  var lastTime = 0;
  function animate()
  {
      var timeNow = new Date().getTime();
      if(lastTime != 0)
      {
          var elapsed = timeNow - lastTime;
  
          rCubeX += (SpeedX * elapsed) / 1000.0;
          rCubeY += (SpeedY * elapsed) / 1000.0;
      }
      lastTime = timeNow;
  }
  
   var currentlyPressedKeys = {};
  
   function handleKeyDown(event){
      currentlyPressedKeys[event.keyCode] = true;
      if(String.fromCharCode(event.keyCode) == "F"){
          filter += 1;
          if(filter == 3){
              filter = 0;
          }
      }
   }
  
   function handleKeyUp(event){
      currentlyPressedKeys[event.keyCode] = false;
  
   }
  function handleKeys()
  {
      if(currentlyPressedKeys[33])
      {
       z -= 0.05;
      }
  
      if(currentlyPressedKeys[34])
      {
          z += 0.05;
      }
  
      if(currentlyPressedKeys[37])
      {
          SpeedY --;
      } else if (SpeedY &lt; 0){
          SpeedY ++;
      }
  
      if(currentlyPressedKeys[39])
      {
          SpeedY ++;
      }else if(SpeedY &gt; 0){
          SpeedY --;
      }
  
       if (currentlyPressedKeys[38]) {
           SpeedX --;
      } else if(SpeedX &lt; 0){
           SpeedX ++;
      }
  
      if (currentlyPressedKeys[40]) {
           SpeedX ++;
      } else if(SpeedX &gt; 0){
           SpeedX--;
      }
  }
  
  function update()
  {
      requestAnimFrame(update);
      handleKeys();
      drawScene();
      animate();
  }
  
  
  function webGLStart() {
      var canvas = document.getElementById("canvas1");
      initGL(canvas);
      initShaders();
      initBuffers();
      initTexture();
  
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.enable(gl.DEPTH_TEST);
  
      document.onkeydown = handleKeyDown;
      document.onkeyup = handleKeyUp;
  
      update();
  }
  </code></pre>