title: WebGL - trying to create a 3D model progressively
body: <p>I have mainly two functions in my code:</p>
  
  <ol>
  <li>initBuffers</li>
  <li>drawScene</li>
  </ol>
  
  <p>I am changing the buffer data i.e vertices and color in a loop and calling the drawScene function as shown below:</p>
  
  <pre><code>function tick() {
      initBuffers();  //use default set of vertices to draw a plane
      drawScene();
  var vertices = [
      // Bottom face
      -2.0, 1.0, -2.0,
      -2.0, 1.0,  2.0,
       2.0, 1.0,  2.0,
       2.0, 1.0, -2.0,
  ];
  initBuffers(vertices);
  drawScene();
  }
  </code></pre>
  
  <p>This works all fine. I get two planes, first one drawn from default set of vertices and the second one drawn from the "vetices" shown above.</p>
  
  <p>But if I change the last line to:</p>
  
  <pre><code>setTimeout(drawScene(), 3000);
  </code></pre>
  
  <p>I can only see the second plane drawn from "vertices" and my first plane disappears. How can I fix this?</p>
  
  <p>My goal is to draw some 100s of planes using different vertices in a for loop, and show it progressively to the user by using setTimeout.</p>