title: WebGL: Optimizing a vertex buffer that changes values & vertex count every frame
body: <p>I'd like to implement a renderer with vertex buffers that will be updated on the application side every frame. Additionally, the number of vertices (i.e., number of triangles) will be changing every frame as well.</p>
  
  <p>My approach would be to pre-allocate the maximum needed once as a Float32Array, then update just the values that change, and update the buffer data with bufferSubData. Then draw the ones I want by sending a range from the index buffer.</p>
  
  <p>As a minimal example, let's say I have allocated position vertices for 2 separate triangles in a Float32Array, and for this frame I just want to move and draw the 2nd triangle. I would think I'd do:</p>
  
  <pre><code>arrPos[9] += 1.0; // move the X coordinates in the Float32Array
  arrPos[12] += 1.0;
  arrPos[15] += 1.0;
  gl.bindBuffer(gl.ARRAY_BUFFER, bufPos); // tell GL which buffer to use
  gl.bufferSubData( gl.ARRAY_BUFFER, 3 * 3 * 4, arrPos ); // update the vertices - ERROR
  
  // then just draw the 2nd traingle by sending its indices only
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufId); // tell GL which buffer to use
  gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 3 * 2); // draw just this range
  </code></pre>
  
  <p>Problem is, bufferSubData throws the error: "GL ERROR :GL_INVALID_VALUE : glBufferSubData: out of range"</p>
  
  <p>I've tried this using offsets 3, 9, 12 for bufferSubData just for the heck of it, but they all give me the same error.</p>
  
  <p>On another note: if I can ever get this working, it appears to me that if I want to draw a variable number of triangles every frame while re-using this pre-allocated Float32Array, I'll need to update the values at the END of the array, not the start, since I can only specify the offset, not the start index, to bufferSubData. I'm hoping someone can tell me if this approach can work or not, or if I'm completely off track and should stop wasting my time.</p>