如何解決不同瀏覽器的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？

回答

相關問題