Performance of 3D Configurator

Questions
1

Working on a 3D Shop.

My PC ventilation runs like a hamster at speed. You might think a Harrier is starting.
But thats not only if i am interacting with the scene also when its still a freezed image.

Is there something i missed? Is there any great bug in the renderer settings or the render() function that can optimize performance?

//****************************
//		3D Renderer
//****************************    

const renderer = new THREE.WebGLRenderer( { alpha: true } );
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;

if (window.devicePixelRatio > 2){
	renderer.setPixelRatio(2);
} else {
	renderer.setPixelRatio(window.devicePixelRatio);
}

renderer.setClearColor( 0x000000, 0 );
renderer.antialias = true;
renderer.preserveDrawingBuffer = false;
renderer.powerPreference = "high-performance";
renderer.precision = "highp";
renderer.shadowMap.enabled = true;
renderer.shadowMap.autoUpdate = true;
renderer.shadowMap.needsUpdate = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMapSoft = true;




//****************************
//		Szene rendern/erstellen
//****************************

function animate() {
	requestAnimationFrame(animate);
	TWEEN.update();
}

function render() {
	raycaster.setFromCamera( mouse, camera );
	renderer.render(scene, camera);
	requestAnimationFrame(render);
	camera.lookAt( cameraTarget.position );
	composer.render();
	renderer.shadowMap.autoUpdate = false;
	renderer.shadowMap.needsUpdate = true;
}

render();
controls.update();
2

These may help?

3

It seems to me you perform the beauty pass twice. You call:

renderer.render(scene, camera);

and then call

composer.render();

a few lines later. That does not look right to me since your composer is configured with an instance of RenderPass. Try to use only composer.render();.

1 Like