Animasyonlu GLB optimizasyonu: CesiumMan vaka çalışması

Sıkıştırmadan sonra animasyon örneklerini veya üçgenleri azaltmak ne kadar kazanç sağlar? Bu kararları ayrı ayrı değerlendirmek için herkese açık, iskelete bağlı bir karakter olan CesiumMan'i test ettik. Bayt tasarrufunun çoğunu Meshopt sağladı; animasyon örnekleme sıklığını düşürmek çok az ek kazanç getirdi.

Model ve test koşulları

Kaynak GLB, 438,044 bayt boyutundadır ve 4,672 üçgen, bir animasyon ve 19 eklemli bir skin içerir. 2 Ekim 2026 tarihinde Windows üzerinde yerel gltfpack 1.3 çalıştırdık. Her dışa aktarım aynı orijinal dosyadan başladı. Dokular orijinal biçimlerinde kaldı; adlandırılmış düğümler, adlandırılmış malzemeler ve extras korundu. Animasyon örneklemesi, 15 FPS denemesi dışında varsayılan 30 FPS değerinde kaldı.

Model kaynağı ve lisansı · Ölçümleri ve kaynak dosyanın hash değerini indirin

Yalnızca anahtar sayısını değil, dosyanın tamamını karşılaştırın

Burada animasyon anahtarları, farklı pozları veya render edilen kareleri değil, animasyon örnekleyicilerindeki girdi erişimcisi eleman sayılarının toplamını ifade eder. Tüm çıktılarda hâlâ bir animasyon ve 19 skin eklemi bulunur. Bu sayılar zamanlamanın, dönüşümlerin veya deformasyonun değişmediğini kanıtlamaz.

Her değişiklik ne kazandırdı?

Meshopt, üçgen azaltma talep edilmeden orijinal dosyayı 52.6% küçülttü. Conservative ayarıyla yapılan dışa aktarım bile animasyon verilerini değiştirdi: anahtar sayısı 2,736'dan 1,205'e düştü. Tüm üçgenleri korumak, kayıpsız bir ayar değildir.

15 FPS'te anahtar sayısı yeniden neredeyse yarıya indi, ancak dosya 30 FPS Meshopt çıktısından yalnızca 1,528 bayt daha küçüktü: 0.74% tasarruf. Bu model için, ayrı bir hareket kontrolü daha düşük hızı haklı çıkarmadıkça 30 FPS'i korurduk. Daha az anahtar, dosyanın tamamında aynı oranda küçülme sağlamaz.

Üçgenlerin 50% oranında korunması hedefine tam olarak ulaşıldı: 2,336 üçgen. Yalnızca Meshopt kullanımına kıyasla 13,972 bayt, yani 6.72% tasarruf sağlandı. Aynı hedefte agresif sadeleştirmeyi etkinleştirmek bu testte aynı bayt boyutunu ve üçgen sayısını üretti; dolayısıyla burada boyut avantajı sağlamadı. Bu sonuç diğer mesh'ler için genellenemez.

Önce aynı pozu, ardından hareketi inceleyin

Bu render görüntüleri, ilk animasyonun 0.5 saniyesini, aynı kamera ve aydınlatmayı ve Three.js 0.180.0 sürümünü kullanır. Dokular görünür kalır ve karakter bu görünümde genel siluetini korur. Sabit bir görüntü, hareket kalitesini doğrulayamaz veya her deformasyon hatasını ortaya çıkaramaz; dirsekleri, dizleri ve döngü geçişini kendi görüntüleyicinizde inceleyin.

Zamanlamada da bir fark vardır: Three.js, kaynak klibin süresini 2.0000 saniye, 30 FPS çıktılarının süresini yaklaşık 2.0083 saniye ve 15 FPS çıktısının süresini 2.0417 saniye olarak bildirir. Uygulamanız eylemleri klip süresiyle eşzamanlıyorsa orijinal zamanlamanın korunduğunu varsaymak yerine bu entegrasyonu test edin.

Dışa aktarımları yeniden üretin

Aşağıdaki her komut için kaynak GLB dosyasını input.glb olarak kullanın. Bu komutlar sitenin seçenekleriyle eşleşir. Meshopt çıktıları uyumlu bir kod çözücü gerektirir; optimize edilmiş dosyalar ayrıca geometri kuantizasyonu desteği de gerektirir.

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

Bu varlık için başlangıç tercihimiz, tüm üçgenleri koruyarak 30 FPS'te Meshopt kullanmak olurdu. Geometri maliyeti önemliyse ve deformasyon kontrolleri başarılıysa yarı üçgenli sürümü değerlendirin. Bu ölçümler tek bir küçük karakteri kapsar; cihazlar genelinde GPU süresini, yükleme hızını veya animasyon doğruluğunu ölçmez.

Model: CesiumMan, © 2017 Cesium, CC BY 4.0 lisansıyla sunulmaktadır. Render görüntüleri, optimize ettiğimiz türevleri orijinalin yanında gösterir. Cesium logosu modelin bir parçası olarak kalır; ticari marka hakları ayrıdır. Cesium bu siteyi veya bu karşılaştırmayı onaylamamıştır. CC BY 4.0 · Ticari marka bildirimi

gltfpack modellerini Three.js'te yükleme → · gltfpack ile GLB poligon azaltma →