如何解决不同浏览器的requestAnimationFrame中的不同FPS？

如何在不同的浏览器上解决中的不同FPS？
我正在制作一款使用THREE.js的3D游戏，它使用了，它的速度很快，在Google Chrome 15。
但是，它真的很慢Firefox 6，真的很慢（比Firefox慢）IE9。
这真的是一个大问题，我想知道是否有解决方案。如何解决不同浏览器的requestAnimationFrame中的不同FPS？

谢谢。

来源

2011-10-06 Derek 朕會功夫

解决此问题的方法是使回调中运行的任何代码快速运行。如何做到这一点是不可能说没有看到代码... –

据我所知，没有办法真正解决这个问题，除了让你的代码更少资源密集。 Chrome浏览器似乎是最快的浏览器，但通常FF并不是遥不可及，但IE仍然很慢。取决于渲染方法，canvas，svg或webGL，它也非常依赖于本地硬件，因为它使用客户端来处理大多数事情，复杂的webGL渲染需要强大的GPU来实现良好的帧率。

有些方法可以实时测量帧率，并相应地更改动画。
这是一个非常简单的例子，可以测量帧速率。

function step(timestamp) { 
 
    var time2 = new Date; 
 
    var fps = 1000/(time2 - time); 
 
    time = time2; 
 
\t 
 
    document.getElementById('test').innerHTML = fps; 
 
    window.requestAnimationFrame(step); 
 
} 
 

 
var time = new Date(), i = 0; 
 
window.requestAnimationFrame(step);

<div id="test"></div>

这仅仅是一个即时的措施，这不是准确的，你可能想要的东西，在衡量一段时间内获得正在使用的浏览器更正确的帧率。

还要注意timestamp参数，其中是高分辨率时间戳，最小精度为1毫秒，也可用于确定动画速度和任何浏览器滞后。

来源

2011-10-07 00:54:43 adeneo

IE9 +实际上是非常快。根据我的经验，有时候比FF快。 – kangax

常见的做法是创建一个deltaTime（dt）变量，然后将其用作每个动画/更新周期的参数。

代码仅用于可视化问题/解决方案。

// ... 
timer: function(){ 
    var now = new Date().getTime(); // get current time 
    this.controls.dt = now - this.controls.time; // calculate time since last call 
    this.controls.time = now; // update the current application time 
    this.controls.frame++; // also we have a new frame 
    return this.controls.dt ; 
}

为到渲染功能，任何调用时，传递DT

// we call the update function with every request frame 
update: function(){ 
    var dt = this.timer(); 
    _.each(this.activeViews, function(item){ item.update(dt); }); // this is underscore.js syntax 
}

item.update（DT）看起来像

//... 
var x = this.position.get(x); 
x = x + (10*dt); // meaning: x increases 10 units every ms. 
this.position.x = x;

来源

2011-10-17 01:02:08 Mirko

在某些浏览器requestAnimationFrame工作方式类似

setTimeout(callback, 1000/(16 + N)

其中N是您的代码执行所需的时间。这意味着它以62Hz的频率覆盖你的FPS，但是如果你的代码运行速度很慢，它将会以更低的方式加以限制。它基本上试图在每个差距之间留出16毫秒的差距。当然，对于所有的浏览器来说都不是这样，并且在将来可能会改变，但它仍然可以让你知道它是如何工作的。

即使它在每个浏览器中都是相同的，但影响代码性能的因素很多等等。您永远无法确定您的代码将以恒定频率运行。

来源

2012-03-01 06:31:47 Pijusn

Crafty框架做了一些有点不同的事情，但可能适用于某些情况 - 每次抽奖的游戏滴答数不是恒定的。相反，它会注意到帧速率落后于某个理想目标，并且会在执行绘制步骤之前在多个游戏节拍中循环。你可以在github上看到step function。

只要游戏能够顺利运行，这个效果很好。但是如果你尝试更多的处理器密集型产品，它可能会加剧这种情况，因为它会优先考虑游戏逻辑而不是动画。

在任何情况下，只有当游戏逻辑和渲染逻辑有些分离时，它才会起作用。（如果它们完全是已解耦，则可能可以将它们置于完全独立的循环中。）

来源

2012-12-28 21:14:08 starwed

如何解决不同浏览器的requestAnimationFrame中的不同FPS？

回答

相关问题