Pós-processamento é uma técnica utilizada para aplicar efeitos a uma cena após ela ter sido renderizada. Isso é comumente usado para adicionar efeitos como blur, bloom, e correção de cor.

Utilizado corretamente, o pós-processamento pode melhorar significativamente a qualidade visual de uma cena.

Esta é a cena com a qual estaremos trabalhando:

E o resultado final:

O resultado parece muito melhor, não é?

React Postprocessing

React Postprocessing é uma biblioteca que facilita a adição de efeitos de pós-processamento a seus projetos React Three Fiber.

Embora existam outras maneiras de adicionar efeitos de pós-processamento no Three.js, o React Postprocessing organiza automaticamente e mescla qualquer combinação de efeitos.

Isso torna mais simples adicionar efeitos à sua cena com a menor quantidade de sobrecarga de desempenho.

Vamos começar instalando a biblioteca:

Copy
yarn add @react-three/postprocessing

Para usá-la, precisamos simplesmente envolver nossos efeitos no componente EffectComposer.

Para manter nosso código organizado, vamos criar um novo arquivo components/Effects.jsx e adicionar o seguinte código:

Copy
import { EffectComposer } from "@react-three/postprocessing";

export const Effects = () => {
  return <EffectComposer></EffectComposer>;
};

Agora podemos importar e usar este componente em nosso arquivo App.jsx:

Copy
import { Effects } from "./components/Effects"; 

import { Canvas } from "@react-three/fiber";
import { Experience } from "./components/Experience";
function App() {
  return (
    <>
      <Canvas camera={{ position: [-1, 0.225, 5.91], fov: 42 }}>
        <color attach="background" args={["#333333"]} />
        <Experience />
        <Effects />
      </Canvas>
    </>
  );
}

export default App;

Se olharmos para a nossa cena, podemos ver todos os nossos objetos como se estivessem usando o meshNormalMaterial.

Isso ocorre porque, por padrão, o componente EffectComposer irá renderizar a cena usando o efeito NormalPass. Como não adicionamos nenhum outro efeito, isso é o único que vemos.

Podemos desativar isso configurando a prop disableNormalPass para true:

Copy
<EffectComposer disableNormalPass></EffectComposer>

Agora nosso EffectComposer está pronto para receber efeitos.

A lista de efeitos disponíveis pode ser encontrada na documentação do React Postprocessing.

Para cada efeito, inclui um exemplo de código com as diferentes props disponíveis para customização. Alguns efeitos também vêm com exemplos no CodeSandbox para visualizar e experimentar.

Vamos descobrir juntos alguns deles!

Vinheta

Se você faz um pouco de fotografia, pode estar familiarizado com o termo vinheta. É um escurecimento dos cantos de uma imagem.

Vignette ajuda a atrair a atenção do espectador para o centro da cena.

Vamos adicionar isso ao nosso arquivo Effects.jsx: