title: requestAnimationFrame computing elapsed time
body: <p>Below is a snippet of JS/WebGL code that controls animation timing where
  <code>requestAnimFrame</code> is the usual <a href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/" rel="nofollow">shim</a>. Works dandy under FireFox and Safari.
  Under Chrome, the <code>elapsedTime</code> becomes negative on frames 2 and onward.
  Evidently (according to <a href="http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/" rel="nofollow">this article</a>) <code>webkitRequestAnimationFrame</code> does not
  pass the <code>currentTime</code> argument to the <code>draw</code> callback!?! What is the proper, cross-browser method for computing the elapsed time!? THIS IS MADNESS!</p>
  
  <pre><code>var animationStartTime;
  
  function draw(currentTime) {
      requestAnimFrame(draw);
  
      if (currentTime === undefined) {
         currentTime = Date.now();
      }
  
      if (animationStartTime === undefined) {
         animationStartTime = currentTime;
      }
  
      var elapsedTime = (currentTime - animationStartTime)/1000;
  
      gl.clear(gl.COLOR_BUFFER_BIT);
      drawScene(elapsedTime);
  }
  </code></pre>
  
  <p>The actual WebGL program is <a href="http://ezekiel.vancouver.wsu.edu" rel="nofollow">here</a>. Under FireFox and Safari you will see a single animation loop -- under Chrome you will see the animation go on forever (until I fix it).</p>