배포 전 확인

GLB 압축과 뷰어 호환성

파일 확장자가 GLB라고 해서 모든 애플리케이션이 그 안의 데이터를 불러올 수 있는 것은 아닙니다. 결과에 사용된 확장을 확인하고 실제 사용 환경에서 테스트하세요.

로더에 맞는 설정 선택

설정불러오기에 필요한 사항
보수적 최적화지오메트리 양자화 지원이 필요하며 텍스처 변환이 사용될 수도 있습니다.
표준 / 높은 Meshopt 압축EXT_meshopt_compression을 지원하는 디코더.
KTX2 텍스처KHR_texture_basisu 지원 및 Basis 트랜스코더.
WebP 텍스처EXT_texture_webp 지원 및 WebP 디코딩.

여러 요구 사항이 동시에 적용될 수 있습니다. 결과 패널에 출력 파일의 호환성 정보가 표시됩니다. 이 사이트의 미리 보기에는 디코더가 포함되어 있으므로 미리 보기가 성공해도 사용자의 애플리케이션에 디코더가 설정되어 있다는 뜻은 아닙니다.

프리셋은 기본적으로 지오메트리 양자화를 사용합니다. 이를 끄면 지오메트리 양자화 지원이 필요 없어질 수 있지만, Meshopt나 변환된 텍스처에는 여전히 해당 로더가 필요합니다. 실제 결과에 표시된 확장을 확인하세요.

Three.js에서 사용하기

Meshopt로 압축한 지오메트리에는 GLTFLoader.setMeshoptDecoder()로 디코더를 등록하세요. KTX2 텍스처에는 KTX2Loader를 설정하고 렌더러의 지원 여부를 감지한 뒤 setKTX2Loader()로 연결하세요. 호환되는 트랜스코더 파일을 애플리케이션과 함께 제공하고, 사용 중인 Three.js 버전의 문서를 참고하세요.

GLTFLoader 문서 · KTX2Loader 문서

예시: 원본은 열리지만 ‘작은 파일’로 내보낸 결과는 열리지 않는 경우

원본 텍스처를 유지한 채 같은 원본을 두 번 내보내세요. 한 번은 ‘보수적 최적화’, 한 번은 ‘작은 파일’을 사용합니다. 두 번째 파일만 애플리케이션에서 열리지 않는다면 지오메트리 설정을 바꾸기 전에 결과의 확장과 로더 오류를 확인하세요. 이 비교는 변경된 로딩 요구 사항으로 원인을 좁혀 주지만, 모든 실패가 디코더 누락 때문이라는 뜻은 아닙니다.

Three.js에서 EXT_meshopt_compression 결과를 불러오려면 먼저 MeshoptDecoder를 등록하세요. 그런 다음 동일한 출력 파일을 다시 불러오세요. 대상 환경을 수정할 수 없다면 압축을 끄고 다시 내보낼 수 있지만 다운로드 크기는 커질 수 있습니다.

예시: 원본 텍스처는 표시되지만 배포 후 KTX2가 실패하는 경우

지오메트리 설정을 고정하고 원본 텍스처와 KTX2를 비교하세요. Three.js 애플리케이션이라면 KTX2Loader가 연결되어 있고 detectSupport가 실행되었는지 확인하세요. basis_transcoder.js와 basis_transcoder.wasm 요청도 확인하세요. 해당 URL이 404를 반환하거나 HTML 애플리케이션 페이지를 반환한다면 텍스처 품질이 아닌 파일 제공 경로의 문제입니다.

로더나 파일 경로를 수정한 뒤 같은 KTX2 결과를 대상 모바일 기기에서도 다시 테스트하세요. 이 사이트의 미리 보기에서 열리는 파일은 이 뷰어의 설정에서만 확인된 것입니다. 운영 환경의 뷰어도 필요한 로딩 조건을 갖추어야 합니다.

이름, extras 및 장면 동작

세 가지 보존 옵션은 기본적으로 켜져 있습니다. 애플리케이션이 이름으로 객체나 재질을 찾거나 extras를 읽는다면 그대로 유지하세요. 이 옵션은 노드 인덱스, 계층, 애니메이션 샘플, 사용자 정의 속성이 동일하게 유지됨을 보장하지 않습니다. 최적화는 데이터를 병합하거나 재구성하고 정밀도를 바꿀 수 있습니다.

실제 애플리케이션에서 선택, 재질 변경, 애니메이션 재생, 모프 타깃, 객체 변환을 테스트하세요. extras 보존 옵션으로 임의의 사용자 정의 확장을 보존할 수는 없습니다.

입력 제한

이 서비스는 Draco 압축 입력, 외부 리소스, 지원하지 않는 필수 확장을 거부합니다. 알 수 없는 선택 확장은 제거될 수 있습니다. 필요하다면 원본 제작 도구에서 압축하지 않고 리소스를 내장한 GLB를 내보내세요.

엔진이 지원하는 확장 목록과 최적화 동작은 gltfpack 공식 문서를 참고하세요. 웹 서비스에는 추가 검증과 리소스 제한이 적용됩니다.

Three.js에서 gltfpack 모델 불러오기 →

최적화 도구 열기 ↗