草庐IT

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

coder 2025-03-18 原文

我将 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) 假设 dttime_step 小 1 毫秒。然后,世界不会更新那一次。现在已完成插值并找到大致位置(比应有的位置晚 1 毫秒)。

假设下一次 dttime_step 之间没有区别。

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

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

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

我请求你澄清这些问题。

[编辑]

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

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

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

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

最佳答案

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

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;

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

约翰

关于javascript - requestAnimFrame 无法提供恒定的帧速率,但我的物理引擎需要它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13036976/

有关javascript - requestAnimFrame 无法提供恒定的帧速率,但我的物理引擎需要它的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

  3. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  4. ruby-on-rails - 无法在centos上安装therubyracer(V8和GCC出错) - 2

    我正在尝试在我的centos服务器上安装therubyracer,但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e

  5. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙,试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上,从现在开始,您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  6. ruby - 无法覆盖 irb 中的 to_s - 2

    我在pry中定义了一个函数:to_s,但我无法调用它。这个方法去哪里了,怎么调用?pry(main)>defto_spry(main)*'hello'pry(main)*endpry(main)>to_s=>"main"我的ruby版本是2.1.2看了一些答案和搜索后,我认为我得到了正确的答案:这个方法用在什么地方?在irb或pry中定义方法时,会转到Object.instance_methods[1]pry(main)>defto_s[1]pry(main)*'hello'[1]pry(main)*end=>:to_s[2]pry(main)>defhello[2]pry(main)

  7. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例,但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗? 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055),我们在StackOverflow上找到一个类

  8. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  9. ruby-on-rails - 无法让 rspec、spork 和调试器正常运行 - 2

    GivenIamadumbprogrammerandIamusingrspecandIamusingsporkandIwanttodebug...mmm...let'ssaaay,aspecforPhone.那么,我应该把“require'ruby-debug'”行放在哪里,以便在phone_spec.rb的特定点停止处理?(我所要求的只是一个大而粗的箭头,即使是一个有挑战性的程序员也能看到:-3)我已经尝试了很多位置,除非我没有正确测试它们,否则会发生一些奇怪的事情:在spec_helper.rb中的以下位置:require'rubygems'require'spork'

  10. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

随机推荐