{"id":"react-postprocessing","name":"React Postprocessing","url":"https://wunderlust.xyz/r/react-postprocessing","category":"three","category_label":"3D & WebGL","tags":["open-source","free","react","webgl"],"short":"Screen effects as React components: bloom, depth of field, noise and vignette","what":"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.","uses":"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."],"links":{"official":"https://github.com/pmndrs/react-postprocessing"},"image":"https://wunderlust.xyz/media/react-postprocessing-poster.jpg","video":"https://wunderlust.xyz/media/react-postprocessing.webm","share_image":"https://wunderlust.xyz/og/r/react-postprocessing.jpg","similar":["react-three-fiber","react-three-rapier","multiple-window-3d-scene","three-js","shaders","shadergradient"],"added_on":"2026-11-12","steal":"Stack bloom, depth of field, noise and vignette as JSX children of one EffectComposer","patterns":[],"why":"Nested effects merge into one pass, so a filmic look from bloom and depth of field costs less to draw than separate passes.","avoid":"Keep the stack short. Its README says it is not yet meant for complex orchestration, so pick another tool for a custom pipeline.","pt":{"name":"React Postprocessing","short":"Efeitos de tela como componentes React: bloom, profundidade de campo, ruído e vinheta","steal":"Empilhe bloom, profundidade de campo, ruído e vinheta como filhos JSX de um único EffectComposer","what":"Wrapper da biblioteca postprocessing para react-three-fiber. Um EffectComposer dentro do Canvas recebe efeitos aninhados com props, e eles se fundem num único passo de render para custar menos.","uses":"Para quem tem uma cena Three.js em React e quer dar um visual de cinema com poucas linhas de JSX.","benefits":["Efeitos aninhados como JSX dentro de um EffectComposer","Fusão em um único EffectPass para reduzir operações de render","MSAA do WebGL2 por padrão e correção de gama"],"caveats":["O README diz que ainda não serve para orquestração complexa de efeitos.","Exige React e @react-three/fiber, e o exemplo do README mostra só quatro efeitos."],"why":"Efeitos aninhados se juntam num passe só, então o visual de cinema com bloom e profundidade de campo custa menos que passes separados.","avoid":"Mantenha a pilha curta. O README diz que ainda não serve para orquestração complexa, então use outra ferramenta para um pipeline próprio."},"schema_version":1}