Visionneuse et compresseur GLB — ouvrez, inspectez et réduisez vos .glb / .gltf en ligne

Une visionneuse GLB dans le navigateur décode le fichier à l'intérieur de l'onglet et le dessine avec WebGL. Déposez un .glb ou un .gltf sur la page et le modèle s'affiche à l'écran en quelques centaines de millisecondes sur un ordinateur de bureau ; aucune étape de téléversement, aucun installateur et aucun compte. Un GLB est un asset glTF 2.0 empaqueté dans un seul fichier binaire : un en-tête de 12 octets, un bloc JSON qui décrit le graphe de scène, et un bloc BIN qui contient les tampons de sommets, les tampons d'indices et, généralement, les images intégrées.

La même page constitue l'étape d'inspection et de réduction d'un pipeline de jeu. Vous ouvrez l'export, examinez le filaire, les normales, les îlots UV et les emplacements de matériaux, confirmez que rien ne s'est cassé à la sortie de Blender ou de Maya, puis compressez le fichier et téléchargez une copie pour votre moteur. Cette page couvre ce que chaque vue d'inspection permet de repérer, les trois leviers de compression et l'ordre dans lequel les actionner, ainsi que les budgets dans lesquels une scène de navigateur doit réellement tenir.

Ouvrez un .glb directement ici

Glissez un fichier sur la zone de dépôt, ou choisissez-en un via la boîte de dialogue de fichiers. La page le lit via l'API File sous forme d'URL Blob et d'ArrayBuffer, et l'analyse dans le même onglet. Ouvrez le panneau réseau de votre navigateur pendant l'opération : aucune requête ne transporte le modèle. Rien n'est mis en file d'attente, rien n'est écrit sur un serveur, et la fermeture de l'onglet le supprime.

Le traitement local compte doublement. D'abord la confidentialité : des personnages non publiés, le travail d'un client sous NDA, des assets scannés que vous avez payés. Les envoyer via un convertisseur tiers est un problème de licence avant d'être un problème de performance. Ensuite la latence : un GLB de 40 Mo sur une connexion montante de 10 Mbps représente environ une demi-minute d'attente avant même que la moindre conversion ne démarre, et cette attente change la fréquence à laquelle vous vérifiez réellement un fichier. Une lecture locale depuis un SSD prend une fraction de seconde, et le coût d'analyse est un travail CPU sur votre propre machine.

Entrées acceptées : .glb est le cas du fichier unique. .gltf est la même scène en JSON, il arrive donc généralement avec un tampon .bin et un dossier d'images. Sélectionnez-les en plusieurs fois, glissez tout le dossier, ou déposez un zip et la visionneuse résout les URI relatives. Les URI de données intégrées fonctionnent sans fichiers annexes. Les textures peuvent être en PNG, JPEG, WebP ou KTX2 (Basis Universal), et la géométrie peut être compressée en Draco ou meshopt, car la visionneuse embarque les deux décodeurs et lit la liste d'extensions dans le bloc JSON pour décider lequel utiliser.

Ce qu'elle affiche : des matériaux PBR sous une lumière directionnelle plus une carte d'environnement optionnelle, une grille de 1 m activable pour lire l'échelle réelle, une liste de clips pour chaque animation du fichier, et un panneau de statistiques avec le nombre de triangles, le nombre de sommets, le nombre de nœuds, une estimation des draw calls, ainsi que les dimensions en pixels et la taille en octets de chaque image intégrée. La mémoire est la seule limite stricte. Un GLB de 100 Mo s'ouvre généralement sur un ordinateur de bureau ; un onglet de téléphone peut être tué par le navigateur avant la fin de l'analyse.

L'alternative est un aller-retour : ouvrir le DCC, importer, regarder, exporter, charger le moteur, remarquer le problème, revenir en arrière. Chaque étape coûte des minutes et peut introduire son propre changement, si bien que vous finissez par déboguer le pipeline au lieu de l'asset. Garder l'inspection dans le même onglet où se trouve déjà le fichier supprime l'aller-retour et, plus utile encore, fait que les chiffres que vous lisez sont ceux du fichier que vous êtes sur le point de livrer.

Inspecter : filaire, normales, disposition UV, matériaux

Quatre vues permettent de repérer la plupart des exports défectueux avant qu'ils n'atteignent le moteur. Le filaire montre la densité de triangles et révèle où l'exportateur a triangulé un n-gon. Les normales montrent l'orientation des faces : une surface retournée apparaît en noir sous une seule lumière directionnelle. La disposition UV aplatit le canal UV sur une grille avec la texture en arrière-plan, ce qui rend évidents les îlots qui se chevauchent, les texels étirés et la géométrie en dehors de la plage 0 à 1. Les matériaux listent chaque matériau avec ses textures, son mode alpha, son indicateur double face et ses réglages d'espace colorimétrique.

Inspectez toujours avant de compresser. Draco et meshopt réécrivent les tampons de sommets et modifient la disposition des sommets, et un redimensionnement de texture peut masquer une couture déjà présente. Si vous compressez d'abord, vous ne pouvez plus distinguer si un artefact vient de vous ou du compresseur.

Le panneau de statistiques fait partie de l'inspection. Notez le nombre de triangles, le nombre de sommets, le nombre de nœuds, le nombre de matériaux et les dimensions de chaque image intégrée avant de toucher à quoi que ce soit. Ce sont les chiffres de référence que vous comparez après chaque étape de compression, et ils vous indiquent quel levier vaut réellement la peine d'être actionné.

Compressez un GLB sans le casser

Trois leviers, et ils ne se valent pas. Supprimer des données que rien ne référence est gratuit et réversible en réexportant. Réencoder les textures élimine la majorité des octets d'un asset typique, car les images dominent le fichier. La compression de la géométrie est celle qui peut casser un modèle, elle intervient donc en dernier.

Aucun de ces leviers n'a de ratio garanti. Un GLB composé d'un seul PNG en 4096 par 4096 ne se comporte pas du tout comme un GLB majoritairement constitué de données de sommets, et une scène riche en maillages avec 30 textures en 512 ne réagira pas de la même façon qu'un personnage unique doté d'un seul atlas 4K. Mesurez après chaque étape plutôt que de vous fier au chiffre d'un asset qui appartient à quelqu'un d'autre.

Les décodeurs sont une contrainte de livraison, pas un détail. Draco nécessite un module décodeur Draco, meshopt nécessite MeshoptDecoder, et KTX2 nécessite un transcodeur avec les bons formats cibles. three.js fournit GLTFLoader mais vous devez câbler DRACOLoader, MeshoptDecoder et KTX2Loader vous-même ; Babylon.js et Unity glTFast ont des équivalents. Si vous compressez avec une extension que votre runtime ne connaît pas, le modèle se charge en noir ou plante, et cela ressemblera à une corruption de fichier plutôt qu'à une erreur de configuration.

GLB vs glTF vs FBX — celui que votre moteur veut

glTF 2.0 est le format d'exécution. GLB et .gltf sont deux conteneurs pour les mêmes données : GLB place le JSON et le tampon binaire dans un seul fichier, .gltf les garde séparés sous forme de texte lisible plus des fichiers annexes. FBX est un format d'échange de DCC antérieur à glTF et reste ce que la plupart des riggers et animateurs livrent, tandis qu'OBJ ne contient que la géométrie, sans animation ni matériaux PBR.

Les conventions d'axes et d'unités causent plus de bugs d'import que la taille du fichier. glTF est en mètres, Y vers le haut, main droite, avec des caméras regardant vers -Z. Les exportateurs FBX ne s'accordent pas sur les unités, et une incompatibilité centimètres/mètres se traduit par un modèle environ 100 fois trop petit ou trop grand. L'exportateur glTF de Blender convertit Z-up en Y-up pour vous ; désactivez-le et le modèle arrive couché sur le côté. Vérifiez la boîte englobante dans la visionneuse par rapport à une dimension connue avant de blâmer le moteur.

Optimisez pour le web : draw calls, taille des textures, budget de polygones

Considérez ces chiffres comme des points de départ à ajuster par projet, et non comme des limites. Une scène de navigateur qui maintient une fréquence d'images stable sur un ordinateur portable de milieu de gamme compte généralement moins de quelques centaines de milliers de triangles et, bien plus important, moins de quelques centaines de draw calls. L'instanciation et la fusion de matériaux font bouger le premier chiffre ; rien ne fait bouger le second, sinon la combinaison de la géométrie.

Les draw calls se comptent par maillage et par matériau. Deux cents accessoires qui portent chacun leur propre matériau coûtent deux cents draws, même si chacun ne compte que quelques centaines de triangles, et le coût CPU de leur soumission peut dépasser le coût GPU de la géométrie. Fusionnez la géométrie statique qui partage un matériau, regroupez les petites textures dans un atlas d'une seule image, et instanciez les accessoires répétés. Les matériaux transparents coûtent plus que ne le suggère leur nombre de triangles, car ils se trient et se mélangent par pixel, et le lancer d'ombres rend à nouveau la même géométrie dans une carte de profondeur.

La taille des textures domine généralement à la fois le fichier et la VRAM, et c'est la partie que les gens interprètent à l'envers. Une texture RGBA8 en 4096 par 4096 occupe 67 108 864 octets en mémoire avant les mipmaps, et les mipmaps ajoutent environ un tiers de plus ; un maillage de 100 000 triangles avec des positions, normales et UV en 4 octets ne pèse que quelques mégaoctets en comparaison. Une seule carte de normales 4K négligée pèse plus lourd que tout le maillage sur lequel elle repose. Le KTX2 garde la texture compressée dans la mémoire GPU, ce qui constitue une économie différente de celle de la taille du fichier et souvent celle qui compte sur mobile.

L'espace colorimétrique a sa place dans cette liste parce qu'il est systématiquement erroné. La couleur de base et l'émission sont en sRGB. Les normales, metallicRoughness et l'occlusion sont en linéaire. Intervertissez-les et le matériau paraît soit délavé, soit trop sombre, et aucun réglage d'éclairage ne le corrige, car les données ont été interprétées de travers au chargement.

Inspectez un modèle réel avant de compresser

Lire sur la topologie n'est pas la même chose que la faire tourner. La Blender Model Gallery est intégrée à cette page en mode filaire, vous pouvez donc faire pivoter un export réel et observer les triangles que le moteur dessinera réellement, plutôt que les quads propres que voyait le modeleur.

Observez trois choses pendant qu'il tourne. La courbure : là où les triangles se serrent, l'exportateur en a ajouté, et un mur plat de 20 triangles à côté d'une sphère de 20 000 triangles est normal. Les coutures : un changement d'ombrage le long d'une arête signifie que les sommets y ont été scindés, ce qui est correct au niveau d'une couture UV et incorrect sur une surface lisse. La silhouette : le contour est ce qu'un joueur perçoit à distance, et il survit bien mieux à une passe de décimation que les détails intérieurs.

Les mêmes budgets s'appliquent aux assets livrés dans Mini World et The Cyclops' Island, qui tournent tous deux dans un onglet de navigateur via le 3D game builder. Un accessoire de 40k triangles à lui seul est acceptable ; quarante d'entre eux dans une seule scène ne le sont pas, et la vue filaire est l'endroit où vous vous en rendez compte avant la fréquence d'images.

Entrez dans le monde auquel il appartient

Un sprite est un personnage sans endroit où se tenir. La dernière étape est celle que personne d'autre ne propose : prenez la planche que vous venez de créer et placez-la dans un monde que quelqu'un peut parcourir à pied — une petite île, une planète, un coin de rue pluvieux. Chaque monde de ce site a été créé à partir d'une seule description écrite et publié comme une page jouable.

FAQ