javascript - requestAnimFrame 无法提供恒定的帧速率，但我的物理引擎需要它

Question

我将 Box2D 与 WebGL 结合使用。Box2D 需要恒定的帧速率(它的“世界”更新的时间步长)。

function update(time) {//update of box2d world
     world.Step(
           1/60   // 1 / frame-rate
        ,  3      //velocity iterations
        ,  8       //position iterations
     );

但我读过如下定义的 requestAnimFrame 是正确的方法。

     requestAnimFrame = (function() {
     return window.requestAnimationFrame ||
     window.webkitRequestAnimationFrame ||
     window.mozRequestAnimationFrame ||
     window.oRequestAnimationFrame ||
     window.msRequestAnimationFrame ||
     function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
       window.setTimeout(callback, 1000/60);
     };
})();

requestAnimFrame 没有给我一个恒定的帧率，所以我的 Box2D 的变量变得不同步。

有解决办法吗？

[编辑]

John (Cutch) 的解决方案在实现时如下所示:

function interpolate(dt) {
    var t = dt/time_step;
    body_coordinates = (1-t) * body_coordinates + t * next_body_coordinates;
}

var physicsDt = 0;
function tick() {
    var time_now = new Date().getTime();
    var dt = time_now - last_time; //Note that last_time is initialized priorly
    last_time = time_now;
    physicsDt += dt;
    clear_the_screen();
    requestAnimFrame(tick);
    drawEverything();
    if(physicsDt >= time_step) {
        update();
        physicsDt -= time_step;
    }
    interpolate(dt);
}

请注意，我的物理更新函数负责设置 next_attribue。此外，在此之前会调用物理更新，以保持物理世界领先 1 帧。

结果

动画相当流畅，除了那些我能看到一些非常糟糕的跳跃和随机出现的微动的时候。

我认为解决方案中没有解决以下问题:

----> 1) dt 可能变得大于 time_step :这将使 dt/time_step 大于 1，这会破坏插值方程。

当 dt 始终大于 time_step 时，问题就会增加。是否有可能克服时间间隔变得大于 time_step 的问题？

我的意思是，即使我们让世界比渲染提前一帧，如果时间间隔始终保持大于 time_step，那么“提前”的帧就不会花很长时间。

----> 2) 假设 dt 比 time_step 小 1 毫秒。然后，世界不会更新那一次。现在已完成插值并找到大致位置(比应有的位置晚 1 毫秒)。

假设下一次 dt 和 time_step 之间没有区别。

现在，考虑到 dt 和 time_step 是相等的，不进行插值。那么，接下来绘制的是世界中的“前方”框架，对吧？(使用那些方程式，t = 1)

但准确地说，渲染后的世界应该比之前晚 1 毫秒。我的意思是，它落后于世界框架的 1 毫秒不应该消失。但是在 t = 1 的情况下，绘制物理世界框架并忘记了 1ms。

我的代码或以上两点有误吗？

我请求你澄清这些问题。

[编辑]

我问了this的作者|网页，一种有效绘制多种形状的方法，在评论中 there .

我学会了这样做:我通过为每个形状保留单独的缓冲区并仅调用一次 createBuffer、bindBuffer、bufferData 来节省 bufferData 调用在初始化期间。

每次刷新屏幕时，我都必须遍历所有形状和在绑定(bind)所需形状的缓冲区(使用 bindBuffer)后，我必须调用 enableVertexAttribArray 和 vertexAttribPointer。

我的形状不会随时间改变。从头到尾只有各种各样的形状(如多边形、圆形、三 Angular 形)。

Answer 1

您必须将物理模拟步进时间与渲染垂直同步时间分离。最简单的解决方案是这样做:

frameCallback(dt) {
  physicsDt += dt;
  if (physicsDt > 16) {
    stepPhysics();
    physicsDt -= 16;
  }
  renderWorld();
  requestAnimFrame(frameCallback);
}

这里最大的问题是，有时您会使用过时的物理世界进行渲染，例如，如果 physicsDt 为 15，则不会发生模拟更新，但到那个时间点您的对象几乎已经移动了整个帧。您可以通过使物理在渲染之前保持 1 帧并在渲染器中线性插值对象位置来解决此问题。像这样的东西:

var t = dt/16.0;
framePosition = (1-t) * previousFramePositions + (t) * nextFramePositions;

即使渲染与物理模拟不同步，您的对象也能顺利移动。如果您有任何问题，请告诉我。

约翰