threejs-postprocessing

SKILL.md

Screen-space visual effects pipeline with bloom, depth-of-field, anti-aliasing, and custom shader composition.

EffectComposer chains multiple rendering passes (bloom, SSAO, DOF, film grain, vignette, color grading) in sequence, with each pass reading the previous output

Supports 15+ built-in effects including UnrealBloom, BokehPass (depth-of-field), FXAA/SMAA anti-aliasing, OutlinePass, and GlitchPass

Custom ShaderPass enables writing fragment shaders for effects like chromatic aberration, wave distortion, and color inversion

Selective bloom via layer masking applies glow only to tagged objects; multi-composer rendering combines separate effect chains for foreground and background layers

Performance-critical: each pass adds a full-screen render, so disable unused effects, reduce resolution for blur passes, and profile GPU usage on mobile

Three.js Post-Processing

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

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