Post processing est une technique utilisée pour appliquer des effets à une scène après qu'elle ait été rendue. Ceci est couramment utilisé pour ajouter des effets comme le blur, le bloom et la correction des couleurs.

Utilisé correctement, le post processing peut grandement améliorer la qualité visuelle d'une scène.

Voici la scène avec laquelle nous allons travailler :

Et ce que nous obtiendrons :

Le résultat est bien meilleur, non ?

React Postprocessing

React Postprocessing est une bibliothèque qui facilite l'ajout d'effets de post processing à vos projets React Three Fiber.

Bien qu'il y ait d'autres moyens d'ajouter des effets de post processing à Three.js, React Postprocessing organise automatiquement et fusionne toute combinaison d'effets donnée.

Cela permet de simplifier l'ajout d'effets à votre scène avec le moins de surcharge de performance possible.

Commençons par installer la bibliothèque :

Copy
yarn add @react-three/postprocessing

Pour l'utiliser, il nous suffit de regrouper nos effets dans le composant EffectComposer.

Pour garder notre code organisé, créons un nouveau fichier components/Effects.jsx et ajoutons le code suivant :

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

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

Nous pouvons maintenant importer et utiliser ce composant dans notre fichier 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 nous regardons notre scène, nous pouvons voir tous nos objets comme s'ils utilisaient le meshNormalMaterial.

C'est parce que par défaut, le composant EffectComposer va rendre la scène en utilisant l'effet NormalPass. Comme nous n'avons ajouté aucun autre effet, c'est la seule chose que nous voyons.

Nous pouvons désactiver cela en définissant la prop disableNormalPass sur true :

Copy
<EffectComposer disableNormalPass></EffectComposer>

Maintenant, notre EffectComposer est prêt à recevoir des effets.

La liste des effets disponibles peut être trouvée dans la documentation de React Postprocessing.

Pour chaque effet, il inclut un exemple de code avec les différentes props disponibles pour la personnalisation. Certains effets sont également accompagnés d'exemples CodeSandbox pour visualiser et expérimenter.

Découvrons ensemble certains d'entre eux !

Vignette

Si vous faites de la photographie, vous êtes peut-être familier avec le terme vignette. Il s'agit d'un assombrissement des coins d'une image.

Vignette aide à attirer l'attention du spectateur vers le centre de la scène.

Ajoutons-le à notre fichier Effects.jsx :