Post procesamiento es una técnica utilizada para aplicar efectos a una escena después de que ha sido renderizada. Esto se usa comúnmente para agregar efectos como desenfoque, resplandor y corrección de color.

Usado correctamente, el post procesamiento puede mejorar enormemente la calidad visual de una escena.

Esta es la escena con la que trabajaremos:

Y con lo que terminaremos:

El resultado luce mucho mejor, ¿verdad?

React Postprocessing

React Postprocessing es una biblioteca que facilita la adición de efectos de post procesamiento a tus proyectos de React Three Fiber.

Si bien existen otras formas de añadir efectos de post procesamiento a Three.js, React Postprocessing organiza automáticamente y fusiona cualquier combinación de efectos dada.

Esto hace que sea más sencillo agregar efectos a tu escena con la mínima cantidad de sobrecarga de rendimiento.

Empecemos por instalar la biblioteca:

Copy
yarn add @react-three/postprocessing

Para usarla simplemente necesitamos envolver nuestros efectos en el componente EffectComposer.

Para mantener nuestro código organizado, vamos a crear un nuevo archivo components/Effects.jsx y añadir el siguiente código:

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

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

Ahora podemos importar y usar este componente en nuestro archivo App.jsx:

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

import { Canvas } from "@react-three/fiber";
import { Effects } from "./components/Effects";
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;

Si miramos nuestra escena, podemos ver todos nuestros objetos como si estuvieran usando el meshNormalMaterial.

Esto es porque por defecto, el componente EffectComposer renderiza la escena usando el efecto de NormalPass. Como no agregamos ningún otro efecto, esto es lo único que vemos.

Podemos deshabilitar esto configurando la prop disableNormalPass a true:

Copy
<EffectComposer disableNormalPass></EffectComposer>

Ahora nuestro EffectComposer está listo para recibir efectos.

La lista de efectos disponibles se puede encontrar en la documentación de React Postprocessing.

Para cada efecto, incluye una muestra de código con las diferentes props disponibles para su personalización. Algunos efectos también vienen con ejemplos en CodeSandbox para visualizar y experimentar con ellos.

¡Vamos a descubrir algunos de ellos juntos!

Viñeta

Si haces fotografías, es posible que estés familiarizado con el término viñeta. Es un oscurecimiento de las esquinas de una imagen.

Vignette ayuda a atraer la atención del espectador al centro de la escena.

Vamos a añadirlo a nuestro archivo Effects.jsx: