requestAnimationFrame computing elapsed time
Below is a snippet of JS/WebGL code that controls animation timing where
requestAnimFrame is the usual shim. Works dandy under FireFox and Safari.
Under Chrome, the elapsedTime becomes negative on frames 2 and onward.
Evidently (according to this article) webkitRequestAnimationFrame does not
pass the currentTime argument to the draw callback!?! What is the proper,
cross-browser method for computing the elapsed time!? THIS IS MADNESS!
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);
}
The actual WebGL program is here. 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).
No comments:
Post a Comment