Performansı artırmak için Three.js'de framerate'yi sınırlayın, requestAnimationFrame?

Question

Bazı projeler için 60 fps yapmanın tamamen gerekli olmadığını düşünüyordum. Bu çerçevede düzgün bir şekilde çalışabilseydim, 30 fps'de koşan daha fazla nesne ve şeyler bulabileceğimi düşündüm. Ben three.js içinde requestAnimationFrame shim düzenlenmiş olsaydı ben bu şekilde 30 sınırlandırabileceğini düşündüm. Ama ben üç.js kendisini kullanarak sağlanan bunu yapmak için daha iyi bir yolu olup olmadığını merak ediyordum. Ayrıca, bu bana düşündüğüm bir performans artışı verecek. 60 saniyede yapacağım gibi 30fps'de iki kat fazla nesne oluşturabilecek miyim? 30 ile 60 arasında koşan şeyler arasındaki farkı biliyorum, ancak düzgün bir sabit 30 fps ile çalışmasını sağlayabilecek miyim?

Genelde WebGLRenderer'ı kullanırım ve özel olarak hedefleyen projeler ve özellikle de webgl shader projeleri olan projeler dışında Canvas'a geri giderim.

Answer 1

Ne böyle bir şey hakkında:

function animate() { 

    setTimeout(function() { 

     requestAnimationFrame(animate); 

    }, 1000/30); 

    renderer.render(); 

} 

Answer 2

CPU ve GPU'nuzun yapması gereken iş miktarı, iş yüküne bağlıdır ve düzgün çerçevenin üst sınırını belirler.

• GPU çoğunlukla doğrusal olarak çalışır ve her zaman ekrana aynı sayıda çokgen çıkartabilir. Bununla birlikte, eğer nesne sayısını ikiye katladıysanız, CPU bu nesneleri tüm nesnelleri canlandırmak için daha fazla çalışmalıdır (matris dönüştürmeleri vb.). Bu sizin dünya modelinize ve diğer çalışmalarınıza bağlıdır. Javascript, fazladan ek yükün ne kadar olduğunu gösterir. Ayrıca görünen nesnelerinin sayısı gibi koşullar önemlidir. Tüm çokgenler hep o zaman hemen hemen kural "yarım kare hızına, çift nesneleri" takip etmelidir ekranda olan basit modelleri için

. 3D shooter sahneleri gibi bu kesinlikle durum böyle değil.

Answer 3

Ben özel kare hızı sorunu çözmek için iki yol sunar bu makale geldi.

http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/

ben bile 60 fps sürekli tuval hale olmayan bilgisayarlarda sabit animasyon hızını olacak şekilde bu şekilde, daha sağlam olduğunu düşünüyorum. Aşağıda bir örnek

var now,delta,then = Date.now(); 
var interval = 1000/30; 

function animate() { 
    requestAnimationFrame (animate); 
    now = Date.now(); 
    delta = now - then; 
    //update time dependent animations here at 30 fps 
    if (delta > interval) { 
     sphereMesh.quaternion.multiplyQuaternions(autoRotationQuaternion, sphereMesh.quaternion); 
     then = now - (delta % interval); 
    } 
    render(); 
}