requestAnimationFrame计算经过的时间

时间:2013-08-12 20:37:02

标签: javascript webgl requestanimationframe

下面是JS / WebGL代码片段,用于控制动画定时 requestAnimFrame通常是shim。在FireFox和Safari下工作。 在Chrome下,elapsedTime在第2帧及以后变为负数。 显然(根据this articlewebkitRequestAnimationFrame没有 将currentTime参数传递给draw回调!?!什么是计算经过时间的正确的跨浏览器方法!?这就是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);
}

实际的WebGL程序是here。在FireFox和Safari下你会看到一个动画循环 - 在Chrome下你会看到动画永远在继续(直到我修复它)。

1 个答案:

答案 0 :(得分:0)

如果我找对你 - 你想测量渲染功能所花费的时间吗?然后你应该这样做:

function draw() {
  requestAnimFrame(draw);
  var start = Date.now();

  // perform your drawing

  var elapsed = Date.now() - start;
}

但是如果你需要FPS(每秒帧数),那么类似的东西会:

var FPS = 0;
var ticks = 0;
var lastFPS = 0;

function draw() {
  requestAnimFrame(draw);

  // perform your drawing

  var now = Date.now();
  if (now - lastFPS >= 1000) {
    lastFPS = now;
    FPS = ticks;
    ticks = 0;
  }
  ticks++;
}