GLB 텍스처 압축: KTX2 및 WebP

텍스처 변환은 GLB에 포함된 이미지를 변경합니다. 이 도구에서 KTX2 또는 WebP를 선택하여 품질, 규모 및 최대 크기 제어를 활성화합니다. 이 비교 중에 삼각형 유지를 변경하지 않고 유지하면 텍스처 설정의 효과를 더 쉽게 확인할 수 있습니다.

뷰어가 로드할 수 있는 형식을 선택하세요.

크기와 인코딩 품질은 서로 다른 작업을 수행합니다.

50% 텍스처 스케일은 너비와 높이를 절반으로 줄여 밉맵 앞에 픽셀의 1/4을 남깁니다. 최대 크기 설정은 출력 크기도 제한합니다. 인코딩 품질은 이미지 크기가 아닌 코덱을 제어하므로 WebP의 품질 8은 ETC1S 또는 UASTC의 품질 8과 동일하지 않습니다.

크기를 조정한 후 문자, 알파 가장자리 및 미세한 표면 세부 사항을 검사합니다. 노멀 맵은 작은 값 변화로 인해 셰이딩이 변경될 수 있으므로 특별한 주의가 필요합니다. 애플리케이션에 사용된 조명 및 확대/축소 수준에서 텍스처를 테스트합니다.

1024×1024 텍스처 하나를 사용한 비교

이 설비는 기본 gltfpack 1.3으로 인코딩된 경사도 및 잡음 PNG가 생성된 CC0 리플 메시입니다. 모든 행은 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