Optimisation de la Résolution des Cartes d'Ombres

Qu'est-ce qu'une Carte d'Ombres (Shadow Map) ?

Pour comprendre comment ajuster la qualité d'une ombre, il faut d'abord savoir comment Three.js la calcule. Le processus, appelé shadow mapping, se déroule en coulisses :

1. Le point de vue de la lumière : Pour chaque source lumineuse qui projette une ombre (light.castShadow = true), Three.js place une caméra virtuelle à la position de cette lumière.
2. Rendu de la profondeur : Depuis ce point de vue, le moteur de rendu ne dessine pas les couleurs, mais la distance (la profondeur) de chaque objet qu'il "voit". Il crée ainsi une image en niveaux de gris où les pixels les plus clairs sont les objets les plus proches de la lumière, et les plus sombres sont les plus lointains. Cette image est la carte d'ombres ou shadow map.
3. Projection de l'ombre : Lors du rendu final de la scène depuis le point de vue de votre caméra principale, pour chaque pixel à l'écran, Three.js vérifie si ce point est "visible" depuis la lumière en le comparant à la carte d'ombres. S'il est plus loin que la valeur stockée dans la carte, il est considéré comme étant dans l'ombre et est dessiné plus sombre.

La qualité de l'ombre dépend donc directement de la résolution de cette texture (la carte d'ombres). Une résolution faible produit une ombre pixelisée, tandis qu'une résolution élevée produit une ombre aux bords nets et précis.

L'image ci-dessous illustre parfaitement cet effet.

Ajuster la Résolution en Pratique

Dans Three.js, la résolution de la carte d'ombres se contrôle via la propriété mapSize de l'objet shadow d'une lumière.

Pour un tutoriel en français qui met cela en contexte, je vous invite à lire un court extrait de l'article suivant. Il aborde la mise en place d'une lumière qui projette une ombre et explique précisément le rôle de shadow.mapSize.

Comme vous l'avez lu, light.shadow.mapSize est un THREE.Vector2 qui attend une largeur (width) et une hauteur (height). Ces valeurs sont généralement des puissances de 2 (par ex. 256, 512, 1024, 2048). Par défaut, la résolution est de 512x512.

// Exemple pour une DirectionalLight
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);

// La lumière doit projeter des ombres
directionalLight.castShadow = true;

// On règle la résolution de sa carte d'ombres
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024; 

Atelier : Trouver le Bon Équilibre

Reprenons le code de la leçon précédente sur l'éclairage à trois points. Dans cet exercice, seule la keyLight projetait une ombre. Nous allons maintenant jouer avec sa résolution pour voir l'impact direct sur la qualité visuelle.

1. Repartez de votre code final de la leçon précédente (avec le TorusKnot et les trois lumières).

2. Juste après avoir défini keyLight.castShadow = true;, ajoutez les lignes pour modifier la résolution de sa carte d'ombres.

3. Test 1 : Qualité minimale. Réglez la résolution à une valeur très basse pour bien voir la pixellisation.

   keyLight.shadow.mapSize.width = 128;
   keyLight.shadow.mapSize.height = 128;
   

   Lancez votre projet. L'ombre sous le nœud doit apparaître très "en escalier" (blocky).

4. Test 2 : Qualité standard/élevée. Augmentez maintenant la résolution.

   keyLight.shadow.mapSize.width = 2048;
   keyLight.shadow.mapSize.height = 2048;
   

   Actualisez la page. L'ombre devrait être beaucoup plus nette et précise.

Prenez quelques minutes pour tester différentes valeurs (256, 512, 1024...). Vous verrez que le gain de qualité devient de moins en moins perceptible au-delà d'un certain seuil, alors que le coût en performance, lui, continue de grimper.

Le Coût de la Performance

Pourquoi ne pas toujours utiliser la résolution maximale, comme 4096x4096 ?

Chaque carte d'ombres est une texture que votre carte graphique (GPU) doit générer et stocker en mémoire à chaque frame.

• Plus la résolution est élevée, plus le calcul est long. Un rendu de 4096x4096 pixels est 16 fois plus lourd qu'un rendu de 1024x1024 pixels.
• Chaque lumière qui projette une ombre a sa propre carte. Si vous avez 3 lumières avec des ombres en haute résolution, l'impact sur les performances peut être considérable et faire chuter votre framerate (la fluidité de l'animation).

Le but est donc de trouver la résolution la plus basse acceptable pour votre scène. Pour un showcase de produit où la caméra est proche, une résolution de 1024 ou 2048 peut être justifiée. Pour une vue d'ensemble avec des ombres distantes, 512 peut être largement suffisant.

La courte vidéo ci-dessous montre dynamiquement l'activation des ombres et l'augmentation de la résolution.

Aller un peu plus loin : shadow.bias

Parfois, même avec une bonne résolution, vous pouvez voir des artefacts étranges, comme des motifs sombres sur les surfaces qui devraient être éclairées. C'est un problème courant appelé shadow acne (acné d'ombre).

Cela se produit à cause d'erreurs de précision lorsque Three.js compare un point à sa propre ombre dans la carte. Pour corriger cela, on utilise la propriété shadow.bias. C'est une toute petite valeur qui "décale" la profondeur de l'ombre pour éviter l'auto-ombrage.

// Un bias négatif rapproche l'ombre de l'objet.
// Une valeur entre -0.001 et -0.005 est souvent un bon point de départ.
directionalLight.shadow.bias = -0.002;

Ajuster cette valeur demande un peu de tâtonnement, mais c'est un outil très utile à connaître pour peaufiner vos ombres.

Conclusion

Félicitations ! Vous avez complété le module sur l'éclairage et les ombres. Vous êtes maintenant capable non seulement de créer des éclairages complexes et artistiques, mais aussi de maîtriser la qualité et la performance des ombres qui en résultent.

Points clés à retenir :

• La qualité des ombres dépend de la résolution de la carte d'ombres (shadow map).
• On ajuste cette résolution via light.shadow.mapSize.width et light.shadow.mapSize.height. Les valeurs sont généralement des puissances de 2.
• Qualité vs. Performance : Une résolution plus élevée donne des ombres plus nettes mais consomme beaucoup plus de ressources GPU. Votre travail consiste à trouver le meilleur compromis.
• La propriété light.shadow.bias permet de corriger des artefacts visuels comme le shadow acne.

Aperçu de la prochaine leçon :
Maintenant que nos objets sont bien formés, bien éclairés et projettent de belles ombres, il leur manque encore un élément essentiel pour être réalistes : la texture. Dans le prochain module, nous verrons comment charger et appliquer des textures d'image pour donner à nos modèles l'apparence de matériaux réels comme le bois, le métal ou la pierre. Ce sera un grand pas vers la création de scènes photoréalistes