glTF 성능 최적화(Draco 메시 압축 + KTX2 텍스처 + Three.js 로더 설정)

 

1. 환경 준비

macOS:

brew install node

Windows:

winget install OpenJS.NodeJS

설치 확인:

node -v
npm -v

---

2. glTF Transform CLI 설치

npm install -g @gltf-transform/cli

설치 확인:

gltf-transform --version

---

3. 기본 압축 실행(Draco + 텍스처 WebP)

(좌)일반파일 / (우) 압축파일

gltf를  glb로 변환(bin, texture jpg나 jpng 등을 가진 하나의 파일)

gltf-transform copy searsia_lucida_1k.gltf searsia_lucida_1k.glb

먼저 가장 간단한 기본 최적화 명령:

gltf-transform optimize searsia_lucida_1k.glb output.glb \
  --compress draco \
  --texture-compress webp \
  --texture-size 2048

옵션 의미:

• --draco → 메쉬 압축(50~90% 감소 예상)
• --texture-compress webp → 텍스처를 WebP로 변환
• --texture-size 2048 → 최대 텍스처 해상도 2048px로 제한

---

4. 더 강력한 압축(KTX2 Basis Universal 추천)

gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress ktx2 \
  --texture-size 2048

이 옵션은 텍스처를 GPU 최적 포맷 KTX2(Basis Universal)로 압축합니다.
모바일과 웹 모두에서 상당한 메모리 절감 효과가 있습니다.

보이는 것과 같이 uastc 부분에서 시간이 꽤 걸린다. 크기에 따라서 몇 분이 걸리기도 한다.

 

• 메시(geometry)가 상대적으로 큰 영향을 갖고 있다면 Draco만으로도 상당히 감소
• 텍스처(WebP → KTX2 변환) 후 오히려 텍스처 크기가 커질 수 있음

 

KTX-Software가 없다면,

https://github.com/KhronosGroup/KTX-Software/releases

Releases · KhronosGroup/KTX-Software

자신에게 맞는 파일 설치 후 버전 확인

toktx --version

 

---

5. 가능한 추가 옵션

텍스처 최대 사이즈 줄이기

--texture-size 1024

사용하지 않는 데이터 제거

--prune

애니메이션 keyframe 줄이기

--simplify 0.1

---

6. 사용 예시 전체 명령

gltf-transform optimize searsia_lucida_1k.glb output2.glb \
 --compress draco \
  --texture-compress ktx2 \
  --texture-size 2048 \
  --prune \
  --simplify 0.1

---

7. 압축 후 Three.js 로딩 참고 코드

draco와 basis가 필요한데 three.js file(/three.js-master/examples/jsm/libs)에 있음.

선택된 경로에 위 두 파일 넣어줘야함.

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

const loader = new GLTFLoader();

const draco = new DRACOLoader().setDecoderPath('/libs/draco/');
loader.setDRACOLoader(draco);

const ktx2 = new KTX2Loader()
  .setTranscoderPath('/libs/basis/')
  .detectSupport(renderer);
loader.setKTX2Loader(ktx2);

loader.load('/output.glb', (gltf) => {
  scene.add(gltf.scene);
});

---

8. 참고 팁

• 변환 후 용량 비교해서 단계별 최적화를 진행
• 텍스처가 대부분이라면 우선 KTX2 적용
• 메쉬가 복잡하면 Draco 효과가 큼
• glTF는 ZIP보다 이 방식이 훨씬 효과적임