R3f Postprocessing
Wire bloom, depth-of-field, vignette, and custom screen-space effects into a React Three Fiber Canvas using @react-three/postprocessing.
Overview
r3f-postprocessing is an agent skill for the Build phase that adds @react-three/postprocessing effects—bloom, DOF, vignette, and custom screen-space shaders—to React Three Fiber scenes.
Install
npx skills add https://github.com/enzed/r3f-skills --skill r3f-postprocessingWhat is this skill?
- Quick-start Canvas with EffectComposer, Bloom, and Vignette on emissive materials
- Documents EffectComposer toggles: enabled, depthBuffer, stencilBuffer, autoClear, multisampling
- Install pair: @react-three/postprocessing plus postprocessing npm packages
- Covers luminanceThreshold, intensity, and vignette offset/darkness tuning
- Oriented toward glow, blur, color grading, and custom screen-space shaders
Adoption & trust: 695 installs on skills.sh; 89 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a working R3F scene but no reliable recipe for EffectComposer, effect props, or npm deps when you want glow, blur, or color grading.
Who is it for?
Solo builders adding polish to Three.js/React sites, landing-page 3D heroes, or small WebGL games already on @react-three/fiber.
Skip if: Teams that need a full rendering pipeline audit, native mobile 3D, or backend-only APIs with no Canvas.
When should I use this skill?
Adding visual effects, color grading, blur, glow, or creating custom screen-space shaders in React Three Fiber.
What do I get? / Deliverables
You get install commands, a working EffectComposer block inside Canvas, and tunable defaults for common screen-space effects you can extend with custom passes.
- EffectComposer TSX snippet with chosen effects
- Documented npm install command
- Tuned effect prop defaults for bloom and vignette
Recommended Skills
Journey fit
How it compares
Use for R3F-specific post-processing recipes instead of generic Three.js shader blogs that omit React component lifecycle.
Common Questions / FAQ
Who is r3f-postprocessing for?
Indie and solo frontend builders using React Three Fiber who want documented post-processing stacks without reading every effect’s source.
When should I use r3f-postprocessing?
During Build frontend work when adding bloom, vignette, DOF, blur, glow, or custom screen-space shaders to an existing Canvas scene.
Is r3f-postprocessing safe to install?
Review the Security Audits panel on this Prism page and inspect the skill package before letting an agent run shell or npm install commands in your repo.
SKILL.md
READMESKILL.md - R3f Postprocessing
# React Three Fiber Post-Processing ## Quick Start ```tsx import { Canvas } from '@react-three/fiber' import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing' function Scene() { return ( <Canvas> <ambientLight /> <mesh> <boxGeometry /> <meshStandardMaterial color="hotpink" emissive="hotpink" emissiveIntensity={2} /> </mesh> <EffectComposer> <Bloom luminanceThreshold={0.5} luminanceSmoothing={0.9} intensity={1.5} /> <Vignette offset={0.5} darkness={0.5} /> </EffectComposer> </Canvas> ) } ``` ## Installation ```bash npm install @react-three/postprocessing postprocessing ``` ## EffectComposer The container for all post-processing effects. ```tsx import { EffectComposer } from '@react-three/postprocessing' function Scene() { return ( <Canvas> {/* Scene content */} <mesh>...</mesh> {/* Post-processing - must be inside Canvas, after scene content */} <EffectComposer enabled={true} // Toggle all effects depthBuffer={true} // Enable depth buffer stencilBuffer={false} // Enable stencil buffer autoClear={true} // Auto clear before render multisampling={8} // MSAA samples (0 to disable) > {/* Effects go here */} </EffectComposer> </Canvas> ) } ``` ## Common Effects ### Bloom (Glow) ```tsx import { EffectComposer, Bloom } from '@react-three/postprocessing' import { BlendFunction } from 'postprocessing' <EffectComposer> <Bloom intensity={1.0} // Bloom intensity luminanceThreshold={0.9} // Brightness threshold luminanceSmoothing={0.025} // Smoothness of threshold mipmapBlur={true} // Enable mipmap blur radius={0.8} // Bloom radius levels={8} // Mipmap levels blendFunction={BlendFunction.ADD} /> </EffectComposer> // For objects to glow, use emissive materials <mesh> <boxGeometry /> <meshStandardMaterial color="black" emissive="#ff00ff" emissiveIntensity={2} toneMapped={false} // Important for values > 1 /> </mesh> ``` ### Selective Bloom ```tsx import { EffectComposer, Bloom, Selection, Select } from '@react-three/postprocessing' function Scene() { return ( <Canvas> <Selection> <EffectComposer> <Bloom luminanceThreshold={0} intensity={2} mipmapBlur /> </EffectComposer> {/* This mesh will bloom */} <Select enabled> <mesh> <sphereGeometry /> <meshStandardMaterial emissive="red" emissiveIntensity={2} toneMapped={false} /> </mesh> </Select> {/* This mesh will NOT bloom */} <mesh position={[2, 0, 0]}> <boxGeometry /> <meshStandardMaterial color="blue" /> </mesh> </Selection> </Canvas> ) } ``` ### Depth of Field ```tsx import { EffectComposer, DepthOfField } from '@react-three/postprocessing' <EffectComposer> <DepthOfField focusDistance={0} // Focus distance (0 = auto) focalLength={0.02} // Camera focal length bokehScale={2} // Bokeh size height={480} // Resolution height /> </EffectComposer> // With target object import { useRef } from 'react' function Scene() { const targetRef = useRef() return ( <> <mesh ref={targetRef} position={[0, 0, -5]}> <boxGeometry /> <meshStandardMaterial color="red" /> </mesh> <EffectComposer> <DepthOfField target={targetRef} focalLength={0.02} bokehScale={2} /> </EffectComposer>