title: WebGL multiple Shaders
body: <p>I have read a previous StackOverflow post regarding this issue and am still having issues in getting two different shader sets to work correctly in one WebGL program.</p>
  
  <p>Below is a skeleton framework of the code. I have two separate sets of shaders, with different variable names to prevent cross-contamination. I create two initShader() functions, one for each set of shaders, and then call the initBuffers() and the draw() functions. The result is that only the second shader takes effect and only the item draw with this shader is shown, despite the shaders being separately identified and called within drawscene().</p>
  
  <p>Any suggestions for how to fix this issue will be appreciated.</p>
  
  <pre><code>Declare: vertexShaderA
  Declare: fragmentShaderA
  Declare: vertexShaderB (use distinct variable names to that of vertexShaderA)
  Declare: fragmentShaderB (use distinct variable names to that of fragmentShaderA)
  
  // main script
  
  initShadersA(){
  …
      gl.useProgram(shaderProgramA);
  …
  }
  initShadersB(){
  …
      gl.useProgram(shaderProgramB);
  …
  }
  …
  setMatrixUniformsA();
  setMatrixUniformsB();
  
  function initBuffers(){
  …
  }
  
  function drawScene(){
  …
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
  gl.vertexAttribPointer(shaderProgramA.vertexPositionAttributeA, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  …
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer);
   gl.uniform1i(shaderProgramA.samplerUniform, 0);
   setMatrixUniformsA();
   gl.drawElements(gl.TRIANGLES, vertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  
  …
  
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
  gl.vertexAttribPointer(shaderProgramB.vertexPositionAttributeB, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
  …
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer);
  gl.uniform1i(shaderProgramB.samplerUniform, 0);
  setMatrixUniformsB();
  gl.drawElements(gl.TRIANGLES, vertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
  }
  
   function draw() {
          requestAnimFrame(draw);
          animate(); 
          drawScene();
      }       
  function animate() { 
      …
  } 
  function webGLStart() {
          initGL(canvas);
          initShadersA();
          initShadersB();
          initBuffers();
          gl.clearColor(0.0, 0.0, 0.0, 1.0);
          gl.enable(gl.DEPTH_TEST);
          draw();
      }
  </code></pre>