Optimierung animierter GLB-Dateien: eine CesiumMan-Fallstudie

Wie viel bringt es, nach der Komprimierung die Animationsabtastung oder die Dreieckszahl zu reduzieren? Wir haben CesiumMan, eine öffentlich verfügbare Figur mit Skinning, getestet, um diese Entscheidungen getrennt zu betrachten. Meshopt sparte die meisten Bytes; eine geringere Animationsabtastrate brachte nur sehr wenig zusätzlich.

Das Modell und die Testbedingungen

Die ursprüngliche GLB-Datei ist 438,044 Bytes groß und enthält 4,672 Dreiecke, eine Animation und ein Skin mit 19 Gelenken. Wir führten natives gltfpack 1.3 am 2. Oktober 2026 unter Windows aus. Jeder Export ging vom selben Original aus. Die Texturen blieben in ihrem ursprünglichen Format; benannte Knoten, benannte Materialien und Extras wurden beibehalten. Die Animationsabtastrate blieb beim Standardwert von 30 FPS, außer im Versuch mit 15 FPS.

Modellquelle und Lizenz · Messwerte und Quell-Hash herunterladen

Vergleichen Sie die ganze Datei, nicht nur die Anzahl der Animationsschlüssel

EinstellungDateigröße (Byte)DreieckeAnimationsschlüssel
Original438,0444,6722,736
Konservativ269,4524,6721,205
Meshopt · 30 FPS207,7684,6721,205
Meshopt · 15 FPS206,2404,672625
Meshopt · Beibehaltung von 50% der Dreiecke193,7962,3361,205

Animationsschlüssel bezeichnet hier die Summe der Input-Accessor-Anzahlen über alle Animationssampler, nicht unterschiedliche Posen oder gerenderte Frames. Alle Ausgaben enthalten weiterhin eine Animation und 19 Skin-Gelenke. Diese Zahlen belegen nicht, dass Zeitablauf, Transformationen oder Verformungen unverändert sind.

Was die einzelnen Änderungen gebracht haben

Meshopt verkleinerte das Original um 52.6%, ohne dass eine Dreiecksreduktion angefordert wurde. Selbst der Export mit der Einstellung Conservative änderte Animationsdaten: Die Anzahl der Schlüssel sank von 2,736 auf 1,205. Alle Dreiecke beizubehalten ist keine verlustfreie Einstellung.

Bei 15 FPS halbierte sich die Anzahl der Schlüssel nahezu erneut, doch die Datei war nur 1,528 Bytes kleiner als der Meshopt-Export mit 30 FPS: eine Ersparnis von 0.74%. Bei diesem Modell würden wir 30 FPS beibehalten, sofern eine separate Bewegungsprüfung die niedrigere Rate nicht rechtfertigt. Weniger Schlüssel bedeuten nicht dieselbe prozentuale Verkleinerung der gesamten Datei.

Das Ziel von 50% der Dreiecke wurde exakt erreicht: 2,336 Dreiecke. Gegenüber Meshopt allein wurden 13,972 Bytes oder 6.72% eingespart. Aggressive Vereinfachung bei demselben Ziel ergab in diesem Test dieselbe Dateigröße in Bytes und dieselbe Dreieckszahl, bot hier also keinen Größenvorteil. Dieses Ergebnis lässt sich nicht allgemein auf andere Meshes übertragen.

Prüfen Sie dieselbe Pose und anschließend die Bewegung

CesiumMan — Original
Original
CesiumMan — Meshopt · 30 FPS
Meshopt · 30 FPS
CesiumMan — Meshopt · 15 FPS
Meshopt · 15 FPS
CesiumMan — Beibehaltung von 50% der Dreiecke
Beibehaltung von 50% der Dreiecke

Diese Renderbilder verwenden die erste Animation bei 0.5 Sekunden, dieselbe Kamera und Beleuchtung sowie Three.js 0.180.0. Die Texturen bleiben sichtbar, und die Figur behält in dieser Ansicht ihre Gesamtsilhouette. Ein Standbild kann weder die Bewegungsqualität belegen noch jeden Verformungsfehler zeigen; prüfen Sie Ellbogen, Knie und den Übergang beim Wiederholen der Animation in Ihrem eigenen Viewer.

Auch der Zeitablauf unterscheidet sich: Three.js meldet für den ursprünglichen Clip 2.0000 Sekunden, für die Exporte mit 30 FPS etwa 2.0083 Sekunden und für den Export mit 15 FPS 2.0417 Sekunden. Wenn Ihre Anwendung Aktionen mit der Clipdauer synchronisiert, testen Sie diese Integration, statt davon auszugehen, dass der ursprüngliche Zeitablauf erhalten blieb.

Exporte reproduzieren

Verwenden Sie die ursprüngliche GLB-Datei für jeden der folgenden Befehle als input.glb. Diese Befehle entsprechen den Optionen der Website. Meshopt-Ausgaben benötigen einen kompatiblen Decoder; die optimierten Dateien erfordern außerdem Unterstützung für Geometriequantisierung.

gltfpack -i input.glb -o conservative.glb -kn -km -ke
gltfpack -i input.glb -o meshopt.glb -cc -kn -km -ke
gltfpack -i input.glb -o fps15.glb -cc -af 15 -kn -km -ke
gltfpack -i input.glb -o half.glb -si 0.5 -cc -kn -km -ke

Für dieses Asset würden wir zunächst Meshopt mit 30 FPS und Beibehaltung aller Dreiecke wählen. Ziehen Sie die Version mit halber Dreieckszahl in Betracht, wenn der Geometrieaufwand wichtig ist und die Verformungsprüfungen erfolgreich sind. Diese Messungen betreffen eine einzige kleine Figur; sie messen weder GPU-Zeit noch Ladegeschwindigkeit oder Animationstreue auf verschiedenen Geräten.

Modell: CesiumMan, © 2017 Cesium, lizenziert unter CC BY 4.0. Die Renderbilder zeigen unsere optimierten Ableitungen neben dem Original. Das Cesium-Logo bleibt Teil des Modells; Markenrechte sind gesondert zu betrachten. Cesium hat weder diese Website noch diesen Vergleich befürwortet. CC BY 4.0 · Markenhinweis

gltfpack-Modelle in Three.js laden → · GLB-Polygonreduktion mit gltfpack →

Optimierer öffnen ↗