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 srgb-encoding 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 (
)
}
```
## Documentation
- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)
- [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)