GLB 파일 압축 — 온라인에서 용량 줄이기

GLB 압축이란 텍스처와 지오메트리를 다시 인코딩해 같은 모델을 더 적은 바이트로 저장하는 것입니다. 절감 효과는 대부분 텍스처에서 나옵니다. 저희가 측정한 Khronos 샘플 모델 8개 중 텍스처가 있는 파일은 모두 이미지가 용량의 대부분을 차지했습니다. 이 GLB 압축 도구는 브라우저 안에서 이 이미지들을 줄이고, 지오메트리를 정리하고, 새 .glb 파일을 만듭니다.

GLB 파일 용량을 줄이면 상품 페이지에서 더 빨리 로드되고, 3D 플랫폼과 마켓플레이스의 업로드 한도를 넘지 않으며, 휴대폰에서 메모리도 덜 씁니다. 그렇다고 모델의 형태, 머티리얼, 애니메이션을 바꿀 필요는 전혀 없습니다.

GLB의 용량은 어디에 쓰이나

GLB에는 세 종류의 데이터가 들어 있습니다. 텍스처(모델 표면을 감싸는 이미지), 지오메트리(정점 위치, 노멀, 삼각형 목록), 그리고 애니메이션입니다. 텍스처는 완전한 이미지 파일 형태로 GLB 안에 저장되며 2048 × 2048 PNG인 경우가 많습니다. 삼각형이 수백 개뿐인 모델도 8MB나 나갈 수 있는 이유입니다. 압축하기 전에 GLB 뷰어에서 파일을 열어 용량 구성을 직접 확인해 보세요.

무손실 정리와 손실 압축

눈에 보이는 변화가 전혀 없는 단계도 있습니다. 중복 데이터 제거, 아무도 쓰지 않는 머티리얼과 텍스처 삭제, 완전히 똑같은 정점 병합이 그렇습니다. 더 큰 절감은 손실 압축에서 나옵니다. 텍스처 크기 축소, WebP나 JPEG로 재인코딩, 더 적은 비트로 정점 위치 저장이 여기에 해당합니다. 손실 압축이라고 눈에 띄게 나빠지는 것은 아니지만 확인해 볼 가치가 있는 부분이며, "압축 전 / 압축 후" 전환 버튼이 바로 그 용도입니다.

GLB의 텍스처는 하나하나가 완전한 이미지 파일이며, 모델이 화면에 표시되면 GPU가 이를 원시 픽셀로 풀어 놓습니다. 2048 × 2048 텍스처는 PNG 파일이 아무리 작아도 밉맵을 빼고 약 16MB의 그래픽 메모리를 차지합니다. 그래서 GLB를 압축할 때 텍스처 설정은 다운로드 용량뿐 아니라 모델을 표시하는 부담까지 좌우합니다.

텍스처 크기 조정: 4096, 2048, 1024, 512 중 무엇을 고를까?

텍스처의 가로와 세로를 절반으로 줄이면 픽셀 수는 4분의 1이 됩니다. 모델이 보통 화면의 일부만 차지하는 웹 페이지에서는 대부분의 상품에 1024px면 충분합니다. 메인 비주얼이나 클로즈업용이라면 2048px를 유지할 만하고, 작은 소품에는 512px가 알맞습니다. 이 GLB 압축 도구는 텍스처를 줄이기만 할 뿐 키우지는 않으며, 가로세로 비율도 유지합니다. 텍스처 하나를 직접 조정하려면 이미지 크기 조정 도구를 사용하세요.

GLB 안의 WebP, PNG, JPEG 비교

PNG와 JPEG는 glTF 자체에 포함된 형식이므로 GLB 파일을 여는 모든 앱이 읽을 수 있습니다. WebP는 대개 파일이 가장 작지만, WebP를 쓰는 GLB는 EXT_texture_webp 확장을 선언하며 파일을 여는 앱이 이 확장을 지원해야 합니다. JPEG는 투명도를 저장할 수 없으므로, 이 도구는 픽셀이 완전히 불투명하지 않은 텍스처를 PNG로 유지합니다. 형식별 장단점은 PNG에서 WebP로 페이지를 참고하세요.

노멀 맵은 더 약하게 압축해야 합니다

노멀 맵은 표면의 방향을 색으로 저장합니다. 그래서 손실 압축이 남기는 블록 모양의 아티팩트가 색 노이즈가 아니라 조명 오류로 나타납니다. 두 프리셋 모두 노멀 맵에는 더 높은 최저 품질(0.9)을 적용합니다. 또한 WebP와 JPEG는 색 정보를 낮은 해상도로 저장하므로, 노멀 맵이나 러프니스·메탈릭·오클루전을 각각 다른 채널에 담은 텍스처에서는 정밀도가 다소 떨어집니다. 그 정밀도가 중요하다면 "사용자 지정"을 선택하고 원래 형식을 유지하세요.

투명도가 있는 텍스처

나뭇잎, 데칼, 유리는 알파 채널에 의존하는 경우가 많습니다. WebP는 알파 채널을 유지하지만 JPEG는 그럴 수 없으므로, JPEG로 저장될 투명 텍스처는 대신 PNG로 저장됩니다. 저희 측정에서도 Lantern과 ToyCar는 이 때문에 각각 한두 개의 텍스처를 PNG로 유지했습니다.

지오메트리는 보통 GLB에서 작은 부분이지만, 촘촘한 메시나 스캔 모델, 애니메이션 캐릭터에서는 파일의 대부분을 차지하기도 합니다. "Web" 프리셋은 지오메트리를 meshopt로 압축하고, 나머지 프리셋은 인코딩은 그대로 둔 채 정리만 합니다.

meshopt 압축이 하는 일

meshopt는 먼저 인접한 데이터끼리 모이도록 정점과 삼각형을 재정렬합니다. 그다음 위치, 노멀, 텍스처 좌표를 32비트 부동소수점 대신 작은 정수로 저장하고(양자화, KHR_mesh_quantization으로 선언), 마지막으로 그 결과를 EXT_meshopt_compression으로 압축합니다. 브라우저에서 매우 빠르게 디코딩되며, three.js, model-viewer, Babylon.js 모두 이를 읽을 수 있습니다.

정점 병합과 중복 제거

내보내기 도구는 같은 정점을 여러 번 기록하거나, 액세서 전체를 중복시키거나, 아무것도 쓰지 않는 머티리얼과 텍스처를 남기는 일이 많습니다. 동일한 정점을 병합하고 쓰이지 않는 데이터를 정리하는 작업은 무손실이며 모든 프리셋에서 실행됩니다. 이것만으로도 작은 Fox 모델의 용량이 32% 줄었습니다.

Draco 모델의 지오메트리를 그대로 두는 이유

Draco는 또 다른 지오메트리 압축 확장으로, meshopt보다 압축률이 높은 경우가 많습니다. Draco로 다시 저장하려면 Draco 인코더가 필요한데, 디코딩한 뒤 Draco 없이 지오메트리를 저장했더니 테스트 메시가 4~13배 커졌습니다. 그래서 이미 Draco를 쓰는 GLB는 텍스처만 다시 인코딩하고, Draco 지오메트리를 포함한 나머지 바이트는 모두 원래 그대로 둡니다. 이렇게 처리된 경우 결과 카드에 표시됩니다.

GLB를 압축하기 전에 모델이 다음에 어디로 갈지 생각해 보세요. 가장 작은 설정은 모든 앱이 읽지는 못하는 glTF 확장에 의존하므로, 알맞은 프리셋은 그에 따라 달라집니다. 프리셋 아래의 안내 문구에 현재 설정으로 추가될 확장이 표시됩니다.

웹 뷰어용: three.js, model-viewer, Babylon.js

Web을 선택하세요. 텍스처를 최대 1024px로 줄여 WebP로 저장하고, 지오메트리를 meshopt로 압축합니다. 브라우저 기반 뷰어와 three.js 또는 Babylon.js 기반 엔진은 이 프리셋이 쓰는 세 가지 확장을 모두 읽으며, 파일 크기는 이 도구가 만드는 것 중 가장 작습니다. Khronos 샘플에서는 48%에서 98.8%까지 줄었습니다.

Blender, Unity, 데스크톱 뷰어용

호환을 선택하세요. 텍스처를 최대 2048px로 유지하고, 불투명한 텍스처는 JPEG로, 투명한 텍스처는 PNG로 저장하며, 확장은 전혀 추가하지 않습니다. 데스크톱 도구와 게임 엔진 임포터는 WebP와 meshopt 지원 수준이 제각각이므로, 파일을 받는 쪽의 소프트웨어를 직접 관리할 수 없을 때는 이런 확장이 없는 파일이 안전합니다.

사용자 지정이 필요한 경우

텍스처를 원래 크기로 유지하거나, 정밀한 데이터 맵을 원래 형식 그대로 두거나, 품질을 높이거나 낮추거나, meshopt를 끄려면 "사용자 지정"을 사용하세요. 설정을 바꿀 때마다 텍스처 표가 업데이트되므로 압축하기 전에 결과를 미리 알 수 있습니다.

얼마나 줄어드는지 보여 드리기 위해, 이 페이지로 Khronos glTF Sample Assets 컬렉션의 GLB 파일을 압축했습니다. 원본 8개를 데스크톱 컴퓨터의 Chrome에서 처리했습니다. "Web" 프리셋에서는 8개 파일이 평균 86%, 중앙값 기준 96% 작아졌습니다. 가장 많이 줄어든 것은 Avocado로, 7.73MB에서 0.09MB가 되었는데, 2048 × 2048 PNG 텍스처 세 장이 파일의 거의 전부를 차지했기 때문입니다. 모델 하나당 약 1초가 걸렸습니다.

"호환" 프리셋은 텍스처를 2048px로 유지하고 WebP를 쓰지 않으므로 절감 폭이 작지만, 그래도 8개 중 4개 모델의 용량을 83~93% 줄였습니다. 가장 적게 줄어든 모델은 지오메트리가 가장 많거나(ToyCar는 삼각형이 약 109,000개) 투명도가 있어 PNG로 남는 텍스처를 가진 모델이었습니다.

GLB 압축은 데이터를 저장하는 방식을 바꿀 뿐, 모델 자체를 바꾸지는 않습니다. 메시, 머티리얼, 노드 이름, 애니메이션 등 glTF 기능은 그대로 유지됩니다. 확인할 것은 새 파일이 요구하는 확장과, 가까이서 본 텍스처의 모습입니다.

결과 파일에 필요할 수 있는 확장

"Web" 프리셋은 EXT_texture_webp, EXT_meshopt_compression, KHR_mesh_quantization을 추가할 수 있으며, 이들은 필수 확장으로 표시됩니다. 따라서 이를 읽지 못하는 앱은 깨진 모델을 보여 주는 대신 지원하지 않는다고 알려 줍니다. "호환" 프리셋은 아무 확장도 추가하지 않습니다. 원래 다른 확장을 쓰던 GLB는 그 확장을 그대로 유지하며, 이 도구가 알지 못하는 확장이 있으면 텍스처만 다시 인코딩하는 방식으로 전환해 이해하지 못하는 부분은 다시 쓰지 않습니다.

애니메이션, 스킨, 모프 타깃

애니메이션, 스킨이 적용된 캐릭터, 모프 타깃은 압축 후에도 그대로 남습니다. meshopt는 애니메이션 키프레임도 압축하며, 양자화는 일반적인 크기의 모델에 충분한 정밀도를 유지합니다. 아주 큰 장면이나 밀리미터 단위로 측정하는 엔지니어링 모델이라면 와이어프레임을 켜고 결과를 비교하거나, "사용자 지정"에서 meshopt를 끄세요.

KTX2 텍스처는 그대로 둡니다

이미 KTX2(KHR_texture_basisu)로 저장된 텍스처는 GPU용으로 압축되어 있어 메모리에서도 작게 유지됩니다. 이 도구는 이런 텍스처를 일반 이미지로 되돌리지 않고 그대로 둡니다.

GLB를 압축했는데 거의 줄지 않았다면, 대개 패널에서 그 이유를 확인할 수 있습니다. 파일이 이미 압축되어 있을 수 있습니다. 이미 작은 WebP나 JPEG 이미지인 텍스처는 더 줄어드는 일이 드물고, 이 도구는 다시 인코딩해도 작아지지 않는 텍스처는 원본을 유지합니다. 결과가 전혀 작아지지 않는다면 다운로드할 파일도 없는데, 이는 의도된 동작입니다.

촘촘한 스캔과 포토그래메트리

스캔한 물체와 포토그래메트리 모델은 삼각형이 수십만, 수백만 개에 이르는 경우가 많고, 이때는 텍스처가 아니라 지오메트리가 파일을 채웁니다. meshopt도 도움이 되지만, 근본적인 해결책은 삼각형 수를 줄이는 것입니다. Blender의 Decimate 모디파이어 같은 3D 편집기 기능으로 메시를 간소화한 뒤 그 결과를 여기서 압축하세요.

외부 파일이 있는 .gltf 압축하기

.gltf는 지오메트리와 텍스처를 별도 파일에 저장합니다. 이 파일들을 모두 선택하거나 폴더째로 끌어다 놓으면, 도구가 모든 것을 압축된 .glb 하나로 묶어 줍니다. Draco를 쓰는 .gltf는 먼저 .glb로 내보내야 합니다. Draco 데이터는 GLB 안에서만 그대로 유지되기 때문입니다.

명령줄에서 같은 작업 하기

이 페이지는 오픈 소스 라이브러리인 glTF Transform을 브라우저에서 실행합니다. 빌드 파이프라인에서 많은 파일을 압축하려면 glTF Transform의 명령줄 도구로 비슷한 작업을 할 수 있습니다. 예를 들면 gltf-transform optimize input.glb output.glb --compress meshopt --texture-compress webp --texture-size 1024와 같습니다.

많은 온라인 GLB 압축 도구는 파일을 서버에 업로드하며, 일주일에 압축할 수 있는 파일 수를 제한하는 곳도 있습니다. 이 도구는 브라우저 탭 안의 백그라운드 워커에서 모든 작업을 처리합니다. 모델은 디스크에서 읽혀 메모리에서 압축된 뒤 곧바로 다운로드 파일로 저장됩니다. 출시 전 제품, 고객 작업물, NDA가 걸린 자료라면 특히 중요한 부분입니다. 탭을 닫으면 아무것도 남지 않습니다. 같은 방식으로 작동하는 다른 도구는 전체 무료 도구에서 확인하세요.