postfx-effects

What problem does it solve?

This Skill enables you to apply cinematic post-processing effects to 3D scenes, saving time and elevating visual quality without manual shader work.

Core Features & Use Cases

• Chromatic Aberration, Vignette, Depth of Field, Noise, Color Grading, and LUTs to create filmic mood and cinematic polish.
• Use Case: Add atmospheric effects to a React Three Fiber scene to achieve a filmic look for space, architectural, or product visualizations.

Quick Start

Install the necessary packages and set up an EffectComposer around your scene, then apply the effects as shown in the example. Example usage: import { Canvas } from "@react-three/fiber"; import { EffectComposer, ChromaticAberration, Vignette, Noise } from "@react-three/postprocessing"; // ... in your component function SceneWithPostFX() { return ( <Canvas> <Scene /> <EffectComposer> <ChromaticAberration offset={[0.001, 0.001]} /> <Vignette darkness={0.5} offset={0.3} /> <Noise opacity={0.05} /> </EffectComposer> </Canvas> ); }