Draco & Three.js: 3D-Modelle auf ein Fünftel der Größe schrumpfen

Was ist Draco?

Draco ist eine Open-Source-Bibliothek von Google zur Komprimierung von 3D-Geometrien und Punktwolken. Das Ziel ist simpel: 3D-Modelle sollen im Web schneller laden, ohne dass die visuelle Qualität leidet.

Ein unkomprimiertes .glb-Modell kann leicht mehrere Megabyte groß sein. Mit Draco lässt sich das oft auf 10–20% der Originalgröße reduzieren – ohne merklichen Qualitätsverlust für den Betrachter.

Wie funktioniert Draco?

Draco komprimiert die Geometriedaten eines 3D-Modells – also Vertices, Normalen, UV-Koordinaten und Indizes. Es nutzt dabei eine Kombination aus:

• Quantisierung – Koordinaten werden auf weniger Bits reduziert (z. B. von 32-Bit Float auf 11-Bit Integer)
• Predictive Encoding – statt absolute Werte werden Differenzen zum vorherigen Vertex gespeichert
• Entropy Coding – häufige Werte bekommen kürzere Codes (ähnlich wie ZIP)

Das Ergebnis ist eine .glb-Datei mit Draco-komprimierten Buffern, die im Browser zur Laufzeit dekodiert wird.

Modell mit Draco komprimieren

Zum Komprimieren eignet sich am besten gltf-transform – ein Node.js-Tool das direkt in der Kommandozeile funktioniert.

Installation:

npm install --global @gltf-transform/cli

Modell komprimieren:

gltf-transform draco input.glb output.glb

Mit Kontrolle über die Quantisierungsstufen (weniger Bits = kleinere Datei, etwas weniger Präzision):

gltf-transform draco input.glb output.glb --quantize-position 10 --quantize-normal 8

Als Faustregel: Position mit 10–14 Bit, Normalen mit 8 Bit – das gibt die beste Balance aus Dateigröße und Qualität.

Draco-Modell in Three.js laden

Three.js kann Draco-komprimierte Modelle nicht von Haus aus dekodieren. Du brauchst den DRACOLoader als Zusatz zum GLTFLoader.

Zuerst die Draco-Decoder-Dateien aus dem Three.js-Paket in deinen Public-Ordner kopieren:

node_modules/three/examples/jsm/libs/draco/

Den Inhalt dieses Ordners z. B. nach public/draco/ kopieren. Dann im Code:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');

const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);

loader.load('/models/meinmodell.glb', (gltf) => {
    scene.add(gltf.scene);
});

Wichtig: Der setDecoderPath muss auf den Ordner zeigen, in dem die Draco WASM-Dateien (draco_decoder.wasm etc.) liegen. Three.js lädt diese zur Laufzeit nach – sie müssen also öffentlich erreichbar sein.

Lohnt sich Draco immer?

Nicht unbedingt. Ein paar Punkte die ich aus der Praxis mitgenommen habe:

• Kleine Modelle unter ~100 KB profitieren kaum – der Overhead durch den Decoder überwiegt
• Viele kleine Modelle auf einer Seite: lieber zu einem einzigen .glb zusammenfassen
• Animierte Modelle werden durch Draco meist weniger stark komprimiert, weil die Animationsdaten nicht betroffen sind
• Den DRACOLoader einmal anlegen und wiederverwenden – nicht für jedes Modell neu instanziieren

Kurz zusammengefasst

1. Draco komprimiert 3D-Geometrien auf bis zu 10–20% der Originalgröße
2. Komprimieren mit gltf-transform draco input.glb output.glb
3. In Three.js: DRACOLoader einrichten und dem GLTFLoader übergeben
4. Draco-Decoder-Dateien müssen öffentlich erreichbar sein (setDecoderPath)
5. Bei kleinen Modellen den Mehraufwand abwägen – nicht immer sinnvoll