优化静态场景的Three.JS渲染时间

Optimize Three.JS render time for a static scene

本文关键字：JS 时间 Three 静态 优化      更新时间：2023-09-26

我有一个包含15-20个对象和4个灯光的场景。我的渲染器的属性是

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

我的渲染循环每秒渲染一次场景。

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

我面临的问题是this.renderer.render(this.scene, this.camera)渲染场景大约需要100毫秒，但我希望它低于33毫秒，这样我就可以拥有至少30帧/秒的帧速率。

有没有一种方法可以通过任何方式优化渲染器性能（比如更改任何属性或其他什么）？

我不想使用worker.js，因为我的场景是静态的，不包含任何复杂的计算。

如果有一个静态场景，就没有理由有动画循环。只需在场景和所有资源加载后渲染一次即可。

这就是为什么存在对加载器函数的回调。这就是为什么存在CCD_ 2。

有许多可能的用例。研究三个.js示例，为您的特定用例找到解决方案。

如果使用OrbitControls来控制相机，则可以在相机移动时强制重新渲染，如下所示：

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

three.js r.75

相关文章：