Optimisation des objets identiques avec InstancedMesh

1. Le Problème : Les "Draw Calls"

Pour que le GPU (la carte graphique) puisse dessiner un objet, le CPU (le processeur) doit lui envoyer une commande. Cette commande, c'est ce qu'on appelle un "draw call". Si votre scène contient 5000 arbres, une approche naïve générera 5000 draw calls à chaque image.

Le problème n'est pas que le GPU est incapable de dessiner ces 5000 arbres. Les GPU modernes sont extrêmement puissants. Le véritable goulot d'étranglement est la communication constante entre le CPU et le GPU. Envoyer des milliers de commandes à chaque rafraîchissement (60 fois par seconde) sature ce canal de communication et fait chuter drastiquement le nombre d'images par seconde (FPS).

Pour mieux comprendre comment les draw calls sont comptabilisés et pourquoi ils sont si coûteux, la vidéo suivante offre une excellente explication.

La solution pour contourner ce problème ? Envoyer une seule commande pour dessiner tous les objets identiques. C'est le principe de l'instanciation.

2. La Solution : L'Instanciation (Instancing)

L'instanciation est une technique qui permet de dessiner de multiples copies ("instances") d'un même objet en un seul draw call.

L'idée est simple :

1. On envoie une seule fois les données communes à toutes les instances : la géométrie (la forme) et le matériau (l'apparence).
2. Puis, on envoie une seule fois une grande liste de données spécifiques à chaque instance : principalement sa matrice de transformation (qui définit sa position, sa rotation et son échelle).

Le GPU reçoit alors l'ordre : "Prends cette géométrie et ce matériau, et dessine-les des milliers de fois en utilisant les transformations de cette liste". Cela réduit drastiquement la communication CPU-GPU et libère les performances.

Maintenant que nous avons compris le "pourquoi" et le "quoi", passons au "comment".

3. Implémenter l'Instanciation avec Three.js

Avant de voir les abstractions de React Three Fiber, il est essentiel de comprendre comment l'instanciation fonctionne en "pur" Three.js. Cela vous donnera des bases solides. La classe clé est THREE.InstancedMesh.

Le processus est le suivant :

1. On crée un InstancedMesh en lui passant une géométrie, un matériau et le nombre total d'instances que l'on souhaite afficher.
2. On parcourt une boucle, de 0 jusqu'au nombre d'instances.
3. À chaque itération, on définit la position, la rotation et l'échelle de l'instance courante. Ces informations sont stockées dans un objet THREE.Matrix4.
4. On assigne cette matrice à l'instance correspondante avec la méthode mesh.setMatrixAt(index, matrix).

La vidéo que nous avons commencée est un tutoriel parfait pour cela.

Ce processus, bien que très puissant, est assez "impératif". Il ne correspond pas tout à fait à la philosophie déclarative de React. Voyons comment le transposer dans React Three Fiber.

4. L'Instanciation dans l'Écosystème React Three Fiber

Avec R3F, il existe deux manières principales de faire de l'instanciation, allant du plus bas niveau au plus haut niveau d'abstraction.

A. L'Approche Bas Niveau : <instancedMesh>

React Three Fiber expose directement la classe InstancedMesh de Three.js sous la forme d'un composant JSX : <instancedMesh>.

Cette approche est un mélange du monde impératif et déclaratif.

• On déclare l'<instancedMesh> dans notre JSX.
• On utilise un useRef pour obtenir une référence à l'objet Three.js sous-jacent.
• On utilise un useEffect (qui ne s'exécute qu'une seule fois au montage) pour faire notre boucle et appeler setMatrixAt, exactement comme dans l'exemple "vanilla" Three.js.

Cette méthode vous donne un contrôle total, mais elle reste assez verbeuse. Heureusement, la librairie drei nous offre une solution bien plus élégante.

B. L'Approche Haut Niveau : <Instances> et <Instance> de drei

La librairie @react-three/drei contient des composants qui encapsulent cette logique pour nous. Pour l'instanciation, elle fournit les composants <Instances> et <Instance>.

• <Instances> : Le composant conteneur. Il prend en charge la création de l'InstancedMesh en coulisses. On lui passe la géométrie et le matériau partagés.
• <Instance> : Un composant virtuel que l'on place à l'intérieur de <Instances>. On peut en créer autant qu'on veut, et chaque <Instance> peut recevoir ses propres props de transformation (position, rotation, scale, color).

Cette approche est entièrement déclarative et bien plus "React-friendly". Vous n'avez plus besoin de useRef, de useEffect ou de manipuler des matrices manuellement.

Cette méthode est celle que vous utiliserez dans 90% des cas. Elle est plus lisible, moins sujette aux erreurs et s'intègre parfaitement à la gestion d'état de React.

5. Quand Utiliser l'Instanciation ? (Et quand ne pas le faire ?)

L'instanciation est une solution miracle pour les objets identiques (même géométrie, même matériau). Cependant, il y a des compromis à connaître.

• Frustum Culling : Normalement, Three.js ne dessine pas les objets qui sont en dehors du champ de vision de la caméra (c'est le frustum culling). Un InstancedMesh est traité comme un seul grand objet. Par conséquent, si une seule instance est visible, le GPU devra quand même traiter le groupe entier.
• Flexibilité : Vous ne pouvez pas appliquer un matériau radicalement différent à une seule instance (même si vous pouvez changer sa couleur avec setColorAt).

Dans le monde réel, le choix d'optimisation est souvent un équilibre.

Conclusion

Félicitations ! Vous venez d'acquérir une des compétences les plus importantes pour la performance en 3D sur le web.

Points clés à retenir :

• Le rendu de nombreux objets via une boucle crée un grand nombre de draw calls, ce qui sature la communication CPU-GPU et détruit les performances.
• L'instanciation résout ce problème en dessinant des milliers d'objets identiques (même géométrie, même matériau) en un seul draw call.
• En "pur" Three.js, on utilise InstancedMesh et on configure chaque instance de manière impérative avec setMatrixAt.
• En R3F, l'approche la plus idiomatique et la plus simple est d'utiliser les composants <Instances> et <Instance> de la librairie @react-three/drei.
• L'instanciation est idéale pour des éléments répétitifs comme des arbres, des particules, de l'herbe, des projectiles, etc.

Aperçu de la prochaine leçon :

Maintenant que nous savons créer des scènes complexes et performantes, un autre aspect de l'expérience utilisateur devient primordial : le temps de chargement. Dans la prochaine leçon, nous apprendrons à gérer le chargement de nos modèles 3D, textures et autres ressources de manière élégante avec Suspense et le hook useProgress, pour que l'utilisateur ne se retrouve jamais face à un écran vide.