Limitare framerate in Three.js per aumentare le prestazioni, requestAnimationFrame?

Question

Stavo pensando che per alcuni progetti che faccio 60fps non è del tutto necessario. Ho pensato che avrei potuto avere più oggetti e cose che hanno funzionato a 30 fps se potessi farlo funzionare senza problemi in quel framerate. Ho pensato che se ho modificato lo spessore requestAnimationFrame interno della Three.js ho potuto limitarlo a 30 in questo modo. Ma mi chiedevo se esistesse un modo migliore per farlo usando three.js stesso come previsto. Inoltre, questo mi darà il tipo di aumento delle prestazioni che sto pensando. Sarò in grado di rendere il doppio degli oggetti a 30 fps come farò a 60? Conosco la differenza tra l'esecuzione delle cose a 30 e 60, ma riuscirò a farlo funzionare a una velocità costante di 30 fps?

Generalmente utilizzo WebGLRenderer e ricollego a Canvas se necessario, ad eccezione dei progetti destinati a uno specifico, e in genere quelli sono progetti Webgl shader.

Answer 1

Che dire qualcosa di simile:

function animate() { 

    setTimeout(function() { 

     requestAnimationFrame(animate); 

    }, 1000/30); 

    renderer.render(); 

} 

Answer 2

La quantità di lavoro la CPU e GPU deve fare dipendere dal carico di lavoro e impostare il limite superiore del framerate liscio.

• GPU funziona principalmente in modo lineare e può sempre inviare lo stesso numero di poligoni sullo schermo.

• Tuttavia, se si è raddoppiato il numero di oggetti CPU deve lavorare di più per animare questi tutti gli oggetti (matrice transformationsn e simili). Dipende dal modello del tuo mondo e da altri lavori. Javascript fa quanto altro overhead è dato. Anche le condizioni come il numero di visibili oggetti è importante.

Per i modelli semplici in cui tutti i poligoni sono sullo schermo sempre allora dovrebbe più o meno seguire la regola "metà del framerate, doppi gli oggetti". Per le scene di sparatutto 3D questo non è assolutamente il caso.

Answer 3

mi sono imbattuto in questo articolo che dà due modi per risolvere il problema di frame rate personalizzate.

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

penso che in questo modo è più robusto, in quanto avrà una velocità di animazione costante anche su computer che non rendono la tela costantemente a 60 fps. Di seguito è riportato un esempio

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