Back to Docs

R3F Post‑Processing

Apply screen‑space effects to your React Three Fiber scene using the EffectComposer from @react-three/postprocessing.

Installation

npm install @react-three/postprocessing

Basic Setup

Wrap your scene with EffectComposer and chain passes inside it.

import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing'

function Scene() {
  return (
    <>
      <mesh>...</mesh>
      <EffectComposer>
        <Bloom luminanceThreshold={0.3} intensity={1.2} />
        <Vignette darkness={0.5} />
      </EffectComposer>
    </>
  )
}

Available Passes

Bloom

Glow around bright areas

Vignette

Darkened edges

Noise

Film grain overlay

ChromaticAberration

RGB shift at edges

DepthOfField

Bokeh blur by distance

ToneMapping

HDR to LDR conversion

Performance

  • Set multisampling=0 on the renderer when using post‑processing.
  • Disable unused passes — each one adds a full‑screen quad draw.
  • Use resolutionScale to render effects at a fraction of the viewport.
← All RecipesShader Recipes →