Enhance 3D Renders with Post-Processing Effects

A reference for adding screen-space visual effects to a Three.js render pipeline via EffectComposer, which chains passes and is rendered with composer.render() instead of renderer.render(). It documents the setup pattern (a RenderPass first, additional effect passes after, resize handling via composer.setSize()) and a wide catalog of built-in passes: UnrealBloomPass for glow (with a selective-bloom pattern that masks non-glowing objects to a dark material before compositing), ShaderPass-wrapped FXAAShader and SMAAPass for anti-aliasing, SSAOPass for ambient occlusion (with Default/SSAO/Blur/Depth/Normal output modes), BokehPass for depth of field, FilmPass for film grain, VignetteShader, ColorCorrectionShader and GammaCorrectionShader, RenderPixelatedPass, GlitchPass, HalftonePass, and OutlinePass for selected-object outlines. It also shows writing a fully custom ShaderPass from a GLSL vertex/fragment shader pair (with worked examples for wave distortion, color inversion, and chromatic aberration), combining several passes in one composer (bloom, vignette, gamma correction, then FXAA last), rendering to an offscreen WebGLRenderTarget for reuse as a texture, and running multiple composers for separate background/foreground layers in one frame.

Use this when a task needs screen-space effects - bloom, depth of field, color grading, blur, or a custom pass - applied to the final rendered image, rather than base scene setup alone (that's threejs-fundamentals). Reach for threejs-shaders for custom shader development beyond a ShaderPass wrapper, and threejs-textures for render-target details. On the WebGPU renderer (Three.js r183), EffectComposer doesn't apply - it's WebGL-only - so post-processing there uses a node-based THREE.PostProcessing class with pass()/bloom()/dof() helpers from three/tsl and an outputNode instead of a pass chain.

import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";

const composer = new EffectComposer(renderer);

const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // strength
  0.4, // radius
  0.85, // threshold
);
composer.addPass(bloomPass);

function animate() {
  requestAnimationFrame(animate);
  composer.render(); // NOT renderer.render()
}

Input is a scene/camera pair plus a chosen chain of passes; output is the final composited frame drawn to the canvas by the last pass (renderToScreen = true by default). Performance guidance: limit the number of passes (each is a full-screen render), lower render-target resolution for blur-heavy passes, disable unused passes at runtime (pass.enabled = false), prefer FXAA over MSAA for cost, and gate expensive passes behind a mobile check.

Built on Three.js's postprocessing addons (EffectComposer, RenderPass, ShaderPass, and the named effect passes above) plus its shaders addons (FXAAShader, VignetteShader, ColorCorrectionShader, GammaCorrectionShader); on WebGPU, the equivalent lives in three/tsl's node-based effect functions used by THREE.PostProcessing.

Three.js developers adding final-image effects - glow, anti-aliasing, ambient occlusion, depth of field, color grading, or a custom GLSL pass - to an already-working scene, who need a working composer setup plus a catalog of the built-in passes to reach for.