애니메이션 GLB 최적화: CesiumMan 사례 연구
압축 후 애니메이션 샘플이나 삼각형을 줄이면 얼마나 더 절약할 수 있을까요? 각 선택의 효과를 구분하기 위해 공개 스키닝 캐릭터인 CesiumMan을 테스트했습니다. 용량 감소의 대부분은 Meshopt에서 얻었으며, 애니메이션 샘플링을 낮춰 얻은 추가 효과는 매우 작았습니다.
모델과 테스트 조건
원본 GLB는 438,044바이트이며 삼각형 4,672개, 애니메이션 1개, 관절 19개로 구성된 스킨을 포함합니다. 2026년 10월 2일 Windows에서 네이티브 gltfpack 1.3을 실행했습니다. 모든 내보내기는 동일한 원본에서 시작했습니다. 텍스처는 원래 형식을 유지했으며, 이름이 지정된 노드와 머티리얼 및 extras를 보존했습니다. 애니메이션 샘플링은 15 FPS 테스트를 제외하고 기본값인 30 FPS를 유지했습니다.
모델 출처 및 라이선스 · 측정 데이터 및 원본 해시 다운로드
키 개수뿐 아니라 파일 전체를 비교하세요
| 설정 | 파일 크기(바이트) | 삼각형 | 애니메이션 키 |
|---|---|---|---|
| 원본 | 438,044 | 4,672 | 2,736 |
| 보수적 최적화 | 269,452 | 4,672 | 1,205 |
| Meshopt · 30 FPS | 207,768 | 4,672 | 1,205 |
| Meshopt · 15 FPS | 206,240 | 4,672 | 625 |
| Meshopt · 삼각형 50% 유지 | 193,796 | 2,336 | 1,205 |
여기서 애니메이션 키는 애니메이션 샘플러 전체의 입력 접근자 요소 수를 합한 값이며, 서로 다른 포즈나 렌더링 프레임 수를 뜻하지 않습니다. 모든 출력에는 여전히 애니메이션 1개와 스킨 관절 19개가 있습니다. 이 개수만으로 타이밍, 변환 또는 변형이 그대로 유지되었다고 입증할 수는 없습니다.
각 변경으로 얻은 효과
Meshopt는 삼각형 감소를 요청하지 않고도 원본 크기를 52.6% 줄였습니다. Conservative 설정으로 내보내도 애니메이션 데이터는 바뀌었습니다. 키 개수가 2,736개에서 1,205개로 줄었습니다. 모든 삼각형을 유지한다고 해서 무손실 설정인 것은 아닙니다.
15 FPS에서는 키 개수가 다시 거의 절반으로 줄었지만, 파일은 30 FPS Meshopt 출력보다 1,528바이트만 작아졌습니다. 절감률은 0.74%입니다. 이 모델에서는 별도의 동작 검토를 통해 낮은 샘플링 레이트가 적합하다고 확인하지 않는 한 30 FPS를 유지하겠습니다. 키 개수가 줄어든 비율만큼 전체 파일 크기가 줄어드는 것은 아닙니다.
삼각형 50% 목표는 정확히 2,336개로 달성되었습니다. Meshopt만 적용한 결과에 비해 13,972바이트, 즉 6.72%를 절약했습니다. 동일한 목표에서 적극적인 단순화를 활성화해도 이 테스트에서는 바이트 크기와 삼각형 개수가 같아 추가적인 용량 이점이 없었습니다. 다른 메시에도 일반적으로 적용되는 결과는 아닙니다.
같은 포즈를 살펴본 다음 동작을 확인하세요
이 렌더링은 첫 번째 애니메이션의 0.5초 시점을 동일한 카메라와 조명, Three.js 0.180.0으로 표시합니다. 이 시점에서는 텍스처가 보이며 캐릭터의 전체적인 실루엣도 유지됩니다. 정지 이미지만으로 동작 품질을 확인하거나 모든 변형 오류를 발견할 수는 없습니다. 사용 중인 뷰어에서 팔꿈치, 무릎, 루프 전환 부분을 확인하세요.
시간에도 차이가 있습니다. Three.js가 보고한 원본 클립 길이는 2.0000초이며, 30 FPS 출력은 약 2.0083초, 15 FPS 출력은 2.0417초입니다. 애플리케이션이 클립 길이에 맞춰 동작을 동기화한다면, 원래 타이밍이 보존되었다고 가정하지 말고 해당 연동을 테스트하세요.
내보내기 재현하기
아래의 모든 명령어에서 원본 GLB를 input.glb로 사용하세요. 이 명령어는 사이트의 옵션과 일치합니다. Meshopt 출력에는 호환되는 디코더가 필요하며, 최적화된 파일에는 지오메트리 양자화 지원도 필요합니다.
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이 에셋에서는 모든 삼각형을 유지하는 30 FPS Meshopt를 먼저 선택하겠습니다. 지오메트리 처리 비용이 중요하고 변형 검사에 문제가 없다면 삼각형을 절반으로 줄인 버전을 고려하세요. 이 측정은 작은 캐릭터 하나만 다루며, 기기별 GPU 시간, 로딩 속도 또는 애니메이션 충실도를 측정한 것은 아닙니다.
모델: CesiumMan, © 2017 Cesium, CC BY 4.0 라이선스. 렌더링에는 당사가 최적화한 파생 모델과 원본을 나란히 표시했습니다. Cesium 로고는 모델의 일부로 유지되며, 상표권은 별도로 적용됩니다. Cesium은 이 사이트나 비교를 보증하지 않았습니다. CC BY 4.0 · 상표 고지
Three.js에서 gltfpack 모델 불러오기 → · gltfpack으로 GLB 폴리곤 줄이기 →
최적화 도구 열기 ↗