Add post-processing to an R3F scene

Post-processing is what turns a flat render into a premium one — but every pass costs frame time. Add intentionally and keep a performance budget.

Step 1 — Install

npm i @react-three/postprocessing postprocessing

Step 2 — Add the EffectComposer

Inside <Canvas> (after the scene content), add:

import {
  EffectComposer, Bloom, DepthOfField, Vignette,
  Noise, ChromaticAberration, ToneMapping, SMAA,
} from '@react-three/postprocessing'
import { BlendFunction, ToneMappingMode } from 'postprocessing'