https://github.com/pmndrs/react-postprocessing
📬 postprocessing for react-three-fiber
https://github.com/pmndrs/react-postprocessing
3d postprocessing react react-postprocessing react-three-fiber threejs webgl
Last synced: 7 days ago
JSON representation
📬 postprocessing for react-three-fiber
- Host: GitHub
- URL: https://github.com/pmndrs/react-postprocessing
- Owner: pmndrs
- License: mit
- Created: 2020-05-07T11:00:08.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-02-20T06:59:34.000Z (about 2 months ago)
- Last Synced: 2025-04-09T17:19:47.887Z (7 days ago)
- Topics: 3d, postprocessing, react, react-postprocessing, react-three-fiber, threejs, webgl
- Language: TypeScript
- Homepage: https://docs.pmnd.rs/react-postprocessing
- Size: 15.8 MB
- Stars: 1,182
- Watchers: 12
- Forks: 118
- Open Issues: 74
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-webxr-development - @react-three/postprocessing - badge] - A postprocessing wrapper for @react-three/fiber. Save you hundreds of LOC for a straight forward effects-chain. It is faster than three/examples/jsm/effectcomposer, actively maintained, has better effects (Graphics / Post Processing)
- awesome-threejs - react-postprocessing - three/fiber by [@pmndrs](https://github.com/pmndrs) (Related Frameworks / React)
README
# react-postprocessing
[](https://www.npmjs.com/package/@react-three/postprocessing)
[](https://pmndrs.github.io/react-postprocessing)
[](https://www.npmjs.com/package/@react-three/postprocessing)
[](https://discord.gg/ZZjjNvJ)
[](https://github.com/codespaces/new?template_repository=pmndrs%2Freact-postprocessing)
`react-postprocessing` is a
[postprocessing](https://github.com/pmndrs/postprocessing) wrapper for
[@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not
(yet) meant for complex orchestration of effects, but can save you
[hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a
straight forward effects-chain.
```bash
npm install @react-three/postprocessing
```
These demos are real, you can click them! They contain the full code, too. 📦
#### Why postprocessing and not three/examples/jsm/postprocessing?
From
[https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)
> This library provides an EffectPass which automatically organizes and merges
> any given combination of effects. This minimizes the amount of render
> operations and makes it possible to combine many effects without the
> performance penalties of traditional pass chaining. Additionally, every effect
> can choose its own blend function.
>
> All fullscreen render operations also use a single triangle that fills the
> screen. Compared to using a quad, this approach harmonizes with modern GPU
> rasterization patterns and eliminates unnecessary fragment calculations along
> the screen diagonal. This is especially beneficial for GPGPU passes and
> effects that use complex fragment shaders.
Postprocessing also supports gamma correction out of the box, as well as WebGL2
MSAA (multi sample anti aliasing), which is react-postprocessing's default, you
get high performance crisp results w/o jagged edges.
#### What does it look like?
Here's an example combining a couple of effects
([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).
```jsx
import React from 'react'
import { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'
import { Canvas } from '@react-three/fiber'
function App() {
return (
{/* Your regular scene contents go here, like always ... */}
)
}
```
## Documentation
- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)
- [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)