In TWGL, why are "setBuffersAndAttributes" and "drawBufferInfo" two seperate calls?

Question

In TWGL, why do I have to pass the buffer information first to setBuffersAndAttributes and then pass it again to drawBufferInfo? I'm very new to WebGL and just try to understand the pipeline, why are these two seperate calls, in which scenario would I first set the buffer information and then do something else before drawing it or not draw it at all or draw a different buffer information?

Answer 1

why are these two seperate calls, in which scenario would I first set the buffer information and then do something else before drawing it or not draw it at all or draw a different buffer information?

The most common reason would be drawing many of the same thing.

twgl.setBuffersAndAttributes(gl, someProgramInfo, someBufferInfo);

// uniforms shared by all instances like projection or view
twgl.setUniforms(...); 

for each instance
  // uniforms unique this instance like material, texture or world matrix
  twgl.setUniforms(...);  
  twgl.drawBufferInfo(...);

The only thing twgl.drawBufferInfo does is call gl.drawArrays or gl.drawElements and the only info it needs to do that is

1. the draw count as in how many vertices to process
2. whether or the data is indexed (in other words, should it call gl.drawArrays or gl.drawElements
3. If it's index, what type of indices are, UNSIGNED_BYTE, UNSIGNED_SHORT, or UNSIGNED_INT

It's sole purpose is so you don't have to change your code from gl.drawArrays to gl.drawElements or visa versa if you change the data from non-indexed to indexed