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 all non-bloomed 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 through pass.uniforms.

Each pass adds a full-screen render, so multiple effects can strain mobile GPUs. Reduce bloom resolution, disable expensive passes on mobile devices, and prefer FXAA over MSAA to limit the performance cost.