Il post processing è una tecnica utilizzata per applicare effetti a una scena dopo che è stata renderizzata. Viene comunemente utilizzato per aggiungere effetti come blur, bloom e correzione colore.

Utilizzato correttamente, il post processing può migliorare notevolmente la qualità visiva di una scena.

Questa è la scena con cui lavoreremo:

E questo è il risultato finale:

Il risultato sembra molto migliore, vero?

React Postprocessing

React Postprocessing è una libreria che facilita l'aggiunta di effetti di post processing ai tuoi progetti React Three Fiber.

Sebbene ci siano altri modi per aggiungere effetti di post processing a Three.js, React Postprocessing organizza automaticamente e unisce qualsiasi combinazione di effetti.

Rende più semplice aggiungere effetti alla tua scena con il minimo impatto sulle prestazioni.

Iniziamo con l'installare la libreria:

Copy
yarn add @react-three/postprocessing

Per utilizzarla basta semplicemente inserire i nostri effetti nel componente EffectComposer.

Per mantenere il codice organizzato, creiamo un nuovo file components/Effects.jsx e aggiungiamo il seguente codice:

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

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

Ora possiamo importare e utilizzare questo componente nel nostro file 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;

Se osserviamo la nostra scena, possiamo vedere tutti i nostri oggetti come se stessero usando il meshNormalMaterial.

Questo perché di default, il componente EffectComposer renderizzerà la scena usando l'effetto NormalPass. Poiché non abbiamo aggiunto altri effetti, è l'unica cosa che vediamo.

Possiamo disabilitarlo impostando la proprietà disableNormalPass su true:

Copy
<EffectComposer disableNormalPass></EffectComposer>

Ora il nostro EffectComposer è pronto a ricevere effetti.

L'elenco degli effetti disponibili può essere trovato nella documentazione di React Postprocessing.

Per ogni effetto, è incluso un esempio di codice con le diverse proprietà disponibili per la personalizzazione. Alcuni effetti includono anche esempi CodeSandbox per visualizzare ed esperimentare.

Scopriamone insieme alcuni!

Vignette

Se fai un po' di fotografia, potresti essere familiare con il termine vignette. È un oscuramento degli angoli di un'immagine.

Vignette aiuta a focalizzare l'attenzione dell'osservatore al centro della scena.

Aggiungiamolo al nostro file Effects.jsx: