Accueil / Optimisation
Formats 3D et optimisationUne scène fluide sur tous les appareils, même modestes.
Une belle scène qui saccade sur téléphone est une scène ratée. Moins de triangles là où ça ne se voit pas, des textures plus légères, des objets dessinés en une fois : les bonnes pratiques, expliquées et démontrées.
Trois budgets à surveiller.
Une scène 3D consomme trois ressources. Optimiser, c’est dépenser chacune là où elle se voit.
TrianglesLe nombre de triangles
Chaque triangle coûte. Un objet vu de loin n’a pas besoin des mêmes détails qu’au premier plan : c’est le principe du niveau de détail.
AppelsLe nombre d’appels de dessin
Mille objets séparés, ce sont mille ordres envoyés à la carte graphique. Regrouper et instancier divise ce coût de façon spectaculaire.
PoidsLe poids à télécharger
Modèles et textures doivent arriver vite, surtout en 4G. Compression et formats adaptés réduisent souvent le poids par cinq ou dix.
Le niveau de détail, en direct.
121 sphères. Chacune existe en quatre versions, de 80 à près de 17 000 triangles. Reculez la caméra, et regardez le compteur fondre sans que l’image change vraiment.
Ce que vous voyez
Le compteur en haut à gauche additionne les triangles réellement dessinés. Activez les couleurs pour voir quelle version de chaque sphère est utilisée.
Niveau de détail
Couleur par niveau
Votre navigateur sera testé au lancement de la démo.
Orange : version la plus détaillée. Blanc, gris clair, puis gris foncé : versions de plus en plus simples, réservées aux sphères lointaines.
Huit réflexes qui changent tout.
Valables quel que soit l’outil : Three.js, Babylon.js, PlayCanvas ou un export Unity.
Mesurer d’abord
Afficher les images par seconde et le nombre d’appels de dessin, sur l’appareil le plus faible visé. On n’optimise que ce que l’on mesure.
Niveaux de détail
Deux à quatre versions par objet important, choisies selon la distance. Gain immédiat sur les grandes scènes.
Instancier les répétitions
Arbres, chaises, lampadaires : une seule géométrie, des milliers de positions, un seul appel de dessin.
Fusionner le décor fixe
Les objets qui ne bougent jamais et partagent une matière peuvent être réunis en un seul.
Précalculer la lumière
Pour un décor fixe, la lumière et les ombres peuvent être calculées une fois et enregistrées dans des textures (baking).
Compresser les textures
Des textures aux dimensions raisonnables, dans un format compressé pour la carte graphique (KTX2), occupent beaucoup moins de mémoire.
Compresser la géométrie
Les compressions Draco ou Meshopt réduisent fortement le poids des fichiers GLB.
Limiter la résolution
Sur un écran très dense, calculer chaque pixel n’apporte presque rien : plafonner la densité de rendu soulage les téléphones.
Quel format 3D pour le web ?
Le glTF s’est imposé comme le format d’échange standard du web. Les autres servent en amont.
| Format | Pour le web ? | Commentaire |
|---|---|---|
| glTF / GLB | Oui, le standard | Forme, matières PBR, animations, en un fichier compact. Exporté par Blender, Cinema 4D, 3ds Max, Maya et la plupart des outils. |
| USDZ | Pour l’iPhone | Format d’Apple pour la réalité augmentée sur iPhone et iPad (Quick Look). Utile en complément du GLB. |
| FBX | À convertir | Très répandu dans le jeu vidéo et l’animation, mais lourd et propriétaire. À convertir en GLB. |
| OBJ | À convertir | Ancien et simple, sans animation ni matières modernes. Pratique pour échanger une forme brute. |
| PLY, SPZ | Pour le splatting | Formats des scènes en Gaussian splatting. SPZ est une version compressée. Voir Capturer le réel. |
Optimisation, les questions courantes.
Combien de triangles peut-on afficher dans un navigateur ?
Il n’y a pas de chiffre unique : un ordinateur récent affiche plusieurs millions de triangles avec fluidité, un téléphone moyen bien moins. Le nombre d’objets et la complexité des matières comptent souvent davantage que les triangles.
Quel poids viser pour un modèle GLB ?
Pour un objet unique sur une page, quelques centaines de kilo-octets à quelques mégaoctets. Pour une scène complète, viser un premier affichage rapide, puis charger le reste progressivement.
WebGPU dispense-t-il d’optimiser ?
Non. Il repousse les limites, surtout pour les scènes avec beaucoup d’objets, mais un téléphone reste un téléphone : batterie, chaleur et mémoire ne changent pas.
Parlons de ce que la 3D temps réel peut faire pour vous.
Configurateur, visite, carte interactive, formation en réalité virtuelle : je vous dis franchement si la 3D web est la bonne réponse.