1

下面是控制动画时间的 JS/WebGL 代码片段，其中 requestAnimFrame通常是shim。在 FireFox 和 Safari 下运行得很好。在 Chrome 下，第elapsedTime2 帧及以后的帧变为负数。显然（根据这篇文章）webkitRequestAnimationFrame没有将currentTime参数传递给draw回调！？！计算经过时间的正确跨浏览器方法是什么！？这太疯狂了！

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 程序在这里。在 FireFox 和 Safari 下，您将看到一个动画循环——在 Chrome 下，您将看到动画一直播放（直到我修复它）。

4

1 回答 1

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++;
}
于 2013-09-11T14:36:45.313 回答