threejs-postprocessing

Add bloom in Three.js by creating an EffectComposer, adding a RenderPass for your scene, then adding 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 rendering the bloom composer pass. Restore original materials afterward and render the final scene over the bloom output.

FXAA is a cheaper ShaderPass that smooths edges with a resolution uniform, while SMAAPass produces higher-quality anti-aliasing at greater cost. Use FXAA for performance-constrained scenes and SMAA when visual quality matters more.

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 wrap it in a ShaderPass and add it to the composer. Update custom uniforms like time each frame through pass.uniforms.

Each composer pass adds a full-screen render, so multiple effects can strain mobile GPUs. Reduce bloom resolution, disable expensive passes on mobile via user-agent detection, and prefer FXAA over MSAA.