pmndrs/react-postprocessing

O que é?

Recursos principais

• 01Componentes de efeito declarativos, como Bloom, DepthOfField, Noise e Vignette, dentro de EffectComposer
• 02Combina os efeitos em um único pass para reduzir as operações de renderização
• 03Cada efeito pode definir sua própria função de blend
• 04Correção de gama integrada e MSAA do WebGL2 ativado por padrão
• 05Escrito em TypeScript para uso com react-three-fiber

Casos de uso

• Adicionar bloom, vinheta ou granulação de filme a uma cena do react-three-fiber
• Aplicar desfoque de profundidade de campo para direcionar a atenção a uma parte de uma cena 3D
• Criar uma cadeia simples e linear de efeitos visuais sem escrever passes de renderização manualmente

Início rápido

1. 1

   Instale o pacote

   npm install @react-three/postprocessing
2. 2

   Envolva a cena em um EffectComposer com os componentes de efeito dentro de um Canvas do react-three-fiber

Antes de usar

• !Não foi feito para orquestrações complexas de efeitos; é mais indicado para cadeias de efeitos simples.
• !Requer @react-three/fiber, então só funciona com cenas do react-three-fiber.

Tópicos

Perguntas frequentes

O que é react-postprocessing?

Um wrapper React para a biblioteca postprocessing que permite aplicar efeitos de pós-processamento a cenas do react-three-fiber de forma declarativa, usando componentes JSX. react-postprocessing conecta a biblioteca postprocessing ao @react-three/fiber, o renderer React para Three.js. Em vez de criar passes de efeitos manualmente, você adiciona componentes como Bloom, DepthOfField, Noise e Vignette dentro de um elemento EffectComposer no Canvas.

react-postprocessing é gratuito? Qual é a licença?

react-postprocessing é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

react-postprocessing ainda é mantido?

Manutenção ativa. O último commit de react-postprocessing foi em 19 de out. de 2026.

Para que posso usar react-postprocessing?

Adicionar bloom, vinheta ou granulação de filme a uma cena do react-three-fiber Aplicar desfoque de profundidade de campo para direcionar a atenção a uma parte de uma cena 3D Criar uma cadeia simples e linear de efeitos visuais sem escrever passes de renderização manualmente

Como instalar react-postprocessing?

Instale o pacote: npm install @react-three/postprocessing Envolva a cena em um EffectComposer com os componentes de efeito dentro de um Canvas do react-three-fiber

Onde consigo react-postprocessing?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/pmndrs/react-postprocessing