Bonjour !
Dans la leçon précédente, nous avons fait un grand pas en avant dans l'optimisation de nos scènes 3D en compressant la géométrie de nos modèles avec Draco. Nous avons vu comment réduire drastiquement la taille des fichiers, ce qui accélère le téléchargement.
Cependant, la géométrie n'est que la moitié de l'histoire. L'autre coupable majeur des longs temps de chargement et des mauvaises performances, ce sont les textures. Une seule image de haute qualité peut peser plus lourd et consommer plus de ressources qu'un modèle 3D complexe.
Aujourd'hui, nous allons donc nous attaquer à cette seconde moitié du problème. L'objectif est d'apprendre à optimiser les textures pour le web en choisissant des formats et des résolutions adaptés. Nous allons voir que le poids d'un fichier JPEG n'est que la partie émergée de l'iceberg et découvrir des techniques et formats modernes pour rendre nos applications à la fois belles et ultra-rapides.
1. Le véritable coût d'une texture : Fichier vs. VRAM
En tant que développeur web, vous êtes habitué à optimiser le poids des images (JPEG, PNG, WebP) pour réduire le temps de chargement des pages. En 3D, cette optimisation est nécessaire, mais insuffisante. Le véritable coût d'une texture se révèle une fois qu'elle est décompressée par le processeur (CPU) et envoyée à la mémoire de la carte graphique (VRAM).
Une texture, même si elle est compressée en un fichier JPEG de 500 Ko, occupera une place bien plus importante en VRAM. Calculons par exemple l'espace mémoire d'une texture 4K (4096x4096 pixels) avec 4 canaux de couleur (Rouge, Vert, Bleu, Alpha) :
C'est 67 Mo de VRAM consommés pour une seule texture ! Ce processus de décompression et de transfert peut également figer le thread principal de JavaScript, provoquant un "jank" ou un gel de l'interface utilisateur.
Fix Loading Model Freezes with Three.js & React
Pour voir l'impact concret de ce phénomène, regardons cette vidéo qui analyse les performances d'un modèle avec des textures non optimisées. C'est un excellent diagnostic du problème que nous cherchons à résoudre.
Regardez la section de 01:49 à 03:46. L'auteur utilise les outils de développement pour montrer que le goulot d'étranglement (Tex sub image 2D) est lié à la décompression des textures. Il utilise ensuite l'outil gltf-report pour montrer que les textures 4K du modèle occupent près de 1 Go de VRAM une fois décompressées.
Maintenant que nous comprenons que le vrai combat se joue au niveau de la VRAM, voyons comment nous pouvons gagner.
2. Choisir la bonne résolution et les bonnes dimensions
La première ligne de défense est simple : ne pas utiliser des textures plus grandes que nécessaire.
Règle n°1 : Adapter la résolution à l'usage
Utiliser une texture 4K pour un petit objet qui n'occupera que quelques pixels à l'écran est un gaspillage de ressources.
Alors, quelle résolution choisir ?
Qu'est-ce que glTF ? - Le format de fichier 3D pour le web
Cet article sur le format glTF donne des lignes directrices très claires et pratiques, issues de l'expérience professionnelle.
Trouvez la section FAQ et lisez la question : "Comment choisir la bonne résolution de texture pour les modèles glTF ?". Cette réponse concise vous donnera des ordres de grandeur pour différents cas d'usage.
En résumé, pour la plupart des applications web 3D (comme un visualiseur de produit), une résolution de 1K (1024x1024) ou 2K (2048x2048) est un excellent compromis entre qualité et performance.
Règle n°2 : Utiliser des dimensions en puissance de deux (POT)
Les dimensions de vos textures (largeur et hauteur) devraient être une puissance de deux : 256, 512, 1024, 2048, etc.
Pourquoi ? La raison principale est une technique d'optimisation appelée mipmapping. Un "mipmap" est une version pré-calculée et plus petite de la texture originale.
Quand un objet texturé est loin de la caméra, le moteur de rendu peut utiliser une version plus petite du mipmap. Cela a deux avantages majeurs :
- Meilleures performances : Le GPU a moins de données à traiter.
- Meilleure qualité visuelle : Évite les scintillements (aliasing) sur les textures vues de loin.
Three.js génère automatiquement ces mipmaps pour vous, mais seulement si vos textures ont des dimensions en puissance de deux.
Les matériaux — JavaScript avancé - David Gayerie
Les ressources suivantes confirment l'importance de cette règle fondamentale de WebGL.
Lisez la section "Chargement d’une texture" et portez une attention particulière à la note encadrée qui explique pourquoi les dimensions doivent être une puissance de 2.
3. Choisir le bon format
La résolution et les dimensions sont réglées. Passons maintenant au format de fichier.
Formats standards : JPEG vs PNG
Les règles de base du web s'appliquent aussi ici :
- JPEG : Idéal pour les textures de couleur (
map) sans transparence. La compression est avec perte mais efficace. - PNG : À utiliser quand la transparence est nécessaire (
alphaMap) ou pour des données qui ne doivent pas être altérées par la compression, comme lesroughnessMapoumetalnessMap.
Qu'est-ce que glTF ? - Le format de fichier 3D pour le web
L'article de Danthree Studio que nous avons consulté plus tôt donne des conseils rapides et efficaces à ce sujet.
Relisez la section "Conseils rapides". Le premier point est une excellente règle de base pour choisir entre JPEG et PNG.
Une technique professionnelle consiste à "packer" plusieurs textures en niveaux de gris (comme l'occlusion, la rugosité et le caractère métallique) dans les canaux R, G et B d'une seule image. C'est ce qu'on appelle une texture ORM (Occlusion, Roughness, Metalness). Cela réduit le nombre de fichiers à charger et le nombre de lectures de texture par le GPU.
Format avancé : KTX2, le super-héros de la VRAM
Les formats JPEG et PNG doivent être décompressés en VRAM, ce qui cause les problèmes que nous avons vus. Il existe des formats de texture conçus pour rester compressés directement sur le GPU !
Le plus moderne et le plus supporté est KTX2.
Fix Loading Model Freezes with Three.js & React
Reprenons la vidéo de Wawa Sensei. Après avoir diagnostiqué le problème, il présente la solution : KTX2.
Regardez la courte section de 04:06 à 04:34. Elle résume parfaitement les avantages de KTX2 : il reste compressé sur le GPU, réduisant l'usage de la VRAM et évitant le gel de l'application.
Adopter KTX2 demande une étape de conversion, mais le gain en performance est spectaculaire. En tant que développeur, vous pouvez intégrer cette étape dans votre processus de build.
Comment convertir et utiliser des textures KTX2 ?
Vous pouvez utiliser gltf-transform (que nous avons vu dans la leçon précédente) pour convertir toutes les textures d'un fichier .glb en une seule commande.
# Applique la compression KTX2 (mode UASTC, haute qualité) à un modèle
gltf-transform texture-compress --codec ktx2 --mode uastc mon_modele.glb mon_modele_ktx2.glb
Ensuite, pour charger ce modèle dans React Three Fiber, le processus est très similaire à celui de Draco. Il faut juste s'assurer que le KTX2Loader est correctement configuré.
Fix Loading Model Freezes with Three.js & React
La même vidéo montre en détail comment convertir un modèle et le charger dans une application R3F.
Regardez de 04:34 à 07:21. Observez comment l'auteur utilise gltf-transform puis ajuste le code dans React pour fournir le KTX2Loader au hook useGLTF. C'est la procédure pratique que vous suivrez.
Parfois, vous voudrez convertir des images individuelles plutôt qu'un modèle entier. Pour cela, il existe des outils dédiés.
Fix Loading Model Freezes with Three.js & React
La fin de la vidéo montre comment faire cette conversion pour des fichiers images séparés et comment les charger avec un hook drei spécifique.
Regardez de 10:21 à 13:47. Cette partie couvre l'installation de KTX-Software pour convertir des JPEG en KTX2, et l'utilisation du hook useKTX2 pour charger ces textures individuelles dans votre scène.
Ces outils vous donnent un contrôle total sur le pipeline d'optimisation, vous permettant de créer des expériences web 3D qui se chargent vite et fonctionnent de manière fluide, même sur des appareils moins puissants.
Conclusion
Optimiser les textures est aussi crucial que de compresser la géométrie. Si vous ne retenez que quelques points de cette leçon, que ce soient ceux-ci :
- Le coût principal d'une texture est sa taille en VRAM, pas son poids de fichier. Une texture 4K non compressée peut consommer plus de 60 Mo de VRAM.
- Adaptez la résolution : Pour le web, des textures de 1K ou 2K sont souvent suffisantes.
- Utilisez des dimensions en puissance de deux (512, 1024...) pour bénéficier de l'optimisation par mipmapping.
- Choisissez les formats avec soin : JPEG pour la couleur, PNG pour la transparence, et pour des performances maximales, investissez du temps pour convertir vos textures au format KTX2, qui reste compressé sur le GPU.
Vous avez maintenant en main les deux leviers d'optimisation les plus puissants : la compression de la géométrie (Draco) et l'optimisation des textures (résolution, formats, KTX2).
Aperçu de la prochaine étape :
Nous arrivons au terme de notre parcours d'apprentissage des fondamentaux. Il est temps de mettre en pratique tout ce que nous avons appris. Dans le prochain et dernier module, nous allons construire de A à Z un projet de showcase de produit interactif. Ce sera l'occasion d'assembler toutes les pièces du puzzle, y compris ces techniques d'optimisation, pour créer une application 3D professionnelle, performante et prête à être déployée.