Optimalisatie van geanimeerde GLB-bestanden: een CesiumMan-casestudy

Hoeveel win je door na compressie minder animatiesamples of driehoeken te gebruiken? We testten CesiumMan, een openbaar beschikbaar personage met skinning, om die keuzes afzonderlijk te beoordelen. Meshopt bespaarde de meeste bytes; een lagere samplefrequentie voor de animatie leverde nauwelijks extra winst op.

Het model en de testomstandigheden

Het oorspronkelijke GLB-bestand is 438,044 bytes groot en bevat 4,672 driehoeken, één animatie en een skin met 19 gewrichten. We draaiden native gltfpack 1.3 op Windows op 2 oktober 2026. Elke export begon met hetzelfde origineel. Texturen behielden hun oorspronkelijke formaat; benoemde knooppunten, benoemde materialen en extras bleven behouden. De samplefrequentie voor de animatie bleef op de standaardwaarde van 30 FPS, behalve bij de proef met 15 FPS.

Bron en licentie van het model · Metingen en hash van het bronbestand downloaden

Vergelijk het hele bestand, niet alleen het aantal animatiesleutels

Met animatiesleutels bedoelen we hier de som van de aantallen in de input-accessors van alle animatiesamplers, niet het aantal afzonderlijke poses of gerenderde frames. Alle uitvoerbestanden bevatten nog steeds één animatie en 19 skingewrichten. Die aantallen bewijzen niet dat timing, transformaties of vervormingen ongewijzigd zijn.

Wat elke wijziging opleverde

Meshopt verkleinde het origineel met 52.6% zonder dat driehoeksreductie was aangevraagd. Zelfs de export met de instelling Conservative veranderde animatiegegevens: het aantal sleutels daalde van 2,736 naar 1,205. Alle driehoeken behouden is geen verliesvrije instelling.

Bij 15 FPS werd het aantal sleutels opnieuw bijna gehalveerd, maar het bestand was slechts 1,528 bytes kleiner dan de Meshopt-export met 30 FPS: een besparing van 0.74%. Voor dit model zouden we 30 FPS behouden, tenzij een afzonderlijke bewegingscontrole de lagere frequentie rechtvaardigde. Minder sleutels leveren niet dezelfde procentuele verkleining van het hele bestand op.

Het doel van 50% van de driehoeken werd exact bereikt: 2,336 driehoeken. Dat bespaarde 13,972 bytes, ofwel 6.72%, ten opzichte van alleen Meshopt. Agressieve vereenvoudiging bij hetzelfde doel leverde in deze test dezelfde bestandsgrootte in bytes en hetzelfde aantal driehoeken op, en bood hier dus geen groottevoordeel. Dit resultaat geldt niet algemeen voor andere meshes.

Bekijk dezelfde pose en controleer daarna de beweging

Deze renders gebruiken de eerste animatie op 0.5 seconden, dezelfde camera en belichting, en Three.js 0.180.0. Texturen blijven zichtbaar en het personage behoudt in dit aanzicht zijn algemene silhouet. Een stilstaand beeld kan de bewegingskwaliteit niet aantonen en niet elke vervormingsfout laten zien; controleer ellebogen, knieën en de overgang bij het herhalen van de animatie in je eigen viewer.

Er is ook een timingverschil: Three.js rapporteert een oorspronkelijke clip van 2.0000 seconden, ongeveer 2.0083 seconden voor de exports met 30 FPS en 2.0417 seconden voor de export met 15 FPS. Als je toepassing acties met de clipduur synchroniseert, test dan die integratie in plaats van aan te nemen dat de oorspronkelijke timing behouden is gebleven.

De exports reproduceren

Gebruik het oorspronkelijke GLB-bestand als input.glb voor elke onderstaande opdracht. Deze opdrachten komen overeen met de opties van de site. Meshopt-uitvoer vereist een compatibele decoder en de geoptimaliseerde bestanden vereisen ook ondersteuning voor geometriekwantisatie.

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

Onze eerste keuze voor dit model zou Meshopt met 30 FPS zijn, met behoud van alle driehoeken. Overweeg de versie met de helft van de driehoeken als de geometriekosten belangrijk zijn en de vervormingscontroles slagen. Deze metingen gaan over één klein personage; ze meten geen GPU-tijd, laadsnelheid of animatienauwkeurigheid op verschillende apparaten.

Model: CesiumMan, © 2017 Cesium, gelicentieerd onder CC BY 4.0. De renders tonen onze geoptimaliseerde afgeleide versies naast het origineel. Het Cesium-logo blijft onderdeel van het model; merkrechten staan hier los van. Cesium heeft deze site of deze vergelijking niet onderschreven. CC BY 4.0 · Merkenvermelding

gltfpack-modellen laden in Three.js → · GLB-polygonen verminderen met gltfpack →