Limitación de la tasa de cuadros en Three.js para aumentar el rendimiento, requestAnimationFrame?

Question

Estaba pensando que para algunos proyectos que hago 60fps no es totalmente necesario. Pensé que podría tener más objetos y cosas que funcionaran a 30 fps si pudiera hacerlo funcionar sin problemas a esa velocidad de fotogramas. Pensé que si editaba el requestAnimationFrame shim dentro de three.js podría limitarlo a 30 de esa manera. Pero me preguntaba si había una mejor manera de hacerlo utilizando el propio three.js tal como se proporciona. Además, esto me dará el tipo de aumento de rendimiento que estoy pensando. ¿Podré renderizar el doble de objetos a 30 fps que a 60? Sé la diferencia entre correr a 30 y 60, pero ¿podré hacer que funcione a una constante constante de 30 fps?

Generalmente utilizo WebGLRenderer, y recurro a Canvas si es necesario, excepto para los proyectos que se dirigen específicamente a uno, y normalmente esos son proyectos de sombreado webgl.

Answer 1

¿Qué pasa algo como esto:

function animate() { 

    setTimeout(function() { 

     requestAnimationFrame(animate); 

    }, 1000/30); 

    renderer.render(); 

} 

Answer 2

La cantidad de trabajo que su CPU y GPU deben hacer depende de la carga de trabajo y establecen el límite superior de la velocidad de fotogramas sin problemas.

• GPU funciona principalmente de forma lineal y siempre puede extraer el mismo recuento de polígonos a la pantalla.

• Sin embargo, si ha duplicado el número de objetos, la CPU debe trabajar más para animar estos objetos (transformación de matriz y demás). Depende de su modelo de mundo y de otros trabajos. Javascript determina la cantidad de sobrecarga adicional que se le da. También son importantes las condiciones como el número de objetos visibles.

Para los modelos simples en todos los polígonos están en la pantalla siempre entonces debería seguir más o menos la regla de "la mitad de la velocidad de fotogramas, el doble de los objetos". Para las escenas 3D Shooter como este definitivamente no es el caso.

Answer 3

me encontré con este artículo que da dos formas de resolver el problema de velocidad de cuadro personalizado.

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

creo que de esta manera es más robusta, ya que tendrá una velocidad de la animación constante, incluso en equipos que no hagan al lienzo consistentemente a 60 fps. A continuación se muestra un ejemplo

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(); 
}