Bad fps with postprocess

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

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:

yes of course i can share the code : )
the code is here :

i apply it at the end of the init function :


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 = new EffectComposer( renderer );
document.body.appendChild( renderer.domElement );


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

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

and at he end of the javascript :

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


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.)

1 Like

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