Repolode
Submit
pmndrs

pmndrs/react-postprocessing

A React wrapper for the postprocessing library that lets react-three-fiber scenes apply post-processing effects declaratively as JSX components.

View on GitHubWebsite
Stars
1,438
Forks
141
Open issues
12
Last commit
11 hours ago

What is it?

react-postprocessing is a wrapper that connects the postprocessing library to @react-three/fiber, the React renderer for Three.js. Instead of building effect passes by hand, you place effect components such as Bloom, DepthOfField, Noise and Vignette inside an EffectComposer element in your Canvas.

The wrapper is aimed at straightforward effect chains rather than complex orchestration of multiple passes. The underlying postprocessing library merges the given effects into a single pass to reduce render operations, and each effect can choose its own blend function. Gamma correction is supported out of the box, and WebGL2 MSAA is enabled by default.

The package is published on npm as @react-three/postprocessing and is documented on its own docs site.

Key features

  • 01Declarative effect components such as Bloom, DepthOfField, Noise and Vignette inside EffectComposer
  • 02Merges effects into a single pass to reduce render operations
  • 03Each effect can define its own blend function
  • 04Built-in gamma correction and WebGL2 MSAA by default
  • 05Written in TypeScript for use with react-three-fiber

Use cases

  • Adding bloom, vignette or film grain to a react-three-fiber scene
  • Applying depth-of-field blur to focus attention on part of a 3D scene
  • Building a simple, linear chain of visual effects without writing render passes by hand

Quick start

  1. 1

    Install the package

    npm install @react-three/postprocessing
  2. 2

    Wrap your scene in an EffectComposer with effect components inside a react-three-fiber Canvas

Things to know

  • Not meant for complex orchestration of effects; best for straightforward effect chains.
  • Requires @react-three/fiber, so it only fits react-three-fiber scenes.

Topics

#react#threejs#webgl#3d#postprocessing#react-three-fiber#graphics#react-postprocessing

FAQ

What is react-postprocessing?
A React wrapper for the postprocessing library that lets react-three-fiber scenes apply post-processing effects declaratively as JSX components. react-postprocessing is a wrapper that connects the postprocessing library to @react-three/fiber, the React renderer for Three.js. Instead of building effect passes by hand, you place effect components such as Bloom, DepthOfField, Noise and Vignette inside an EffectComposer element in your Canvas.
Is react-postprocessing free to use? What license does it have?
react-postprocessing is open source under the MIT license. Check the license terms before using it in commercial products.
Is react-postprocessing still maintained?
Actively maintained. The last commit to react-postprocessing was on Oct 19, 2026.
What can I use react-postprocessing for?
Adding bloom, vignette or film grain to a react-three-fiber scene Applying depth-of-field blur to focus attention on part of a 3D scene Building a simple, linear chain of visual effects without writing render passes by hand
How do I install react-postprocessing?
Install the package: npm install @react-three/postprocessing Wrap your scene in an EffectComposer with effect components inside a react-three-fiber Canvas
Where can I get react-postprocessing?
The source code and installation instructions are on GitHub: https://github.com/pmndrs/react-postprocessing

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects