GLB 텍스처 압축: KTX2와 WebP

텍스처 변환은 GLB에 포함된 이미지를 바꿉니다. 이 도구에서는 KTX2나 WebP를 선택하면 품질, 축소 비율, 최대 크기 설정을 사용할 수 있습니다. 비교 중에는 삼각형 유지 비율을 그대로 두면 텍스처 설정의 영향을 더 쉽게 확인할 수 있습니다.

뷰어가 지원하는 형식 선택

해상도와 인코딩 품질의 차이

텍스처 배율 50%는 너비와 높이를 각각 절반으로 줄여 밉맵을 제외한 픽셀 수를 4분의 1로 만듭니다. 최대 크기 설정도 출력 해상도를 제한합니다. 인코딩 품질은 이미지 해상도가 아닌 코덱을 제어하므로 WebP 품질 8은 ETC1S나 UASTC 품질 8과 같지 않습니다.

크기를 줄인 뒤 글자, 알파 경계, 미세한 표면 디테일을 확인하세요. 법선 맵은 작은 값 변화도 음영을 바꿀 수 있어 특히 주의가 필요합니다. 애플리케이션에서 사용하는 조명과 확대 수준으로 텍스처를 테스트하세요.

1024 × 1024 텍스처 한 장으로 비교

이 테스트 파일은 자체 제작한 CC0 물결 메시에 그라데이션과 노이즈로 생성한 PNG를 적용하고 네이티브 gltfpack 1.3으로 인코딩한 것입니다. 모든 항목은 Meshopt 압축, 삼각형 8,192개를 사용하며 변환 시 품질 8을 적용했습니다. 수치는 텍스처만이 아닌 전체 GLB 크기입니다. 이 표는 화질이나 GPU 메모리가 아닌 바이트 수를 비교합니다.

같은 표면에서 텍스처 비교

이 확대 이미지들은 메시, 카메라, 조명, 재질 설정이 같습니다. 표에 있는 실제 파일을 Three.js 0.180.0으로 렌더링했습니다. 생성한 텍스처에는 그라데이션과 미세한 노이즈가 있어 해당 디테일을 살펴보기에 적합하지만 글자, 투명도, 법선 맵을 대표하지는 않습니다.

이 이미지에서 ETC1S는 분홍색 표면의 미세한 노이즈 일부를 부드럽게 만들고, UASTC는 점무늬를 더 많이 유지합니다. 크기를 절반으로 줄인 WebP는 작은 변화가 더 뚜렷하게 흐려집니다. 파일 크기 표와 함께 비교해 보세요. 같은 디테일을 보존하는 데 필요한 용량은 인코딩마다 다릅니다.

이미지를 원래 크기로 열어 색상과 표면 디테일의 작은 차이를 비교하세요. 웹페이지에서는 미리 보기가 축소되어 차이가 가려질 수 있습니다. 이 스크린샷은 한 브라우저와 GPU에서 얻은 시각적 참고 자료이며, 품질 점수나 모든 기기의 동일한 렌더링을 보장하지 않습니다.

예시: 텍스처 해상도를 절반으로 줄이고 WebP로 내보내기

gltfpack -i input.glb -o output.glb -cc -tw -tq 8 -tj 1 -ts 0.5 -kn -km -ke

화면에서 ‘작은 파일’을 선택하고 WebP를 고른 뒤 고급 설정에서 텍스처 배율을 50%로 설정하세요. 별도의 픽셀 제한이 필요하지 않다면 최대 텍스처 크기는 그대로 두세요. 사용 전 대상 뷰어에서 결과를 다시 열어 보세요.

Three.js에서 KTX2와 Meshopt 로딩 설정하기 →

엔진 참고 자료: gltfpack