GLB-Viewer & Kompressor — .glb / .gltf online öffnen, inspizieren und verkleinern

Ein GLB-Viewer im Browser dekodiert die Datei direkt im Tab und zeichnet sie mit WebGL. Legst du eine .glb oder .gltf auf der Seite ab, erscheint das Modell auf einem Desktop-PC innerhalb weniger hundert Millisekunden auf dem Bildschirm; es gibt keinen Upload-Schritt, keinen Installer und kein Konto. Eine GLB ist ein glTF-2.0-Asset, das in einer einzigen Binärdatei verpackt ist: ein 12-Byte-Header, ein JSON-Chunk, der den Szenengraph beschreibt, und ein BIN-Chunk, der Vertex-Buffer, Index-Buffer und meist die eingebetteten Bilder enthält.

Dieselbe Seite ist der Prüf- und Verkleinerungsschritt einer Game-Pipeline. Du öffnest den Export, siehst dir das Wireframe, die Normalen, die UV-Inseln und die Material-Slots an, bestätigst, dass auf dem Weg aus Blender oder Maya nichts kaputtgegangen ist, und komprimierst die Datei dann und lädst eine Kopie für deine Engine herunter. Diese Seite behandelt, was die einzelnen Prüfansichten aufdecken, die drei Kompressionshebel und die Reihenfolge, in der du sie einsetzt, sowie die Budgets, innerhalb derer eine Browser-Szene tatsächlich leben muss.

Öffne eine .glb direkt hier

Zieh eine Datei auf die Drop-Zone oder wähle eine über den Dateidialog aus. Die Seite liest sie über die File API als Blob-URL plus ArrayBuffer und parst sie im selben Tab. Öffne dabei das Netzwerk-Panel deines Browsers: Keine Anfrage transportiert das Modell. Nichts wird in eine Warteschlange gestellt, nichts auf einen Server geschrieben, und beim Schließen des Tabs wird es verworfen.

Lokal zählt doppelt. Erstens der Datenschutz: unveröffentlichte Charaktere, Kundenarbeit unter NDA, gescannte Assets, für die du bezahlt hast. Sie durch einen Konverter eines Drittanbieters zu schicken, ist zuerst ein Lizenzproblem und erst danach ein Performance-Problem. Zweitens die Latenz: Eine 40 MB große GLB über eine 10-Mbit-Upload-Verbindung bedeutet rund eine halbe Minute Wartezeit, bevor überhaupt eine Konvertierung beginnt, und diese Wartezeit verändert, wie oft du eine Datei tatsächlich prüfst. Ein lokales Lesen von einer SSD dauert einen Bruchteil einer Sekunde, und die Parse-Kosten sind CPU-Arbeit auf deiner eigenen Maschine.

Akzeptierte Eingabe: .glb ist der Einzeldatei-Fall. .gltf ist dieselbe Szene als JSON, kommt also meist mit einem .bin-Buffer und einem Ordner voller Bilder. Wähle sie mit Mehrfachauswahl aus, zieh den ganzen Ordner hinein oder leg eine Zip-Datei ab, und der Viewer löst die relativen URIs auf. Eingebettete Data-URIs funktionieren ohne Sidecar-Dateien. Texturen können PNG, JPEG, WebP oder KTX2 (Basis Universal) sein, und Geometrie kann Draco- oder meshopt-komprimiert sein, denn der Viewer bringt beide Decoder mit und liest die Erweiterungsliste im JSON-Chunk, um zu entscheiden, welcher verwendet wird.

Was gerendert wird: PBR-Materialien unter einem gerichteten Licht plus einer optionalen Umgebungskarte, ein umschaltbares 1-m-Raster, damit du den echten Maßstab ablesen kannst, eine Clip-Liste für jede Animation in der Datei und ein Statistik-Panel mit Dreiecksanzahl, Vertex-Anzahl, Knotenanzahl, einer Schätzung der Draw Calls sowie den Pixelmaßen und der Bytegröße jedes eingebetteten Bildes. Der Speicher ist die einzige harte Grenze. Eine 100 MB große GLB lässt sich auf einem Desktop meist öffnen; ein Tab auf dem Handy kann vom Browser beendet werden, bevor er mit dem Parsen fertig ist.

Die Alternative ist ein Roundtrip: DCC öffnen, importieren, ansehen, exportieren, Engine laden, Problem bemerken, zurückgehen. Jeder Zwischenschritt kostet Minuten, und jeder Zwischenschritt kann selbst eine Änderung einführen, sodass du am Ende die Pipeline statt das Asset debuggst. Die Prüfung in demselben Tab zu behalten, in dem die Datei ohnehin liegt, beseitigt den Roundtrip und bedeutet – nützlicher noch –, dass die Zahlen, die du liest, die Zahlen in der Datei sind, die du gerade ausliefern willst.

Prüfen: Wireframe, Normalen, UV-Layout, Materialien

Vier Ansichten fangen die meisten schlechten Exporte ab, bevor sie die Engine erreichen. Wireframe zeigt die Dreiecksdichte und macht sichtbar, wo der Exporter ein n-Gon trianguliert hat. Normalen zeigt die Flächenausrichtung, sodass eine umgestülpte Oberfläche unter einem einzigen gerichteten Licht schwarz erscheint. UV-Layout flacht den UV-Kanal zu einem Raster mit der Textur dahinter ab, wodurch sich überlappende Inseln, gedehnte Texel und Geometrie außerhalb des Bereichs 0 bis 1 sofort zeigen. Materialien listet jedes Material mit seinen Texturen, dem Alpha-Modus, dem Double-Sided-Flag und den Farbraum-Einstellungen auf.

Prüfe immer, bevor du komprimierst. Draco und meshopt schreiben Vertex-Buffer neu und verändern das Vertex-Layout, und eine Texturgrößenänderung kann eine Naht verbergen, die schon vorher vorhanden war. Wenn du zuerst komprimierst, kannst du nicht mehr sagen, ob ein Artefakt von dir oder vom Kompressor stammt.

Das Statistik-Panel gehört zur Prüfung dazu. Notiere Dreiecksanzahl, Vertex-Anzahl, Knotenanzahl, Materialanzahl und die Maße jedes eingebetteten Bildes, bevor du irgendetwas veränderst. Das sind die Ausgangswerte, mit denen du nach jedem Kompressionsschritt vergleichst, und sie sagen dir, welcher Hebel tatsächlich lohnt.

Eine GLB komprimieren, ohne sie kaputtzumachen

Drei Hebel, und sie sind nicht gleichwertig. Das Verwerfen von Daten, auf die nichts verweist, ist kostenlos und durch erneutes Exportieren umkehrbar. Das Neukodieren von Texturen entfernt bei einem typischen Asset die meisten Bytes, weil Bilder die Datei dominieren. Die Geometriekompression ist diejenige, die ein Modell kaputtmachen kann, also kommt sie zuletzt.

Keine dieser Maßnahmen hat ein garantiertes Verhältnis. Eine GLB, die aus einem einzigen 4096 mal 4096 großen PNG besteht, verhält sich ganz anders als eine GLB, die überwiegend aus Vertex-Daten besteht, und eine mesh-lastige Szene mit 30 Texturen à 512 reagiert nicht genauso wie ein einzelner Charakter mit einem 4K-Atlas. Miss nach jedem Schritt, statt einer Zahl aus dem Asset von jemand anderem zu vertrauen.

Decoder sind eine Auslieferungsbedingung, kein Detail. Draco braucht ein Draco-Decoder-Modul, meshopt braucht den MeshoptDecoder, und KTX2 braucht einen Transcoder mit den richtigen Zielformaten. three.js liefert den GLTFLoader mit, aber DRACOLoader, MeshoptDecoder und KTX2Loader musst du selbst verdrahten; Babylon.js und Unity glTFast haben Entsprechungen. Wenn du mit einer Erweiterung komprimierst, die deine Runtime nicht kennt, lädt das Modell schwarz oder wirft einen Fehler, und es sieht dann wie eine Dateibeschädigung aus statt wie ein Konfigurationsfehler.

GLB vs. glTF vs. FBX — Welches deine Engine will

glTF 2.0 ist das Laufzeitformat. GLB und .gltf sind zwei Container für dieselben Daten: GLB packt das JSON und den Binärpuffer in eine Datei, .gltf hält sie getrennt als lesbaren Text plus Sidecar-Dateien. FBX ist ein DCC-Austauschformat, das älter ist als glTF und immer noch das, was die meisten Rigger und Animatoren weitergeben, und OBJ ist reine Geometrie, ohne Animation und ganz ohne PBR-Materialien.

Achsen- und Einheitenkonventionen verursachen mehr Importfehler als die Dateigröße. glTF verwendet Meter, Y-up, rechtshändig, mit Kameras, die entlang -Z blicken. FBX-Exporter sind sich über die Einheiten uneinig, und eine Diskrepanz zwischen Zentimetern und Metern zeigt sich als Modell, das rund 100-mal zu klein oder zu groß ist. Blenders glTF-Exporter rechnet Z-up für dich in Y-up um; deaktivierst du das, kommt das Modell auf der Seite liegend an. Prüfe die Bounding Box im Viewer gegen ein bekanntes Maß, bevor du die Engine verantwortlich machst.

Für das Web optimieren: Draw Calls, Texturgröße, Poly-Budget

Betrachte diese Werte als Ausgangspunkte, die du pro Projekt justierst, nicht als Grenzen. Eine Browser-Szene, die auf einem Mittelklasse-Laptop eine stabile Bildrate hält, liegt meist unter einigen hunderttausend Dreiecken und – weit wichtiger – unter einigen hundert Draw Calls. Instancing und Material-Zusammenführung bewegen die erste Zahl; die zweite bewegt nichts außer dem Kombinieren von Geometrie.

Draw Calls werden pro Mesh und pro Material gezählt. Zweihundert Requisiten, die jeweils ihr eigenes Material tragen, kosten zweihundert Draws, selbst wenn jede nur ein paar hundert Dreiecke hat, und die CPU-Kosten für ihre Übermittlung können die GPU-Kosten der Geometrie übersteigen. Führe statische Geometrie zusammen, die sich ein Material teilt, fasse kleine Texturen in einem Bild zu einem Atlas zusammen und verwende Instancing für wiederkehrende Requisiten. Transparente Materialien kosten mehr, als ihre Dreiecksanzahl vermuten lässt, weil sie pro Pixel sortieren und mischen, und das Werfen von Schatten rendert dieselbe Geometrie erneut in eine Tiefenkarte.

Die Texturgröße dominiert meist sowohl die Datei als auch den VRAM, und genau das verstehen die Leute oft falsch herum. Eine 4096 mal 4096 große RGBA8-Textur belegt im Speicher 67.108.864 Bytes, bevor Mipmaps hinzukommen, und Mipmaps fügen noch einmal rund ein Drittel hinzu; ein Mesh mit 100k Dreiecken und 4-Byte-Positionen, -Normalen und -UVs ist dagegen nur wenige Megabyte groß. Eine einzige unbedachte 4K-Normalmap wiegt mehr als das gesamte Mesh, auf dem sie liegt. KTX2 hält die Textur im GPU-Speicher komprimiert, was eine andere Ersparnis ist als die Dateigröße und auf Mobilgeräten oft die entscheidende.

Der Farbraum gehört in diese Liste, weil er routinemäßig falsch ist. Grundfarbe und Emissive sind sRGB. Normalen, metallicRoughness und Occlusion sind linear. Vertauscht man sie, wirkt das Material entweder ausgewaschen oder zu dunkel, und kein noch so großes Nachjustieren der Beleuchtung behebt das, weil die Daten beim Laden falsch interpretiert wurden.

Ein echtes Modell prüfen, bevor du komprimierst

Über Topologie zu lesen ist nicht dasselbe, wie sie zu drehen. Die Blender Model Gallery ist auf dieser Seite im Wireframe-Modus eingebettet, sodass du einen echten Export drehen und die Dreiecke betrachten kannst, die die Engine tatsächlich zeichnen wird, statt der sauberen Quads, die der Modellierer gesehen hat.

Achte beim Drehen auf drei Dinge. Krümmung: Wo sich Dreiecke ballen, dort hat der Exporter sie hinzugefügt, und eine flache Wand mit 20 Dreiecken neben einer Kugel mit 20.000 Dreiecken ist normal. Nähte: Eine Schattierungsänderung über eine Kante hinweg bedeutet, dass die Vertices dort gesplittet wurden, was an einer UV-Naht korrekt und auf einer glatten Oberfläche falsch ist. Silhouette: Der Umriss ist das, was ein Spieler aus der Distanz liest, und er übersteht einen Dezimierungsdurchgang weit besser als das Innendetail.

Dieselben Budgets gelten für die Assets, die in Mini World und The Cyclops' Island ausgeliefert werden, die beide über den 3D Game Builder in einem Browser-Tab laufen. Eine Requisite mit 40k Dreiecken für sich ist in Ordnung; vierzig davon in einer Szene sind es nicht, und die Wireframe-Ansicht ist der Ort, an dem du das herausfindest, bevor es die Bildrate tut.

Lauf in die Welt hinein, zu der es gehört

Ein Sprite ist eine Figur ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand bietet: Nimm das Sheet, das du gerade erstellt hast, und setz es in eine Welt, in der jemand herumlaufen kann — eine kleine Insel, ein Planet, eine verregnete Straßenecke. Jede Welt auf dieser Seite wurde aus einer einzigen geschriebenen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ