IBL avec HDRI

Qu'est-ce que l'éclairage basé sur l'image (IBL) ?

L'IBL est une technique de rendu où l'on utilise une image à 360° pour éclairer la scène. Au lieu de placer manuellement plusieurs sources de lumière, on "enveloppe" notre scène dans une photo d'un environnement réel. Cette photo, appelée HDRI, fournit non seulement l'éclairage ambiant global, mais aussi des reflets précis et détaillés pour tous les objets brillants ou métalliques.

Regardez l'image ci-dessous. La même scène intérieure est rendue trois fois, mais éclairée uniquement par trois images d'environnement différentes. Remarquez comment l'ambiance, la couleur de la lumière et les ombres changent radicalement.

Pour utiliser cette technique, nous devons comprendre quelques concepts techniques.

Les fondations : HDR, Tone Mapping et Gamma

Les images HDRI (High Dynamic Range Image) ne sont pas des images classiques comme les JPEG. Elles contiennent une quantité d'informations lumineuses bien plus grande, capturant à la fois les zones les plus sombres d'une scène et les sources de lumière les plus intenses (comme le soleil).

Pour que le moteur 3D puisse utiliser correctement ces informations et les afficher sur nos écrans standards (qui sont LDR, Low Dynamic Range), plusieurs processus sont nécessaires.

La vidéo suivante explique très bien ces concepts. Ne vous inquiétez pas si tout n'est pas clair à 100% immédiatement, l'important est de saisir l'idée générale.

En résumé :

1. On charge une image HDRI qui contient des données d'éclairage très riches.
2. On demande au renderer de faire du Tone Mapping pour adapter ces données à notre écran.
3. On s'assure que le renderer effectue la bonne correction gamma (sRGB) pour que les couleurs soient justes.

Atelier : Intégrer un environnement HDRI dans Three.js

Passons à la pratique. Nous allons charger une image HDRI et l'utiliser pour éclairer notre scène.

1. Trouver une image HDRI

Des sites comme Poly Haven offrent une immense collection d'images HDRI gratuites. Pour cet atelier, téléchargez un environnement qui vous plaît, par exemple kloofendal_48d_partly_cloudy_puresky. Choisissez la résolution 1K et le format .hdr.

Placez le fichier .hdr téléchargé dans votre dossier public/.

2. Mettre en place le code

Le processus en Three.js se déroule en plusieurs étapes clés que la vidéo suivante illustre parfaitement.

Voici le code complet que vous pouvez adapter, en intégrant ce que nous venons de voir.

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// Le RGBELoader n'est pas dans le noyau de Three.js, il faut l'importer séparément
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

// ... setup initial de la scène, caméra, renderer, contrôles ...
// Assurez-vous que votre renderer est créé comme ceci :
const renderer = new THREE.WebGLRenderer({ antialias: true });
// ...

// --- CONFIGURATION DU RENDU POUR L'HDRI ---
// 1. Appliquer le tone mapping
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1; // Ajustez cette valeur pour éclaircir/assombrir

// 2. Définir l'espace de couleur de sortie (très important !)
// L'ancienne syntaxe était `renderer.outputEncoding = THREE.sRGBEncoding;`
renderer.outputColorSpace = THREE.SRGBColorSpace;

// --- CHARGEMENT DE L'HDRI ---
const rgbeLoader = new RGBELoader();
rgbeLoader.load('/kloofendal_48d_partly_cloudy_puresky_1k.hdr', (environmentMap) => {
    // 3. Configurer le mappage de la texture
    environmentMap.mapping = THREE.EquirectangularReflectionMapping;

    // 4. Appliquer l'environnement à la scène
    scene.background = environmentMap; // En tant que fond visible
    scene.environment = environmentMap; // En tant que source de lumière et de reflets
});


// --- AJOUT D'UN OBJET POUR TESTER LES REFLETS ---
const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 32, 32),
    new THREE.MeshStandardMaterial({
        roughness: 0,   // Très lisse pour des reflets nets
        metalness: 1.0  // Très métallique
    })
);
scene.add(sphere);

// ... boucle d'animation ...

Lancez ce code. Vous devriez voir votre sphère parfaitement réfléchissante refléter le ciel et le paysage de l'image HDRI. Essayez de jouer avec les valeurs de roughness et metalness pour voir comment les reflets changent. C'est l'effet de l'IBL !

Astuce : Orienter l'environnement

Parfois, l'orientation de l'HDRI n'est pas celle que vous souhaitez (le soleil n'est pas au bon endroit, par exemple). Vous pouvez facilement faire pivoter l'environnement.

Pour appliquer une rotation de 90 degrés sur l'axe Y, vous ajouteriez simplement ceci à votre code, après avoir défini scene.environment :

// Rotation de 90 degrés sur l'axe Y
scene.environment.rotation.y = Math.PI / 2;
scene.background.rotation.y = Math.PI / 2;

Et dans React Three Fiber ?

Votre objectif final est R3F, et vous serez heureux d'apprendre que tout ce processus est incroyablement simplifié grâce à la librairie drei.

Tout le code de chargement et de configuration que nous avons écrit est remplacé par un seul composant : <Environment />.

En pratique, dans une application R3F, votre code ressemblerait à ceci :

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment } from '@react-three/drei'

function MyScene() {
  return (
    <Canvas>
      {/* Composant pour la sphère */}
      <mesh>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial roughness={0} metalness={1.0} />
      </mesh>

      {/* Et voici la magie ! */}
      <Environment files="/kloofendal_48d_partly_cloudy_puresky_1k.hdr" background />
      
      <OrbitControls />
    </Canvas>
  )
}

C'est tout ! Le composant <Environment /> gère pour vous le RGBELoader, la configuration du mapping, l'assignation à scene.environment et scene.background, et même la configuration du toneMapping du renderer. Cela démontre la puissance de l'écosystème de React Three Fiber, qui vous permet de vous concentrer sur l'aspect créatif tout en s'appuyant sur les solides fondations de Three.js que vous apprenez.

Conclusion

Félicitations ! Vous venez de débloquer l'une des techniques les plus puissantes pour atteindre le photoréalisme dans vos scènes 3D. Vos objets ne flottent plus dans un vide noir, mais existent dans un environnement crédible qui les éclaire et s'y reflète.

Points clés à retenir :

• L'éclairage basé sur l'image (IBL) utilise une image HDRI pour l'éclairage et les reflets.
• Les images HDRI contiennent plus d'informations lumineuses et nécessitent un RGBELoader.
• Pour un affichage correct, il faut configurer le toneMapping et l'outputColorSpace du renderer.
• scene.background rend l'image en fond, scene.environment l'utilise pour la lumière et les reflets.
• Dans React Three Fiber, le composant <Environment /> de drei automatise tout ce processus.

Aperçu de la prochaine leçon :
Nous avons créé un environnement immersif avec une seule image panoramique. Mais que faire si vous disposez de six images distinctes, une pour chaque direction (haut, bas, avant, arrière, gauche, droite) ? Dans la prochaine leçon, nous explorerons une autre méthode pour créer des arrière-plans : la Skybox, en utilisant une CubeTexture. C'est une autre technique fondamentale pour construire vos mondes 3D.