Three.js Post-Processing

Work Pattern

• Start with RenderPass plus one effect, then add passes in visual order and measure cost before stacking more.
• Keep composer size, pixel ratio, camera, render targets, and all passes synchronized on resize.
• Prefer selective or masked effects when only a few objects need bloom/outline treatment.
• Pair with threejs-shaders for custom passes, threejs-lighting for bloom sources, and threejs-textures for render target workflows.

Quick Start

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";

// Setup composer
const composer = new EffectComposer(renderer);