Bad fps with postprocess

Questions
1

hello,
I’m new to three.js and still have a lot of trouble building something that works smoothly.
I tried to apply grain in my tests but since then the fps have come down to one frame per second. What should I do to improve this?
I placed a link to my test.
three.js webgl - lights - rect area light with postprocessing
three.js webgl - lights - rect area light without postprocessing

1 Like
2

Can you please share how (and maybe in which place in the code) you’re adding the postprocessing? Postprocessing does lower the framerate a little, but certainly shouldn’t lower it that much. :sweat_smile:

3

yes of course i can share the code : )
the code is here : http://pierredebroux.be/file/src/index.js

i apply it at the end of the init function :

//renderer

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputEncoding = THREE.sRGBEncoding;

///composer

composer = new EffectComposer( renderer );
document.body.appendChild( renderer.domElement );

///filtre

const renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );

const filmPass = new FilmPass( 0.35, 0.025, 648, false );
composer.addPass(filmPass);

and at he end of the javascript :

function animate() {
renderer.render( scene, camera );
composer.render();
requestAnimationFrame( animate );

}

4

You shouldn’t call render for both the Renderer and EffectComposer. You can see for example here how to properly set up and use the composer (you can ignore the glitch pass etc, just the composer part.)

2 Likes
5

well, that was the problem :slight_smile: now that work fine. Seems obvious now … Many thanks