threejs-postprocessing

Add bloom in Three.js 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 all non-blooming meshes with a black material before 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 most cases. SMAA produces higher-quality edges but costs more; use SMAAPass when visual quality matters more than performance.

The most common cause is still calling renderer.render() instead of composer.render() in the animation loop. Also verify the RenderPass is added first in the chain 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 via pass.uniforms.

Limit the number of passes since each adds a full-screen render, use half-resolution render targets for bloom, prefer FXAA over MSAA, and disable expensive passes on mobile devices by toggling pass.enabled.