threejs-postprocessing

Add bloom using UnrealBloomPass with EffectComposer. Create the composer, add a RenderPass first, then add UnrealBloomPass with strength, radius, and threshold parameters. Call 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 before rendering the bloom pass. Restore original materials afterward and render the final scene over the bloom output.

FXAA is less expensive and works as a simple ShaderPass with a resolution uniform, making it suitable for most cases. SMAA produces higher quality edge smoothing but costs more performance and requires pixel-ratio-scaled dimensions.

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

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

Each pass adds a full-screen render, so multiple effects can strain mobile GPUs. Reduce render target resolution for blur passes, disable unused passes via the enabled flag, and conditionally skip expensive effects on mobile devices.