title: How do I use WebGL drawElements offset?
body: <p>This is a rather WebGL specific question. I am having trouble understanding the WebGL-specific implementation of drawElements. Here is the API specification. <a href="http://www.khronos.org/registry/webgl/specs/1.0/" rel="noreferrer">From the WebGL specification</a>.</p>
  
  <p>How exactly do I use the offset? Can I use the offset to mimic the more classic glDrawRangeElements?</p>
  
  <blockquote>
    <p>void <b>drawElements</b>(GLenum mode, GLsizei count, GLenum type, GLintptr offset)
    (OpenGL ES 2.0 §2.8, man page)</p>
    
    <p><i>Draw using the currently bound element array buffer. The given offset is in bytes, and must be a valid multiple of the size of the given type or an INVALID_OPERATION error will be generated; see Buffer Offset and Stride Requirements. If count is greater than zero, then a non-null WebGLBuffer must be bound to the ELEMENT_ARRAY_BUFFER binding point or an INVALID_OPERATION error will be generated.</i></p>
  </blockquote>
  
  <p>I have a flat vertices array and a flat indices array, and drawing using one drawElements call has been working out great, but now I want to draw parts of the vertices separately because they are different objects. For instance, indices[0] to indices[99] is one object (e.g. an arm), and indices[100] to indices[149] (e.g. a leg) is another object. The groups must be drawn separately - ultimately because they have different textures, and I will bind a texture before each drawElements call (maybe there is another way to do this altogether?)</p>
  
  <p>Thus, I want to call drawElements on indices[0] to indices[99], and drawElements on indices[100] to indices[149]. Can I do that with the drawElements offset?</p>
  
  <p>With the code I have here, I can draw the first group very nicely, but the rest of the groups don't show up.</p>
  
  <pre class="lang-js prettyprint-override"><code>for(var g = 0; g &lt; groups.length; g++) {
      var group = groups[g];
  
      //Set the texture
      var material = group.material;
      material.bindTexture();
  
      //Draw it!
      var offset = group.offset; //index of the first element of the indices, (e.g. position '0' or position '100', from above)
      var num_items = group.num_items; //number of items in this group, (e.g. '100' elements or '50' elements, from above)
      gl.drawElements(draw_mode, num_items, indices.type, offset);
  }
  </code></pre>