title: How to reduce draw calls in OpenGL/WebGL
body: <p>When i read about performance in OpenGL/WebGL, i almost hear about reducing the draw calls. So my problem is that i am using only 4 vertices to draw a textured quad. This means generally my vbo contains only 4 vertices. 
  Basically</p>
  
  <pre><code>gl.bindBuffer(gl.ARRAY_BUFFER,vbo);
  gl.uniformMatrix4fv(matrixLocation, false, modelMatrix);
  gl.drawArrays(gl.TRIANGLE_FAN,0, vertices.length/3);
  </code></pre>
  
  <p>And here comes the problem i see. Before drawing i update the modelmatrix of the current quad. For example to move it 5 units along the y axis.</p>
  
  <p>So what i have to:</p>
  
  <pre><code>gl.bindBuffer(gl.ARRAY_BUFFER,vbo);
  gl.uniformMatrix4fv(matrixLocation, false, modelMatrix);
  gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length/3);
  
  gl.uniformMatrix4fv(matrixLocation, false, anotherModelMatrix);
  gl.drawArrays(gl.TRIANGLE_FAN,0, vertices.length/3);
  ....// repeat until all textures are rendered
  </code></pre>
  
  <p>How is it possible for me to reduce the draw calls? Or even reduce it to only one draw call. </p>