threejs-postprocessing

Add bloom by creating an EffectComposer, adding a RenderPass for your scene, then appending an UnrealBloomPass with strength, radius, and threshold parameters. Render with composer.render() instead of renderer.render() in your animation loop.

Use selective bloom by assigning glowing objects to a dedicated layer, then darken non-blooming meshes with a black material during the bloom pass and restore materials afterward. Render the final scene over the bloom output.

FXAA is cheaper and works as a single ShaderPass with a resolution uniform, making it suitable for performance-constrained scenes. SMAA produces higher-quality edge smoothing via SMAAPass but costs more GPU time.

The most common cause is still calling renderer.render() instead of composer.render() in the animation loop. Also verify the last pass renders to screen and that composer.setSize() is called on window resize.

Define a shader object with a tDiffuse uniform, vertex shader, and fragment shader, then wrap it in a ShaderPass and add it to the composer. Update custom uniforms like time each frame in the animation loop.

Call composer.setSize(width, height) alongside renderer.setSize() in your resize handler. Also update pass-specific uniforms such as the FXAA resolution uniform and the bloom pass resolution.