{"id":13515411,"url":"https://github.com/pmndrs/react-postprocessing","last_synced_at":"2025-05-13T19:08:22.416Z","repository":{"id":37405304,"uuid":"262026124","full_name":"pmndrs/react-postprocessing","owner":"pmndrs","description":"📬  postprocessing for react-three-fiber","archived":false,"fork":false,"pushed_at":"2025-02-20T06:59:34.000Z","size":16517,"stargazers_count":1207,"open_issues_count":76,"forks_count":119,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-05T17:38:34.689Z","etag":null,"topics":["3d","postprocessing","react","react-postprocessing","react-three-fiber","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://docs.pmnd.rs/react-postprocessing","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmndrs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-07T11:00:08.000Z","updated_at":"2025-05-04T14:08:33.000Z","dependencies_parsed_at":"2024-01-15T20:21:08.873Z","dependency_job_id":"10154b67-7107-4a4a-9093-6a4c73f8b562","html_url":"https://github.com/pmndrs/react-postprocessing","commit_stats":{"total_commits":566,"total_committers":41,"mean_commits":"13.804878048780488","dds":0.6925795053003534,"last_synced_commit":"d6c2bd9b6d7577a48d9ad0db79859704df8e2544"},"previous_names":["react-spring/react-postprocessing"],"tags_count":122,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-postprocessing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-postprocessing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-postprocessing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-postprocessing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmndrs","download_url":"https://codeload.github.com/pmndrs/react-postprocessing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253426197,"owners_count":21906501,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","postprocessing","react","react-postprocessing","react-three-fiber","threejs","webgl"],"created_at":"2024-08-01T05:01:10.957Z","updated_at":"2025-05-13T19:08:22.369Z","avatar_url":"https://github.com/pmndrs.png","language":"TypeScript","readme":"# react-postprocessing\n\n[![Version](https://img.shields.io/npm/v/@react-three/postprocessing?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing)\n[![Storybook](https://img.shields.io/static/v1?message=Storybook\u0026style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=\u0026logo=storybook\u0026logoColor=ffffff)](https://pmndrs.github.io/react-postprocessing)\n[![Downloads](https://img.shields.io/npm/dt/@react-three/postprocessing.svg?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing)\n[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=discord\u0026logo=discord\u0026logoColor=ffffff)](https://discord.gg/ZZjjNvJ)\n[![Open in GitHub Codespaces](https://img.shields.io/static/v1?\u0026message=Open%20in%20%20Codespaces\u0026style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=GitHub\u0026logo=github\u0026logoColor=ffffff)](https://github.com/codespaces/new?template_repository=pmndrs%2Freact-postprocessing)\n\n`react-postprocessing` is a\n[postprocessing](https://github.com/pmndrs/postprocessing) wrapper for\n[@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not\n(yet) meant for complex orchestration of effects, but can save you\n[hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a\nstraight forward effects-chain.\n\n```bash\nnpm install @react-three/postprocessing\n```\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pqrpl.csb.app\" target=\"_blank\"\u003e\u003cimg width=\"274\" src=\"bubbles.jpg\" alt=\"Bubbles\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://5jgjz.csb.app\" target=\"_blank\"\u003e\u003cimg width=\"274\" src=\"control.jpg\" alt=\"Take Control\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"middle\"\u003e\n  \u003ci\u003eThese demos are real, you can click them! They contain the full code, too. 📦\u003c/i\u003e\n\u003c/p\u003e\n\n#### Why postprocessing and not three/examples/jsm/postprocessing?\n\nFrom\n[https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)\n\n\u003e This library provides an EffectPass which automatically organizes and merges\n\u003e any given combination of effects. This minimizes the amount of render\n\u003e operations and makes it possible to combine many effects without the\n\u003e performance penalties of traditional pass chaining. Additionally, every effect\n\u003e can choose its own blend function.\n\u003e\n\u003e All fullscreen render operations also use a single triangle that fills the\n\u003e screen. Compared to using a quad, this approach harmonizes with modern GPU\n\u003e rasterization patterns and eliminates unnecessary fragment calculations along\n\u003e the screen diagonal. This is especially beneficial for GPGPU passes and\n\u003e effects that use complex fragment shaders.\n\nPostprocessing also supports gamma correction out of the box, as well as WebGL2\nMSAA (multi sample anti aliasing), which is react-postprocessing's default, you\nget high performance crisp results w/o jagged edges.\n\n#### What does it look like?\n\nHere's an example combining a couple of effects\n([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).\n\n\u003ca href=\"https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?\" target=\"_blank\" rel=\"noopener\"\u003e\n\u003cimg src=\"bubbles.jpg\" alt=\"Bubbles Demo\" /\u003e\n\u003c/a\u003e\n\n```jsx\nimport React from 'react'\nimport { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'\nimport { Canvas } from '@react-three/fiber'\n\nfunction App() {\n  return (\n    \u003cCanvas\u003e\n      {/* Your regular scene contents go here, like always ... */}\n      \u003cEffectComposer\u003e\n        \u003cDepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} /\u003e\n        \u003cBloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} /\u003e\n        \u003cNoise opacity={0.02} /\u003e\n        \u003cVignette eskil={false} offset={0.1} darkness={1.1} /\u003e\n      \u003c/EffectComposer\u003e\n    \u003c/Canvas\u003e\n  )\n}\n```\n\n## Documentation\n\n- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)\n- [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)\n","funding_links":[],"categories":["Graphics","TypeScript","Related Frameworks"],"sub_categories":["Post Processing","React"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmndrs%2Freact-postprocessing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmndrs%2Freact-postprocessing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmndrs%2Freact-postprocessing/lists"}