Optymalizacja animowanego GLB: studium przypadku CesiumMan

Ile zyskasz, zmniejszając liczbę próbek animacji lub trójkątów po kompresji? Przetestowaliśmy CesiumMan, publicznie dostępny model postaci ze skinningiem, aby ocenić te decyzje osobno. Meshopt pozwolił zaoszczędzić najwięcej bajtów; obniżenie częstotliwości próbkowania animacji dało bardzo niewielką dodatkową korzyść.

Model i warunki testu

Źródłowy plik GLB ma 438,044 bajtów, 4,672 trójkątów, jedną animację i skin z 19 stawami. Uruchomiliśmy natywny gltfpack 1.3 w systemie Windows 2 października 2026 r. Każdy eksport rozpoczynał się od tego samego oryginału. Tekstury pozostały w pierwotnym formacie; zachowano nazwane węzły, nazwane materiały i extras. Próbkowanie animacji pozostało na domyślnym poziomie 30 FPS, z wyjątkiem próby z 15 FPS.

Źródło i licencja modelu · Pobierz pomiary i hash pliku źródłowego

Porównuj cały plik, nie tylko liczbę kluczy animacji

Klucze animacji oznaczają tutaj sumę liczebności akcesorów wejściowych we wszystkich samplerach animacji, a nie odrębne pozy czy wyrenderowane klatki. Wszystkie pliki wynikowe nadal mają jedną animację i 19 stawów skina. Te liczby nie dowodzą, że przebieg czasowy, transformacje lub deformacje pozostały niezmienione.

Co dała każda zmiana

Meshopt zmniejszył oryginał o 52.6% bez żądania redukcji trójkątów. Nawet eksport z ustawieniem Conservative zmienił dane animacji: liczba kluczy spadła z 2,736 do 1,205. Zachowanie wszystkich trójkątów nie jest ustawieniem bezstratnym.

Przy 15 FPS liczba kluczy ponownie zmalała niemal o połowę, ale plik był tylko o 1,528 bajtów mniejszy od eksportu Meshopt z 30 FPS: oszczędność wyniosła 0.74%. W przypadku tego modelu zachowalibyśmy 30 FPS, chyba że osobna kontrola ruchu uzasadniłaby niższą częstotliwość. Mniejsza liczba kluczy nie przekłada się na taki sam procent redukcji całego pliku.

Cel zachowania 50% trójkątów został osiągnięty dokładnie: 2,336 trójkątów. Pozwoliło to zaoszczędzić 13,972 bajtów, czyli 6.72%, w porównaniu z samym Meshopt. Włączenie agresywnego upraszczania przy tym samym celu dało w tym teście identyczny rozmiar w bajtach i liczbę trójkątów, więc nie przyniosło dodatkowego zmniejszenia pliku. Nie jest to wynik ogólny dla innych siatek.

Sprawdź tę samą pozę, a następnie ruch

Te rendery wykorzystują pierwszą animację w chwili 0.5 sekundy, tę samą kamerę i oświetlenie oraz Three.js 0.180.0. Tekstury pozostają widoczne, a postać zachowuje w tym ujęciu ogólną sylwetkę. Nieruchomy obraz nie pozwala ustalić jakości ruchu ani wykryć każdego błędu deformacji; sprawdź łokcie, kolana i przejście przy zapętleniu we własnej przeglądarce modeli.

Występuje także różnica w czasie trwania: Three.js podaje 2.0000 sekundy dla klipu źródłowego, około 2.0083 sekundy dla eksportów z 30 FPS i 2.0417 sekundy dla eksportu z 15 FPS. Jeśli aplikacja synchronizuje działania z czasem trwania klipu, przetestuj tę integrację zamiast zakładać, że oryginalny przebieg czasowy został zachowany.

Odtwórz eksporty

Użyj źródłowego GLB jako input.glb w każdym poniższym poleceniu. Polecenia te odpowiadają opcjom witryny. Pliki wynikowe Meshopt wymagają zgodnego dekodera, a zoptymalizowane pliki wymagają również obsługi kwantyzacji geometrii.

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

Dla tego zasobu wybralibyśmy na początek Meshopt z 30 FPS i zachowaniem wszystkich trójkątów. Rozważ wersję z połową trójkątów, gdy koszt przetwarzania geometrii ma znaczenie, a kontrole deformacji wypadają pomyślnie. Pomiary dotyczą jednej niewielkiej postaci; nie mierzą czasu GPU, szybkości ładowania ani wierności animacji na różnych urządzeniach.

Model: CesiumMan, © 2017 Cesium, na licencji CC BY 4.0. Rendery pokazują nasze zoptymalizowane wersje pochodne obok oryginału. Logo Cesium pozostaje częścią modelu; prawa do znaków towarowych są odrębną kwestią. Cesium nie udzieliło poparcia tej witrynie ani temu porównaniu. CC BY 4.0 · Informacja o znakach towarowych

Ładowanie modeli gltfpack w Three.js → · Redukcja wielokątów GLB za pomocą gltfpack →