Question

下面是JS / WebGL代码片段，用于控制动画定时 requestAnimFrame通常是shim。在FireFox和Safari下工作。在Chrome下，elapsedTime在第2帧及以后变为负数。显然（根据this article）webkitRequestAnimationFrame没有将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下你会看到动画永远在继续（直到我修复它）。

Answer 1

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

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++;
}

requestAnimationFrame计算经过的时间

1 个答案: