Agent skill · design visual · cloudai-x
threejs-postprocessing
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
Why this skill is useful
Provides specific implementation patterns and configurations for Three.js post-processing effects that the AI wouldn't reliably generate on its own.
What it needs
Requires three installed locally. About 6k tokens when loaded. Last updated 2026-07-09. 2,926 stars on the source repository.
What this skill does
Three.js Post-Processing Quick Start EffectComposer Setup Common Effects Bloom (Glow) Selective Bloom Apply bloom only to specific objects. FXAA (Anti-Aliasing) SMAA (Better Anti-Aliasing) SSAO (Ambient Occlusion) Depth of Field (DOF) Film Grain Vignette Color Correction Gamma Correction Pixelation Glitch Effect Halftone Outline Custom ShaderPass Create your own post-processing effects. Invert Colors Shader Chromatic Aberration Combining Multiple Effects Render to Texture Multi-Pass Rendering WebGPU Post-Processing (Three.js r150+) Performance Tips 1. Limit passes: Each pass adds a full-screen render 2. Lower resolution: Use smaller render targets for blur passes 3. Disable unused effects: Toggle passes on/off 4. Use FXAA over MSAA: Less expensive anti-aliasing 5. Profile with DevTools: Check GPU usage Handle Resize See Also threejs-shaders - Custom shader development threejs-textures - Render targets threejs-fundamentals - Renderer setup
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills cloudai-x/threejs-postprocessing