title: How to implement batches using webgl?
body: <p>I am working on a small game using webgl. Within this game I have some kind of forest which consists out of many (100+) tree objects. Because I only have a few different tree models, I rotate and scale these models in a different way before I display them.</p>
  
  <p>At the moment I loop over all trees to display them:</p>
  
  <pre><code>for (var tree in trees) {
    tree.display();
  }
  </code></pre>
  
  <p>While the <code>display()</code> method of tree looks like:</p>
  
  <pre><code>display : function() { // tree
    this.treeModel.setRotation(this.rotation);
    this.treeModel.setScale(this.scale);
    this.treeModel.setPosition(this.position);
    this.treeModel.display();
  }
  </code></pre>
  
  <p>Many tree objects share the same <code>treeModel</code> object, so I have to set rotation/scale/position of the model everytime before I display it. The rotation/scale/position values are different for every tree.</p>
  
  <p>The display method of <code>treeModel</code> does all the gl stuff:</p>
  
  <pre><code>display : function() { // treeModel
    // bind texture
    // set uniforms for projection/modelview matrix based on rotation/scale/position
    // bind buffers
    // drawArrays
  }
  </code></pre>
  
  <p>All tree models use the same shader but can use different textures.</p>
  
  <p>Because a single tree model consists only out of a few triangles I want to combine all trees into one VBO and display the whole forest with one <code>drawArrays()</code> call.</p>
  
  <p>Some assumptions to make talking about numbers easier:</p>
  
  <ul>
  <li>There are 250 trees to display</li>
  <li>There are 5 different tree models</li>
  <li>Every tree model has 50 triangles</li>
  </ul>
  
  <p>Questions I have:</p>
  
  <ul>
  <li><p>At the moment I have 5 buffers that are <code>50 * 3  *  8 (position + normal + texCoord) * floatSize</code> bytes large. When i want to display all trees with one vbo i would have a buffer with <code>250 * 50 * 3 * 8 * floatSize</code> byte size. I think I can't use an index buffer because I have different position values for every tree (computed out of the position value of the tree model and the tree position/scale/rotation). Is this correct or is there still a way I can use index buffers to reduce the buffer size at least a bit? Maybe there are other ways to optimize this?</p></li>
  <li><p>How to handle different textures of the tree models? I can bind all textures to different texture units but how can I decide within the shader which texture should be used for the fragment that is currently displayed?</p></li>
  <li><p>When I want to add a new tree (or any other kind of object) to this buffer at runtime: Do I have to create a new buffer and copy the content? I think new values can't be added  by using <code>glMapBuffer</code>. Is this correct?</p></li>
  </ul>