Optimasi GLB beranimasi: studi kasus CesiumMan

Seberapa besar manfaat mengurangi sampel animasi atau segitiga setelah kompresi? Kami menguji CesiumMan, karakter dengan skinning yang tersedia untuk umum, untuk memisahkan dampak setiap keputusan. Meshopt menghasilkan sebagian besar penghematan ukuran; menurunkan laju sampling animasi hanya memberi sedikit penghematan tambahan.

Model dan kondisi pengujian

GLB sumber berukuran 438,044 byte dengan 4,672 segitiga, satu animasi, dan skin dengan 19 sendi. Kami menjalankan gltfpack 1.3 versi native di Windows pada 2 Oktober 2026. Setiap ekspor dimulai dari sumber asli yang sama. Tekstur tetap dalam format aslinya; node bernama, material bernama, dan extras dipertahankan. Sampling animasi tetap pada nilai default 30 FPS, kecuali dalam uji 15 FPS.

Sumber model dan lisensi · Unduh hasil pengukuran dan hash sumber

Bandingkan seluruh file, bukan hanya jumlah key

Key animasi di sini berarti jumlah seluruh elemen accessor input pada semua sampler animasi, bukan jumlah pose yang berbeda atau frame yang dirender. Semua keluaran masih memiliki satu animasi dan 19 sendi skin. Jumlah tersebut tidak membuktikan bahwa pengaturan waktu, transformasi, atau deformasi tetap sama.

Manfaat dari setiap perubahan

Meshopt mengurangi ukuran sumber asli sebesar 52.6% tanpa meminta pengurangan segitiga. Bahkan ekspor Conservative mengubah data animasi: jumlah key turun dari 2,736 menjadi 1,205. Mempertahankan semua segitiga bukanlah pengaturan tanpa kehilangan data.

Pada 15 FPS, jumlah key kembali berkurang hampir separuh, tetapi file hanya 1,528 byte lebih kecil daripada ekspor Meshopt 30 FPS: penghematan 0.74%. Untuk model ini, kami akan mempertahankan 30 FPS kecuali pemeriksaan gerakan terpisah menunjukkan bahwa laju yang lebih rendah layak digunakan. Pengurangan jumlah key tidak menghasilkan persentase pengurangan yang sama pada seluruh file.

Target segitiga 50% tercapai tepat: 2,336 segitiga. Ini menghemat 13,972 byte, atau 6.72%, dibandingkan dengan Meshopt saja. Mengaktifkan penyederhanaan agresif pada target yang sama menghasilkan ukuran byte dan jumlah segitiga yang sama dalam pengujian ini, sehingga tidak memberi manfaat ukuran tambahan. Hasil ini tidak berlaku secara umum untuk mesh lain.

Periksa pose yang sama, lalu periksa gerakannya

Render ini menggunakan animasi pertama pada detik 0.5, kamera dan pencahayaan yang sama, serta Three.js 0.180.0. Tekstur tetap terlihat dan karakter mempertahankan siluet keseluruhannya dalam tampilan ini. Gambar diam tidak dapat memastikan kualitas gerakan atau mengungkap semua kesalahan deformasi; periksa siku, lutut, dan transisi pengulangan dalam penampil Anda sendiri.

Ada juga perbedaan durasi: Three.js melaporkan klip sumber sepanjang 2.0000 detik, sekitar 2.0083 detik untuk ekspor 30 FPS, dan 2.0417 detik untuk ekspor 15 FPS. Jika aplikasi Anda menyinkronkan aksi dengan durasi klip, uji integrasi tersebut alih-alih menganggap pengaturan waktu aslinya tetap terjaga.

Reproduksi hasil ekspor

Gunakan GLB sumber sebagai input.glb untuk setiap perintah di bawah ini. Perintah ini sesuai dengan opsi situs. Keluaran Meshopt memerlukan dekoder yang kompatibel, dan file yang dioptimalkan juga memerlukan dukungan kuantisasi geometri.

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

Pilihan awal kami untuk aset ini adalah Meshopt pada 30 FPS dengan semua segitiga dipertahankan. Pertimbangkan versi dengan separuh segitiga jika biaya pemrosesan geometri menjadi perhatian dan hasil pemeriksaan deformasi memuaskan. Pengukuran ini mencakup satu karakter kecil; pengukuran ini tidak mengukur waktu GPU, kecepatan pemuatan, atau kesetiaan animasi di berbagai perangkat.

Model: CesiumMan, © 2017 Cesium, berlisensi CC BY 4.0. Render menampilkan karya turunan yang kami optimalkan berdampingan dengan model asli. Logo Cesium tetap menjadi bagian dari model; hak merek dagang berlaku secara terpisah. Cesium tidak mendukung situs ini atau perbandingan ini. CC BY 4.0 · Pemberitahuan merek dagang

Memuat model gltfpack di Three.js → · Mengurangi poligon GLB dengan gltfpack →