threejs-impl-post-processing

Add bloom by creating an EffectComposer with a RenderPass first, then an UnrealBloomPass with strength, radius, and threshold parameters, and an OutputPass last. Enable tone mapping such as ACESFilmicToneMapping on the renderer so HDR values above 1.0 trigger the glow.

RenderPass must be first to render the scene into the buffer, effect passes like bloom or SSAO go in the middle, anti-aliasing passes like SMAA or FXAA go after effects, and OutputPass must be last for tone mapping and color space conversion.

Use the built-in EffectComposer for simple setups and custom ShaderPass effects, and pmndrs/postprocessing for performance-critical or React Three Fiber apps since it merges effects into a single pass. Never mix the two libraries because their buffer formats are incompatible.

Bloom appears faint or invisible when tone mapping is disabled, because HDR values above 1.0 get clamped before bloom detects them. Set renderer.toneMapping to ACESFilmicToneMapping and raise emissiveIntensity above 1.0 on materials that should glow.

Blurry or misaligned effects occur when only the renderer is resized but the EffectComposer is not. The composer keeps internal render targets at the old resolution, so always call composer.setSize(width, height) alongside renderer.setSize in the resize handler.

No, the built-in EffectComposer passes only work with WebGLRenderer. The WebGPU renderer requires the separate node-based PostProcessing class from three/addons/tsl/display, which uses TSL shader graphs instead of GLSL passes.