CODEWITHSUNDEEP
javascriptthree.jsrenderer
Nischal
Nischal

Reputation: 3

Optimize Three.JS render time for a static scene

I have a scene which contains 15-20 objects, 4 lights. And properties of my renderer are 

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

My render loop renders the scene every second.

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

The problem I am facing is this.renderer.render(this.scene, this.camera) is taking about 100 ms to render the scene but I want it to be below 33ms so that I can have frame rate of at least 30 fps.

Is there a way to optimize the renderer performance by any means (like changing any properties or something)?

I don't want to use worker.js as my scene is static and doesn't contain any complex calculations.

Upvotes: 0

Views: 1986

Answers (1)

WestLangley
WestLangley

Reputation: 104783

If you have a static scene, there is no reason to have an animation loop. You just have to render once after the scene -- and all your assets -- load.

That is why there are callbacks for the loader functions. And that is why there is a THREE.LoadingManager.

There are many possible use cases. Study the three.js examples to find solutions for your particular use case.

If you are using OrbitControls to control the camera, you can force a re-render whenever the camera moves, like so:

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

three.js r.75

Upvotes: 2

Related Questions