![\"Bubbles\"](\"bubbles.jpg\")
\r\n ![\"Take](\"control.jpg\")
\r\n\r\n \r\n \r\n
\r\n These demos are real, you can click them! They contain the full code, too. 📦\r\n
\r\n\r\n#### Why postprocessing and not three/examples/jsm/postprocessing?\r\n\r\nFrom\r\n[https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)\r\n\r\n> This library provides an EffectPass which automatically organizes and merges\r\n> any given combination of effects. This minimizes the amount of render\r\n> operations and makes it possible to combine many effects without the\r\n> performance penalties of traditional pass chaining. Additionally, every effect\r\n> can choose its own blend function.\r\n>\r\n> All fullscreen render operations also use a single triangle that fills the\r\n> screen. Compared to using a quad, this approach harmonizes with modern GPU\r\n> rasterization patterns and eliminates unnecessary fragment calculations along\r\n> the screen diagonal. This is especially beneficial for GPGPU passes and\r\n> effects that use complex fragment shaders.\r\n\r\nPostprocessing also supports gamma correction out of the box, as well as WebGL2\r\nMSAA (multi sample anti aliasing), which is react-postprocessing's default, you\r\nget high performance crisp results w/o jagged edges.\r\n\r\n#### What does it look like?\r\n\r\nHere's an example combining a couple of effects\r\n([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).\r\n\r\n\r\n\r\n\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'\r\nimport { Canvas } from '@react-three/fiber'\r\n\r\nfunction App() {\r\n return (\r\n \r\n )\r\n}\r\n```\r\n\r\n## Documentation\r\n\r\n- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)\r\n- [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)","users":{}}