threejs-postprocessing

Add bloom with UnrealBloomPass inside an EffectComposer chain. Create the composer, add a RenderPass first, then add UnrealBloomPass with strength, radius, and threshold parameters, and call composer.render() instead of renderer.render() in the animation loop.

Selective bloom uses THREE.Layers to mark glowing objects, then darkens non-blooming meshes with a black material before rendering the bloom pass. After the composer renders, restore the original materials and render the final scene on top.

FXAA is cheaper and applied as a ShaderPass with a resolution uniform, making it suitable for most cases. SMAA produces higher-quality edges via SMAAPass but costs more; both should be placed last in the composer chain before output.

The most common cause is still calling renderer.render() instead of composer.render() in the animation loop. Also verify the first pass is a RenderPass and that composer.setSize() is called on window resize alongside camera updates.

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

On resize, update the camera aspect, call renderer.setSize and composer.setSize, then refresh pass-specific uniforms such as the FXAA resolution value and bloom pass resolution. Skipping these updates causes stretched or misaligned effects.