.gitattributes 와 바이너리 파일

새로운 기능을 구현하기 위해 .glb 파일을 로드해 렌더링 하는데 어느 순간 loader 에러가 발생했다.

 

Draco 인코딩과 KTX2 인코딩하여 압축한 glb 파일을 클라이언트에서 디코딩하여 렌더링하는 코드에서 에러가 발생하고 있었다.

잠깐 찾아보니 Draco는 geometry를 압축하여 전송 크기를 감소하고, KTX2는 텍스쳐를 압축하여 GPU 메모리와 성능을 최적화하기 위함 이라고 한다. 

 

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';

const renderer = new THREE.WebGLRenderer({ antialias: true });

// 1. GLTFLoader
const gltfLoader = new GLTFLoader();

// 2. DracoLoader (geometry 압축 해제용)
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/'); 


// 3. KTX2Loader (texture 압축 해제용)
const ktx2Loader = new KTX2Loader();
ktx2Loader
  .setTranscoderPath('/basis/') 
  .detectSupport(renderer);
  
  
gltfLoader
    .setDRACOLoader(dracoLoader)
    .setKTX2Loader(ktx2Loader);

 

 

간략한 예시 코드이다. 

 

내가 마주한 에러는 DRACOLoader를 제거하면 loader가 없다고 하고, 다시 추가하면 draco file이 아니라는거였다. 

THREE.DRACOLoader: Decoding failed: Not a Draco file.

No DRACOLoader instance provided.

 

코드 에디터를 reload도 해보고, 재부팅도 해봤지만 문제가 해결되지 않았다. 

그러던 중 glb 파일을 삭제하고 다시 추가했더니 정상적으로 모델이 렌더링 되는 것이다. !!! 

 

문제는 바로바로... glb 파일을 git commit 했고, 브랜치를 오가면서 git에서 glb이 텍스트파일로 취급되어 git diff 과정 중 줄바꿈 변환 등의 자동 변환 등으로 파일이 손상(바이트가 변형)된 것이다. 

 

그래서 .gitattributes 파일에 아래와 같이 작성해서

이 파일은 바이너리 파일이므로 변환하지말고 있는 그대로의 바이트 단위로 취급하라고 알려주어야 하는 것이다. 

*.glb binary

 

https://git-scm.com/book/ko/v2/Git%EB%A7%9E%EC%B6%A4-Git-Attributes

Git - Git Attributes

 

 

나의 경우에는 애초에 기능 개발 중에만 로컬에서 glb파일을 임시로 사용하고 있었던건데 이러한 바이너리 파일에 대해 인지하지 못하고 있어서 이런 에러를 만난 것이었다.. 

서비스 내의 다른 모델 파일처럼 이미 구축된 cdn 에서 응답받아 glb 파일을 렌더링 하는 방식을 적용하였다. 

 

코드에 아무 변경사항이 없는데 잘 렌더링 되던 모델이 렌더링 되지않는다면, 에셋 자체가 변형됐는지를 가장 의심해봤다면 좀더 시간을 아낄 수 있었겠다.