Optimiser le temps de rendu Three.JS pour une scène statique

Question

J'ai une scène qui contient 15-20 objets, 4 lumières. Et les propriétés de mon moteur de rendu sont

function getRenderer(container, width, height) { 
    var renderer; 

    renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true, preserveDrawingBuffer: false }); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(width, height); 
    container.appendChild(renderer.domElement); 
    renderer.shadowMapEnabled = true; 
    renderer.shadowMapType = THREE.PCFSoftShadowMap; 
    renderer.setClearColor(new THREE.Color(0xCCE0FF), 1); 
    renderer.gammaInput = true; 
    renderer.gammaOutput = true; 
    renderer.clear(); 

    return renderer; 
} 

Ma boucle de rendu restitue la scène toutes les secondes.

function renderLoop() { 
    this.renderer.render(this.scene, this.camera); 
    setTimeout(function() { 
     renderLoop(); 
    }, 1000); 
} 

Le problème que je suis confronté est this.renderer.render(this.scene, this.camera) est de prendre environ 100 ms pour rendre la scène mais je veux que ce soit ci-dessous 33ms pour que je puisse avoir la fréquence d'images d'au moins 30 images par seconde.

Existe-t-il un moyen d'optimiser les performances du moteur de rendu par n'importe quel moyen (comme changer des propriétés ou quelque chose)?

Je ne veux pas utiliser worker.js car ma scène est statique et ne contient aucun calcul complexe.

Answer 1

Si vous avez une scène statique, il n'y a pas de raison d'avoir une boucle d'animation. Vous avez juste à rendre une fois après la scène - et tous vos biens - charger. C'est pourquoi il existe des rappels pour les fonctions du chargeur. C'est ce qui explique pourquoi il y a des rappels pour les fonctions du chargeur. Et c'est pourquoi il y a un THREE.LoadingManager.

Il existe de nombreux cas d'utilisation possibles. Étudiez les exemples de three.js pour trouver des solutions pour votre cas d'utilisation particulier.

Si vous utilisez OrbitControls pour contrôler la caméra, vous pouvez forcer une réengendrer chaque fois que la caméra se déplace, comme ceci:

controls = new THREE.OrbitControls(camera, renderer.domElement); 
controls.addEventListener('change', render); // use if there is no animation loop 

Three.js R.75