title: WebGL GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
body: <p>I'm attempting to fix a pre-existing bug in some code that is based on THREE.js rev 49 with some custom shaders. </p>
  
  <p>I'm a total WebGL newb, so I haven't been able to make much heads or tails of other answers since they seemed to assume a lot more knowledge than I had. I would be super appreciative of even any hints as to what to look for! :) The end result of the code is to draw a translucent box wireframe and paint the faces with translucent textures.</p>
  
  <p>The particular error is: </p>
  
  <p><code>[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1</code></p>
  
  <p>I traced the issue to a particular <code>_gl.drawElements( _gl.TRIANGLES, geometryGroup.__webglFaceCount, _gl.UNSIGNED_SHORT, 0 );</code> in THREE.WebGLRenderer.renderBuffer.</p>
  
  <p>Here is a snippet of the calling code:</p>
  
  <pre><code>scene.overrideMaterial = depthMaterial; // shaders below
  var ctx = renderer.getContext(); // renderer is a THREE.WebGLRenderer
  ctx.disable(ctx.BLEND);
  // renderTarget is a THREE.WebGLRenderTarget, _camera, scene is obvious
  renderer.render(scene, _camera, renderTarget, true); // error occurs here
  </code></pre>
  
  <p>Here are the relevant shaders:</p>
  
  <pre><code>    uniforms: {},
  
      vertexShader: [
          "varying vec3 vNormal;",
  
          "void main() {",
  
              "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
              "vNormal = normalMatrix * normal;",
  
              "gl_Position = projectionMatrix * mvPosition;",
  
          "}"
      ].join("\n"),
  
      fragmentShader: [
          "vec4 pack_depth( const in highp float depth ) {",
  
              "const highp vec4 bit_shift = vec4( 256.0, 256.0*256.0, 256.0*256.0*256.0, 256.0*256.0*256.0*256.0 );",
              "vec4 res = depth * bit_shift;",
              "res.x = min(res.x + 1.0, 255.0);",
              "res = fract(floor(res) / 256.0);",
              "return res;",
  
          "}",
  
          "void main() {",
              "gl_FragData[0] = pack_depth( gl_FragCoord.z );",
          "}"
      ].join("\n")
  </code></pre>
  
  <p>Thanks for your help!</p>