Les sites Web en 3D peuvent être exigeants en termes de performances. Il est important de garder à l'esprit que tous les utilisateurs n'ont pas le même appareil.

Certains disposent de dispositifs haut de gamme avec un GPU puissant et un écran haute résolution tandis que d'autres ont des appareils bas de gamme avec un GPU faible et un écran basse résolution.

Pour vous assurer qu'un maximum d'utilisateurs puisse profiter de vos applications web 3D au mieux, vous devez les optimiser et éviter les calculs inutiles.

Dans cette leçon, nous verrons différentes techniques pour optimiser nos projets React Three Fiber ainsi que quelques pièges courants à éviter.

Draw calls

Dans les graphiques 3D, un draw call est une commande envoyée au GPU pour indiquer à l'API graphique quoi dessiner et comment le dessiner.

Plus vous avez de draw calls, plus le GPU doit travailler.

Pour surveiller le nombre de draw calls dans vos projets React Three Fiber, vous pouvez utiliser l'extension SpectorJS pour Chrome.

Une fois l'extension installée, vous pouvez ouvrir le panneau SpectorJS en cliquant sur l'icône Spector.js dans la barre d'outils de Chrome.

Cliquez sur le bouton rond rouge pour commencer l'enregistrement des draw calls. Attendez quelques secondes et le panneau SpectorJS s'ouvrira.

Par défaut, il s'ouvre dans l'onglet des commandes. Il vous montre toutes les commandes envoyées au GPU. Dans la colonne de gauche, vous pouvez voir une miniature pour chaque draw call.

Les premiers draw calls sont pour les ombres. Ensuite, vous pouvez voir les draw calls pour le personnage puis un par cube (ces derniers devraient être optimisés).

L'onglet d'information donne également des informations utiles comme le nombre de vertices et le nombre de draw calls.

Nous allons maintenant voir comment optimiser nos projets React Three Fiber pour réduire le nombre de draw calls.

Instancing

Le concept de instancing est largement utilisé dans les graphiques 3D. Il permet de réutiliser la même géométrie et le même material pour plusieurs objets.

C'est une excellente solution lorsque vous souhaitez rendre le même objet plusieurs fois mais avec des position, scale, rotation ou color différents...

Il fusionne tous les draw calls en un seul et améliore considérablement les performances.

La bibliothèque Drei fournit le composant Instances pour nous aider à le faire simplement.

Nous devons envelopper la géométrie et le material que nous voulons instancier avec le composant Instances.