L'éclairage et les reflets réalistes avec `<Environment>`

1. Qu'est-ce qu'un environnement et pourquoi est-ce si important ?

Imaginez que vous preniez une photo à 360° d'un lieu, comme une plage ensoleillée ou un studio photo. Cette image panoramique est ce que l'on appelle une carte d'environnement (ou environment map), souvent stockée dans un format spécial appelé HDRI (High Dynamic Range Image).

En 3D, ces cartes ont deux fonctions essentielles :

1. Éclairage : La scène 3D utilise les informations de couleur et de luminosité de l'image pour éclairer les objets. Un ciel bleu vif dans l'HDRI éclairera vos objets avec une lumière bleue venant du dessus.
2. Reflets : Les surfaces réfléchissantes de vos modèles (comme le métal ou le verre) refléteront cette image à 360°, les intégrant de manière crédible dans leur environnement.

La courte vidéo suivante explique très bien ce concept.

Le résultat ? Vos objets 3D ne flottent plus dans le vide, mais semblent réellement appartenir à un monde.

2. Le composant <Environment> : la magie de drei

Heureusement, React Three Fiber et l'écosystème drei rendent l'implémentation de l'IBL incroyablement simple grâce au composant <Environment>.

Il existe deux manières principales de l'utiliser.

Approche 1 : Les pré-réglages (presets)

Pour un résultat immédiat sans avoir à chercher de fichiers, drei fournit une collection de presets (pré-réglages) de haute qualité.

Pour l'utiliser, il suffit d'ajouter le composant à votre <Canvas> :

import { Canvas } from '@react-three/fiber'
import { Environment, OrbitControls } from '@react-three/drei'
import { YourModel } from './YourModel' // Le modèle de la leçon précédente

function App() {
  return (
    <Canvas>
      <Suspense fallback={null}>
        <YourModel />
        {/* Ajoute un éclairage et un arrière-plan basés sur un pré-réglage */}
        <Environment preset="city" background />
      </Suspense>
      <OrbitControls />
    </Canvas>
  )
}

La prop background indique à <Environment> d'utiliser également l'image comme arrière-plan de la scène. Sans cette prop, l'environnement éclairera vos objets mais le fond restera transparent ou de la couleur par défaut.

Approche 2 : Votre propre fichier HDRI

Pour un contrôle artistique total, vous utiliserez vos propres fichiers HDRI. Une excellente ressource gratuite est Poly Haven.

Pour voir l'effet des reflets, il nous faut d'abord un objet réfléchissant. La vidéo suivante montre comment créer une sphère métallique parfaite pour ce test.

Maintenant que nous avons notre objet test, nous pouvons lui appliquer notre propre fichier HDRI.

1. Téléchargez un fichier .hdr depuis Poly Haven.
2. Placez-le dans votre dossier public.
3. Utilisez la prop files du composant <Environment>.

La vidéo continue et montre exactement comment faire.

Le code résultant est d'une grande simplicité :

import { Environment } from '@react-three/drei'

// ... dans votre composant de scène
<Environment files="/my-hdri.hdr" background />

3. Environnements dynamiques et performance

Que se passe-t-il si votre environnement n'est pas statique ? Par exemple, si vous voulez animer les couleurs de l'arrière-plan en fonction du scroll de l'utilisateur.

Par défaut, pour des raisons de performance, <Environment> ne calcule l'éclairage qu'une seule fois, au premier rendu. Si l'environnement change, les lumières et les reflets ne se mettront pas à jour.

Pour forcer la mise à jour à chaque image, on utilise la prop frames={Infinity}.

Attention, cette option est plus gourmande en ressources. Ne l'utilisez que lorsque votre environnement est réellement dynamique. Pour optimiser, vous pouvez aussi baisser la résolution de la carte d'environnement avec la prop resolution (par exemple, resolution={256}).

4. Atelier : Illuminez votre modèle

Il est temps de mettre en pratique ce que vous avez appris. Reprenons le projet de la leçon précédente, où vous avez chargé un modèle 3D avec gltfjsx.

1. Récupérez votre projet : Ouvrez le code de la leçon précédente avec votre modèle 3D affiché.
2. Trouvez un HDRI : Allez sur Poly Haven, choisissez un environnement qui vous plaît (un studio, un extérieur, etc.), et téléchargez la version 1k au format .hdr.
3. Ajoutez le fichier : Placez le fichier .hdr téléchargé dans le dossier public de votre projet.
4. Implémentez <Environment> :
   • Dans votre composant principal (App.jsx), importez Environment depuis @react-three/drei.
   • Ajoutez <Environment files="/votre-fichier.hdr" background /> à l'intérieur de votre <Canvas> (et de <Suspense>).
   • Supprimez les lumières que vous aviez ajoutées manuellement (<ambientLight>, <directionalLight>) pour bien voir l'effet de l'environnement seul.
5. Observez et ajustez :
   • Lancez votre application. Votre modèle devrait maintenant être éclairé de manière beaucoup plus réaliste et présenter des reflets de l'environnement.
   • Bonus : Si votre modèle n'est pas très réfléchissant, ouvrez le composant généré par gltfjsx. Cherchez les balises <meshStandardMaterial> et essayez de diminuer leur roughness (proche de 0 pour un effet miroir) et d'augmenter leur metalness (proche de 1 pour un effet métallique).

Votre code final pourrait ressembler à ceci :

import { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Environment } from '@react-three/drei';
import { VotreModele } from './components/VotreModele';

export default function App() {
  return (
    <Canvas camera={{ position: [0, 1, 5], fov: 50 }}>
      <Suspense fallback={null}>
        <VotreModele />
        
        {/* La seule ligne qui change tout ! */}
        <Environment files="/votre-hdri.hdr" background />
      </Suspense>
      
      <OrbitControls autoRotate />
    </Canvas>
  );
}

Conclusion

Félicitations ! Vous maîtrisez maintenant l'une des techniques les plus efficaces pour améliorer considérablement la qualité visuelle de vos scènes 3D. Un bon éclairage est ce qui sépare une scène amateur d'une expérience professionnelle.

Points clés à retenir :

• L'éclairage basé sur l'image (IBL) utilise une image à 360° (HDRI) pour éclairer une scène et créer des reflets réalistes.
• Le composant <Environment> de drei est l'outil le plus simple pour implémenter l'IBL.
• Vous pouvez utiliser des presets pour des résultats rapides ou des fichiers .hdr personnalisés pour un contrôle total.
• La prop background permet d'afficher l'environnement en tant que fond de scène.
• Pour les environnements animés, la prop frames={Infinity} force la mise à jour continue, au prix d'une performance moindre.

Aperçu de la prochaine leçon :
L'éclairage d'environnement est fantastique pour le réalisme global, mais que faire si nous voulons ajouter des sources de lumière plus artistiques et contrôlées, comme des néons ou des projecteurs virtuels ? Dans la prochaine leçon, nous explorerons le composant <Lightformer>, qui nous permettra de "peindre avec la lumière" à l'intérieur de notre environnement.