postprocessing wrapper for React and @react-three/fiber





react-postprocessing is a
postprocessing wrapper for
@react-three/fiber. This is not
(yet) meant for complex orchestration of effects, but can save you
hundreds of LOC 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
> 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).
`jsx
import React from 'react'
import { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'
import { Canvas } from '@react-three/fiber'
function App() {
return (
)
}
``