threejs-impl-post-processing
Installation
SKILL.md
threejs-impl-post-processing
Quick Reference
Architecture Overview
Three.js offers TWO incompatible post-processing systems. NEVER mix them.
| System | Package | Approach | Best For |
|---|---|---|---|
| Built-in EffectComposer | three/addons/postprocessing/ |
One shader pass per effect | Simple setups, custom ShaderPass |
| pmndrs/postprocessing | postprocessing (npm) |
Merges effects into single pass | Performance-critical, R3F apps |
| WebGPU PostProcessing | three/addons/tsl/display/ |
Node-based TSL graphs | WebGPU renderer only |
Standard Pipeline (Built-in EffectComposer)
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
Related skills