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.
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.
