javascript - stop - Limitar la velocidad de fotogramas en Three.js para aumentar el rendimiento, requestAnimationFrame?

stop request animation frame

Question

Pensé 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 hacer que funcionara sin problemas a esa velocidad de cuadros. Pensé que si editaba el calzo requestAnimationFrame dentro de three.js podría limitarlo a 30 de esa manera. Pero me preguntaba si había una mejor manera de hacerlo utilizando three.js en sí, según lo previsto. 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 cosas a los 30 y 60, pero ¿podré lograr que funcione a una velocidad constante de 30 fps?

Generalmente uso el WebGLRenderer, y vuelvo a Canvas si es necesario, excepto para los proyectos que están dirigidos específicamente a uno, y generalmente esos son proyectos webgl shader.

Answer 1

¿Qué tal algo como esto?

function animate() {
setTimeout( function() {
requestAnimationFrame( animate );
}, 1000 / 30 );
renderer.render();
}

Answer 2

Este enfoque también podría funcionar, utilizando el TRES. Reloj para medir el delta.

let clock = new THREE.Clock();
let delta = 0;
// 30 fps
let interval = 1 / 30;
function update() {
requestAnimationFrame(update);
delta += clock.getDelta();
if (delta > interval) {
// The draw or time dependent code are here
render();
delta = delta % interval;
}
}

Answer 3

La cantidad de trabajo que su CPU y GPU necesita hacer depende de la carga de trabajo y establecen el límite superior de la tasa de cuadros sin problemas.

• La GPU funciona en su mayoría de forma lineal y siempre puede expulsar la misma cantidad de polígonos a la pantalla.

• Sin embargo, si ha duplicado el número de objetos, la CPU debe trabajar más para animar todos estos objetos (transformaciones de matriz y similares). Depende de su modelo mundial y de otro trabajo. Javascript hace la cantidad de sobrecarga adicional que se le otorga. También las condiciones como el número de objetos visibles es importante.

Para los modelos simples donde todos los polígonos están en la pantalla, siempre deben seguir la regla "la mitad de la velocidad de fotogramas, el doble de objetos". Para escenas de disparos en 3D, este definitivamente no es el caso.

Answer 4

Me encontré con este artículo que ofrece dos formas de resolver el problema de la velocidad de fotogramas personalizada.

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

Creo que esta forma es más robusta, ya que tendrá una velocidad de animación constante incluso en computadoras que no renderizan el lienzo de manera constante 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();
}