postfx-effects_skill

Overview

This skill provides a collection of post-processing visual effects for three.js/react-three-fiber projects, including chromatic aberration, vignette, depth of field, film grain, color grading, LUT support, tone mapping, and stylized scanline/God Rays. It’s designed to add cinematic polish, retro aesthetics, camera simulation, and atmospheric mood to 3D scenes. The effects are modular and composable so you can build stacks for specific looks or animate parameters at runtime.

How this skill works

Effects are applied via an EffectComposer that sequences shader passes and lookup textures. Each effect exposes configurable parameters (e.g., offset, darkness, focusDistance, bokehScale, opacity, LUT texture) that you can tweak or drive from animation, audio, or scene state. LUTs and ToneMapping provide filmic color transforms while Noise, Scanline, and ChromaticAberration deliver vintage or glitch styles. Performance-sensitive options like reducing DOF resolution, limiting multisampling, and ordering passes are supported.

When to use it

• Add cinematic framing and focus with vignette, DOF, and tone mapping.
• Create retro or analog looks using scanlines, film grain, and chromatic aberration.
• Apply color grading or LUTs to unify scene mood or mimic camera profiles.
• Animate color or aberration for dream sequences, audio-reactive visuals, or UI feedback.
• Optimize render fidelity versus cost in performance-critical or low-end devices.

Best practices

• Compose effects in an EffectComposer and minimize redundant blur passes to reduce GPU cost.
• Use lower DOF height or bokeh resolution for real-time use; increase only for renders.
• Preload and cache LUT textures to avoid runtime stalls when applying LookupTable grading.
• Order passes thoughtfully: tone mapping and color grading typically before stylistic overlays like grain or scanlines.
• Drive expensive animations (bloom/DOF) sparingly and consider LOD-based toggles for distant cameras.

Example use cases

• Cinematic stack for game cutscenes: ACES tone mapping, subtle desaturation, vignette, and noise.
• Retro VHS aesthetic: heavy chromatic aberration, scanlines, boosted contrast, and grain.
• Dream or flashback: shallow DOF, bloom, saturated hue shift, and vignette.
• Audio-reactive visualizer: animate chromatic shift and vignette darkness from live audio FFT.
• Volumetric light scene: God Rays combined with bloom and warm color grading for sunrise/sunset.