GLB-Datei verkleinern — von 80 MB auf 3 MB, ohne dass es jemand sieht.
Das 3D-Modell sieht in Blender großartig aus, aber die GLB-Datei ist 80 MB groß — auf dem Handy lädt sie eine Ewigkeit oder gar nicht. Die gute Nachricht: Fast jedes Modell lässt sich auf einen Bruchteil verkleinern, ohne dass Besucher einen Unterschied sehen. Hier steht, wo das Gewicht steckt und mit welchen Werkzeugen du es loswirst.
Das meiste Gewicht einer GLB-Datei steckt fast immer in den Texturen, nicht in der Geometrie. Reihenfolge: 1. Texturen auf sinnvolle Größe bringen (meist 1024 oder 2048 Pixel) und als WebP oder KTX2 komprimieren. 2. Geometrie mit Draco oder Meshopt packen. 3. Nur wenn nötig: Polygone reduzieren. Das Werkzeug gltf-transform erledigt die ersten beiden Schritte mit einem Befehl.
Wo das Gewicht steckt.
Eine GLB-Datei ist ein Paket aus Geometrie, Materialien, Texturen und eventuell Animationen. Bevor du komprimierst, lohnt der Blick hinein: Der Befehl gltf-transform inspect listet jede Textur mit Auflösung und Größe und jedes Mesh mit Anzahl der Punkte. In den meisten Fällen, die ich sehe, machen Texturen den Großteil aus — eine einzige 4096×4096-Textur als PNG kann allein 20 MB wiegen. Bei CAD-Daten und Scans ist es dagegen oft die Geometrie mit Millionen Dreiecken (CAD-Daten aufbereiten).
# Einmal installieren
npm install --global @gltf-transform/cli
# Zeigt Meshes, Materialien und Texturen mit Größe
gltf-transform inspect modell.glbDie Tabelle „textures“ zeigt Auflösung und Speichergröße. Dort liegt fast immer das größte Einsparpotenzial.
Wie groß darf ein Modell sein?
| Einsatz | Richtwert Dateigröße | Begründung |
|---|---|---|
| Produktansicht im Shop | 1–3 MB | Lädt auch mobil in wenigen Sekunden |
| Hero-Element auf der Startseite | unter 2 MB | Darf den ersten Eindruck nicht bremsen |
| Konfigurator mit Varianten | 3–8 MB gesamt, gestaffelt geladen | Varianten erst laden, wenn gewählt |
| Maschine, Anlage, digitaler Zwilling | 5–15 MB, mit Ladeanzeige | Nutzer erwarten eine Ladephase |
| Scan oder Gaussian Splat | sehr unterschiedlich | Eigene Regeln, siehe Gaussian Splatting |
Das sind Richtwerte aus der Praxis, keine Normen. Entscheidend ist, was auf einem durchschnittlichen Handy mit mobilem Netz noch angenehm lädt. Mehr zum Ladeverhalten: Three.js Performance.
Schritt 1: Texturen.
- Auflösung anpassen: Auf einem Handy-Bildschirm ist ein Produkt selten größer als 1000 Pixel. 4096er-Texturen sind fast immer zu groß. 2048 für Hauptflächen, 1024 oder 512 für Nebenteile reichen meist.
- Format: PNG nur dort, wo Transparenz nötig ist. Farbtexturen als WebP oder JPEG. Noch besser ist KTX2 mit Basis-Komprimierung: Die Textur bleibt auch im Grafikspeicher komprimiert, das spart Arbeitsspeicher auf dem Handy.
- Kanäle zusammenlegen: Rauheit, Metallanteil und Umgebungsverdeckung lassen sich in einer Textur mit drei Kanälen bündeln. Blender exportiert das beim glTF-Export bereits so, wenn die Materialien sauber aufgebaut sind (Blender-Export).
- Doppelte Texturen entfernen: Oft liegt dieselbe Grafik mehrfach im Paket.
# Alle Texturen auf höchstens 2048 Pixel und WebP
gltf-transform resize modell.glb klein.glb --width 2048 --height 2048
gltf-transform webp klein.glb klein-webp.glb
# Alternativ KTX2 (spart zusätzlich Grafikspeicher, braucht KTX-Software installiert)
gltf-transform uastc modell.glb modell-ktx2.glbNach jedem Schritt das Ergebnis im Viewer prüfen, besonders Normal-Maps: Zu starke Komprimierung macht Oberflächen fleckig.
Schritt 2: Geometrie komprimieren.
Für die Geometrie gibt es zwei verbreitete Verfahren. Draco von Google packt Geometrie sehr stark, braucht zum Entpacken aber einen Decoder, den der Browser zusätzlich lädt. Meshopt ist etwas weniger stark, entpackt aber schneller und eignet sich auch für Animationen. Beide werden von Three.js unterstützt, und beide verlieren bei vernünftigen Einstellungen keine sichtbaren Details. Für einfache Produktmodelle ist der Unterschied gering, bei großen Modellen lohnt ein Vergleich.
# Entfernt Überflüssiges, fasst zusammen, komprimiert Geometrie und Texturen
gltf-transform optimize modell.glb modell-web.glb --compress draco --texture-compress webp
# Variante mit Meshopt statt Draco
gltf-transform optimize modell.glb modell-web.glb --compress meshopt --texture-compress webpoptimize ist für die meisten Modelle der schnellste Weg. Die Einstellungen lassen sich einzeln anpassen, siehe gltf-transform optimize --help.
Schritt 3: Polygone reduzieren.
Erst wenn Texturen und Komprimierung ausgereizt sind und das Modell immer noch zu schwer ist oder im Browser ruckelt, geht es an die Geometrie selbst. In Blender hilft der Modifikator „Decimate“, besser ist oft Handarbeit: unsichtbare Innenteile löschen, Schrauben und Gewinde durch einfache Formen ersetzen, runde Teile mit weniger Segmenten aufbauen und feine Details in eine Normal-Map „backen“. Das Plugin-freie Werkzeug gltf-transform simplify reduziert automatisch, sollte aber vorsichtig eingesetzt werden — harte Kanten und Beschriftungen leiden zuerst.
Werkzeuge im Vergleich.
| Werkzeug | Stärke | Für wen |
|---|---|---|
| gltf-transform (Kommandozeile) | Alles: Analyse, Texturen, Draco, Meshopt, KTX2 | Entwickler, Stapelverarbeitung |
| gltfpack (Kommandozeile) | Sehr schnell, Meshopt und KTX2 | Große Modelle, Automatisierung |
| gltf.report (Browser) | Analyse und einfache Optimierung ohne Installation | Schneller Blick ins Modell |
| Blender | Polygone, Texturen backen, Draco beim Export | Handarbeit am Modell |
Komprimierte Modelle laden.
Ein mit Draco oder Meshopt komprimiertes Modell lädt der normale GLTFLoader von Three.js nicht allein. Er braucht den passenden Decoder. Fehlt er, bleibt die Szene leer, und in der Konsole steht ein Hinweis auf eine fehlende Erweiterung (3D-Modell wird nicht angezeigt).
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
const draco = new DRACOLoader().setDecoderPath('/js/draco/'); // Decoder-Dateien selbst hosten
const ktx2 = new KTX2Loader().setTranscoderPath('/js/basis/').detectSupport(renderer);
const loader = new GLTFLoader()
.setDRACOLoader(draco)
.setKTX2Loader(ktx2)
.setMeshoptDecoder(MeshoptDecoder);
loader.load('/modelle/produkt-web.glb', (gltf) => scene.add(gltf.scene));Die Decoder-Dateien liegen im Three.js-Paket unter examples/jsm/libs. Selbst hosten statt von einem CDN laden — das ist schneller planbar und datenschutzfreundlicher.
Typische Fehler.
- Nur Geometrie komprimiert, die 4K-Texturen aber gelassen — die Datei schrumpft kaum.
- Normal-Maps als JPEG mit starker Komprimierung — Oberflächen bekommen Blockmuster.
- Decoder vergessen — Modell lädt lokal, online nicht.
- Alle Varianten in eine Datei gepackt — bei Konfiguratoren besser Teile einzeln nachladen (3D-Konfigurator).
- Nicht auf echten Geräten getestet — das Laptop mit Grafikkarte sagt nichts über ein drei Jahre altes Handy.
Wenn du Unterstützung brauchst.
Ich optimiere bestehende Modelle für das Web oder baue den kompletten Weg vom Blender-Modell bis zum schnellen Viewer. Einen Überblick über alle Themen gibt die Seite 3D-Webentwicklung, Preisrahmen stehen unter 3D-Konfigurator: Kosten.
Wer das schreibt.
Ich bin Manuel Killert, Web- und 3D-Entwickler aus Quakenbrück. Ich baue interaktive 3D-Anwendungen mit Three.js und Blender — Produktkonfiguratoren, Explosionsansichten, digitale Zwillinge und Scroll-Storys — und bringe sie in WordPress und WooCommerce. Die Live-Demos unten habe ich selbst gebaut, vom Blender-Modell bis zum fertigen Viewer im Browser. Die Probleme in diesem Ratgeber kenne ich deshalb nicht aus der Theorie, sondern aus eigenen Projekten.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — GLB-Datei verkleinern.
Wie verkleinere ich eine GLB-Datei?
Zuerst die Texturen auf 1024 oder 2048 Pixel bringen und als WebP oder KTX2 komprimieren, dann die Geometrie mit Draco oder Meshopt packen. Das Werkzeug gltf-transform erledigt beides mit dem Befehl optimize.
Warum ist meine GLB-Datei so groß?
Meist wegen großer Texturen, etwa mehrerer 4096er-PNG-Dateien. Bei CAD-Daten und Scans ist es oft die Geometrie mit Millionen Dreiecken. gltf-transform inspect zeigt, was wie viel Platz braucht.
Wie groß darf ein 3D-Modell für eine Website sein?
Als Richtwert: Produktansichten 1 bis 3 MB, Hero-Elemente unter 2 MB, Konfiguratoren 3 bis 8 MB gestaffelt geladen. Entscheidend ist, dass es auf einem durchschnittlichen Handy mit mobilem Netz angenehm lädt.
Was ist der Unterschied zwischen Draco und Meshopt?
Draco komprimiert Geometrie sehr stark, braucht aber einen zusätzlichen Decoder. Meshopt ist etwas weniger stark, entpackt schneller und eignet sich auch für Animationen. Beide unterstützt Three.js.
Warum wird mein komprimiertes Modell nicht angezeigt?
Meist fehlt der passende Decoder. Der GLTFLoader von Three.js braucht für Draco den DRACOLoader, für Meshopt den MeshoptDecoder und für KTX2-Texturen den KTX2Loader.
Leidet die Qualität unter der Komprimierung?
Bei vernünftigen Einstellungen sieht man keinen Unterschied. Vorsicht bei Normal-Maps und bei automatischer Polygonreduktion, dort zuerst im Viewer prüfen.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de