3D 모델 작업 시 효율적인 파일 관리와 최적화를 위해, 텍스처 이미지를 PNG에서 WebP로 변환하고, 3D 모델 파일을 GLTF에서 GLB로 변환하는 과정을 진행했습니다. 아래는 그 작업 과정을 정리한 내용입니다.

저는 용량을 많이 차지하고 웹에서 3D 렌더링 관련 항목을 가져오는 시간을 최대한 줄여보기위해 이 작업을 시작했습니다.
제가 가장 많은 고민 한 것은 높은 용량의 texture, GLTF의 용량을 줄이기 위해 많은 고민을 했습니다.

---

나는 어떻게 용량을 줄였는가?

21개의 texture 파일과 GLTF는 많은 용량을 차지하고 있습니다.

하지만 GLB로 변환 한 후 용량은 28.8MB로 대략 8배 정도 줄어든 모습을 볼 수 있습니다.

GLB는 GLTF JSON과 텍스쳐를 하나로 합친 바이너리 파일입니다.

제가 작업한 과정은 아래와 같습니다.

1. PNG texture를 WebP 형식으로 변환 (WebP 품질을 50%로 지정)
2. GLTF 파일과 WebP texture를 하나의 GLB 파일로 변환

texture를 WebP 로 변환 한 이유는 아래와 같습니다.

일반적으로 사용되는 이미지 형식인 PNG, JPG, WebP의 파일 크기를 비교해보면 같은 이미지일 때 보통 PNG가 가장 크고 WebP가 가장 작으므로 일반 이미지 형식 중에서는 WebP를 사용하는 것이 이득이 있기 때문입니다.

WebP의 경우 다양한 손실 압축 기법을 사용 가능하고, PNG 또한 일부 이미지의 경우 추가로 비손실 압축이 가능하지만 JPG와 WebP는 손실 압축 기법 사용 시 원본 이미지와 색상이나 디테일에 차이가 발생할 수 있기 때문에, 실제 3D 모델에 추가 압축 기법을 적용한 텍스처를 사용하면서 확인해보는 것이 중요합니다.

하지만 제가 결과물을 확인해보니 크게 차이가 없었습니다. 물론 웹에서 다양한 사물이나 게임을 구현하며 좋은 퀄리티를 보장해야 한다는 조건이 있었다면 또 다를 수 있었겠지만, 결과물의 차이는 크게없거나 없었다고 느낄정도였습니다.

하지만 여기서 저를 또 현혹시킨 한가지가 있었습니다. 바로 KTX2 입니다.

---

그럼 KTX2는 뭔데?

Basis Universal 텍스처

KTX2/basis는 BasisU(Basis Universal) Supercompressed GPU Texture Codec을 사용하는 텍스처 이미지 형식으로, Basis Universal 텍스처는 PNG, JPG 등의 일반 이미지와 GPU에서 사용하는 데이터의 중간 단계로, 빠르게 다양한 GPU 압축 픽셀 형식으로 transcode될 수 있습니다. 특히 일반 이미지와 같은 크기일 때 GPU 내에서 훨씬 더 작은 메모리 용량을 차지하며 모바일/데스크톱 환경의 GPU가 각각 요구하는 적절한 형식으로 빠르게 변환될 수 있는 장점이 있습니다.

높은 품질의 UASTC 모드와 낮은 품질의 ETC1S 모드가 있는데 아래의 이미지를 통해 차이를 확인해보세요.

그럼 WebP와 KTX2의 차이점은?

PNG to Webp Textrue + GLB

PNG to KTX2 Textrue (UASTC) + GLB

두 이미지의 차이가 안느껴지시나요? 아니요 정말 엄청난 차이를 보입니다.
위 이미지의 우측 상단의 stats를 보면 ...

GPU의 VRAM이 무려 1.9 GB => 367.4 MB만 차지한다는 기엄을 토할 하드웨어 최적화를 가집니다.

저는 이 결과물을 보고 정말 정신이 나가는 줄 알았습니다.

the Khronos Group 이 제공하는 KTX Software 와 gltf-transform를 사용했습니다.
또한 이 KTX2 texture 를 이용하기 위해서는 Three.js에서 제공하는 별도의 Transcoder를 사용해야 합니다.
제 경우 UASTC는 생각보다 압축결과물의 용량차이가 없어 ETC1S 모드를 이용했습니다.

삽질 . . .

변환 과정에서 좀 어려움을 많이 겪었는데 GLTF 에서 KTX GLB 로 변환하면 문제가 발생했고
PNG Texture + GLTF => GLB 변환 => GLB => ETC1S KTX GLB 변환 이 순서로 진행했을 때 문제가 없었습니다.

결과

품질은 좀 낮지만 저는 최대한 빠른 속도로 덤으로 KTX2 ETC1S 를 통해 더욱 최적화된 하드웨어 성능을 가질 수 있었습니다.

기존에 PNG + GLTF 를 이용한 방법으론 파일들을 불러오고 화면에 그려지는 시간이 DevTools의 성능통계 에서 7.8초가 소요 됐었는데요

지금은 5.2초 밖에 소요되지 않고 한번 로드 후 재호출을 하면 3.73초 밖에 걸리지 않습니다.
또한 VRAM 은 1.9GB 에서 261.1MB 로 줄어들었습니다.
거기에 227MB 에 다다르던 Texture 를 단 46.3MB 으로 바꿨내요

DevTools Netword, 성능통계

F1 INFO Home

순수 서칭 및 변환 하는 시간만 20시간을 소요했내요. 하지만 정말 즐거웠습니다. 용량과 First Contentful Paint 시간을 줄이고 거기에 하드웨어 적인 성능까지 덤으로 챙길 수 있는 아주 기분좋은 변화였습니다.

참고

Don McCurdy - https://www.donmccurdy.com/2024/02/11/web-texture-formats/
Naver D3 - https://d2.naver.com/helloworld/6152907
KTX Tools Reference 4.3.2 - https://github.khronos.org/KTX-Software/ktxtools/toktx.html
glTF Transform - https://gltf-transform.dev