title: WebGL: glDrawElements causes 'glDrawElements: attempt to access out of range vertices in attribute 0'
body: <p>I'm trying to draw a simple square, nothing fancy and yet, I end up with </p>
  
  <p>'glDrawElements: attempt to access out of range vertices in attribute 0'</p>
  
  <p>I've specified 4 indicies and used an index buffer to reference them. If I change the icount to 3, I get the first triangle but a value of 6 causes the referenced error. </p>
  
  <p>The referenced classes VertexShader, FragmentShader, Program and Environment are simple util classes and the program doesn't report any errors when compiled.</p>
  
  <p>TIA ... </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="glx" width="400" height="400"&gt;&lt;/canvas&gt;
  
  &lt;script type="text/javascript" src="../vendor/gl-matrix/gl-matrix.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../vendor/underscore/underscore-min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="../lib/GLObject.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/Environment.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/Shader.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/Program.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="x-shader/vertex" id="vshader"&gt;
          attribute vec4 a_position;
          //attribute vec4 a_colour;
          varying vec4 v_colour;
  
          void main() {
              gl_Position = a_position;
              v_colour = vec4(1.0, 0.0, 0.0, 1.0);
          }
  
  
  &lt;/script&gt;
  
  &lt;script type="x-shader/fragment" id="fshader"&gt;
          precision mediump float;
  
          varying vec4 v_colour;
  
          void main() {
              gl_FragColor = v_colour;
          }
  
  
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var
          program, vshader, fshader,
          gl, p, env,// gl, program instance and environment info
          vertexData, indexData, // typed arrays for the vertex and index data
          vbuffer,    // vertex positions buffer
          ibuffer     // index buffer
          ;
  
      gl = glx.getGL('glx');
      env = new glx.Environment(gl);
  
  
      vshader = new glx.VertexShader(gl, 'vshader');
      fshader = new glx.FragmentShader(gl, 'fshader');
  
      program = new glx.Program(gl, vshader, fshader);
  
      program.compile();
  
      p = program.getProgram();
      gl.useProgram(p);
  
      vbuffer = gl.createBuffer();
      ibuffer = gl.createBuffer();
  
      // setup buffers
      vertexData = new Float32Array([
         -0.5, 0.5, -0.5,
          -0.5, -0.5, -0.5,
          0.5, -0.5, -0.5,
          0.5, 0.5 -0.5
      ]);
  
      indexData = new Uint8Array([
         0, 1, 2,
         0, 2, 3
      ]);
  
      gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
  
      // get program attributes
      var fsize = Float32Array.BYTES_PER_ELEMENT;
      var a_position = gl.getAttribLocation(p, 'a_position');
      gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, fsize * 3, 0);
      gl.enableVertexAttribArray(a_position);
  
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
      var icount = indexData.length;
  
      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawElements(gl.TRIANGLES, icount, gl.UNSIGNED_BYTE, 0);
  
  
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>