# React Postprocessing

> Screen effects as React components: bloom, depth of field, noise and vignette

Worth exploring: Stack bloom, depth of field, noise and vignette as JSX children of one EffectComposer

Why it works: Nested effects merge into one pass, so a filmic look from bloom and depth of field costs less to draw than separate passes.

Watch out: Keep the stack short. Its README says it is not yet meant for complex orchestration, so pick another tool for a custom pipeline.

- Category: 3D & WebGL (`three`)
- Tags: `open-source`, `free`, `react`, `webgl`
- Official: https://github.com/pmndrs/react-postprocessing
- Wunderlust: https://wunderlust.xyz/r/react-postprocessing
- Image: https://wunderlust.xyz/media/react-postprocessing-poster.jpg
- Video preview: https://wunderlust.xyz/media/react-postprocessing.webm
- Added: 2026-11-12

## What it is

A wrapper for the postprocessing library in react-three-fiber. An EffectComposer inside the Canvas takes nested effects with props, and they merge into a single render pass to cost less.

## What it’s for

For someone with a Three.js scene in React who wants a filmic look in a few lines of JSX.

## Benefits

- Nested effects as JSX inside one EffectComposer
- Merged into a single EffectPass to cut render operations
- WebGL2 MSAA by default and gamma correction

## Caveats

- The README says it is not yet meant for complex orchestration of effects.
- Needs React and @react-three/fiber, and the README example shows only four effects.

## Similar on Wunderlust

- [React Three Fiber](https://wunderlust.xyz/r/react-three-fiber.md): React renderer for Three.js: 3D scenes as JSX components
- [React Three Rapier](https://wunderlust.xyz/r/react-three-rapier.md): Rapier physics for react-three-fiber scenes: wrap the mesh and it falls and collides
- [multipleWindow3dScene](https://wunderlust.xyz/r/multiple-window-3d-scene.md): A three.js scene synced across several browser windows with only localStorage
- [Three.js](https://wunderlust.xyz/r/three-js.md): JavaScript library for 3D graphics on the web
- [Shaders](https://wunderlust.xyz/r/shaders.md): Library of GPU/WebGPU-accelerated visual effects
- [Shader Gradient](https://wunderlust.xyz/r/shadergradient.md): Animated 3D gradients for React, Framer and Figma