title: Drawing many unique triangles with a single draw call (for better performance)?
body: <p>Here is a fiddle of the simplest case: <a href="http://jsfiddle.net/headchem/r28mm/10/" rel="nofollow noreferrer">http://jsfiddle.net/headchem/r28mm/10/</a></p>
  
  <p>Is there any way to avoid calling this line for every single triangle I wish to draw?</p>
  
  <pre><code>gl.drawArrays(gl.TRIANGLES, 0, numItems);
  </code></pre>
  
  <p>As a learning exercise, I'm trying to create a 2D game out of simple colored triangles. I'd like to put several hundred moving triangles on screen each frame, but my framerate is very slow with my current attempts. I suspect it's because of the hundreds of drawArrays() calls I am making each frame.</p>
  
  <p>I've read a bit about Vertex Buffer Objects, and <a href="https://stackoverflow.com/questions/7537013/opengl-is-it-better-to-batch-draw-or-to-have-static-vbos">this question sounds promising</a>, but I'm having trouble putting all the pieces together in my fiddle demo above. Is it possible to render hundreds of unique 2D triangle shapes + different colors + transparency in a single draw call with good performance?</p>