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

Stavo pensando che, per alcuni progetti, faccio 60fps non è assolutamente necessario. Ho pensato che avrei potuto più oggetti e le cose che girava a 30fps se io sono riuscito a farlo funzionare senza problemi a quel framerate. Ho pensato che se ho modificato il requestAnimationFrame spessore all’interno di three.js potrei limitare a 30 in quel modo. Ma mi chiedevo se c’era un modo migliore per fare questo utilizzando three.js di per sé, come previsto. Inoltre, questo dammi il tipo di incremento di prestazioni penso. Sarò in grado di eseguire il rendering di due volte come molti oggetti a 30fps come farò a 60? So che la differenza tra l’esecuzione di cose a 30 e 60, ma sarò in grado di farlo funzionare in un liscio costante 30fps?

Di solito io uso il WebGLRenderer, e caduta su Tela, se necessario, tranne per i progetti che stanno prendendo di mira uno in particolare, e in genere coloro che sono webgl shader progetti.

InformationsquelleAutor Cory Gross | 2012-07-01

 

4 Replies
  1. 52

    Che dire qualcosa di simile a questo:

    function animate() {
    
        setTimeout( function() {
    
            requestAnimationFrame( animate );
    
        }, 1000 / 30 );
    
        renderer.render();
    
    }
    • Ti amo @mrdoob
    • Non posso cominciare a dire quanto sia utile questo è diventato per me. Grazie mrdoob dal passato, da il me del futuro.
  2. 6

    La quantità di lavoro che la CPU e la GPU deve fare dipendono dal carico di lavoro e impostare il limite superiore della liscia framerate.

    • GPU lavora per lo più in modo lineare e può sempre spingere fuori lo stesso numero di poligoni a schermo.

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

    Per modelli semplici in cui tutti i poligoni sullo schermo sempre, allora si dovrebbe praticamente seguire la regola “metà del framerate, il doppio di oggetti”. Per il 3D shooter come scene non è sicuramente questo il caso.

  3. 4

    Mi sono imbattuto in questo articolo che dà due modi per risolvere il custom frame rate problema.

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

    Penso che in questo modo è più robusto, in quanto sarà una costante di velocità di animazione anche su computer che non rendono la tela costantemente a 60 fps. Qui di seguito è 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();
    }
    • * Soluzione migliore
  4. 4

    Questo approccio potrebbe anche funzionare, utilizzando i TRE.Orologio per misurare il 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;
       }
    }

Lascia un commento