KnightK

[과정요약]

1. 필요한 도구 설치

2. GLB를 GLTF로 변환(Separate)

3. 이미지 압축

4. GLTF파일에 Draco 압축 적용

5. Draco 압축이 적용된 GLTF를 다시 GLB로 변환

1. 필요한 도구 설치

먼저, GLTF 및 Draco 관련 작업을 수행할 수 있는 도구를 설치해야 합니다. 이 예제에서는 gltf-pipeline을 사용하겠습니다. Node.js를 설치한 후, 다음 명령을 실행하여 gltf-pipeline 및 Draco 라이브러리를 설치합니다.

npm install --global gltf-pipeline @google/draco3d

2. GLB를 GLTF로 변환(Separate)

Terminal을 열고 GLB가 있는 폴더로 이동합니다. 해당 경로를 쉽게 할기 위한 방법으로 Finder를 켜고 메뉴에서 View > Show Path Bar를 클릭하면 Finder하단애 경로가 나타납니다.

경로의 마지막 폴더이름에 마우스를 가져가 우클릭하여 "Copy 폴더이름 as Pathname"을 클릭하면 경로가 복사됩니다.

터미널에 아래와 같이 "cd"를 입력, 한칸띄고 복사한 경로를 붙여넣어 줍니다.

GLB 파일을 GLTF로 변환하려면 다음 명령을 실행합니다. 여기서 "input.glb"는 원본 GLB 파일의 이름이고 "temp.gltf"는 변환된 GLTF 파일의 이름입니다.

gltf-pipeline -i input.glb -o temp.gltf --separate

명령어를 실행하면 아래와 같이 포함되어있던 이미지 파일들이 나오고 변환 된 GLTF파일도 보이게 됩니다.

3. 이미지 압축

Squoosh사이트를 열고 이미지들을 하나씩 압축합니다. 이때 투명도가 꼭 필요 한 파일은 png로 유지되도록 뽑아주고 필요하지 않는 파일은 jpg로 뽑아주면 압축율이 올라갑니다. 오른쪽하단에 다운로드 버튼을 클릭하여 새로 받아진 이미지 파일을 원본 이미지 파일로 바꿔줍니다.

만약 png파일이었던 이미지가 jpg형태로 바뀌게 되었다면 GLTF파일을 텍스트 에디터로 열어 해당 파일의 확장명을 변경해줘야 합니다.

이 예제에서는 아래 이미지가 png였는데 jpg로 바뀌게되어 해당 파일의 확장명을 바꿔주었습니다.

temp.gltf파일을 마우스 우클릭하여 Open With > Other...을 클릭합니다.

Applications > TextEdit.app으로 열어줍니다.

Command + F를 눌러 해당 파일을 검색해줍니다. 

mimeType과 uri에 기존 png로 되어있던 부분을 각각 jpeg / jpg로 바꿔줍니다.

해당 되는 나머지 파일도 모두 바꿔준 후 파일을 저장하고 나옵니다.

4. GLTF파일에 Draco 압축 적용

압축하려는 GLTF 파일에 Draco 압축을 적용하려면 다음 명령을 실행합니다. 여기서 "temp.gltf"는 변환된 GLTF 파일의 이름이고 "compressed.gltf"는 Draco 압축이 적용된 GLTF 파일의 이름입니다.

gltf-pipeline -i temp.gltf -o compressed.gltf --draco.compressionLevel 10

5. Draco 압축이 적용된 GLTF를 다시 GLB로 변환

압축된 GLTF 파일을 다시 GLB로 변환하려면 다음 명령을 실행합니다. 여기서 "compressed.gltf"는 Draco 압축이 적용된 GLTF 파일의 이름이고 "output.glb"는 최종 GLB 파일의 이름입니다.

gltf-pipeline -i compressed.gltf -o output.glb

웹 브라우저에 gltf.report로 이동 후 해당 GLB파일이 잘 열리는지 확인해 봅니다.

예제에서 사용했던 원본 GLB의 용량은 19.7MB였고 압축과정을 마친 후의 용량은 6.2MB로 줄었습니다.

참조: How to Compress .GLB File size (12MB to 2MB) - YouTube

unity3d 5 가 설치되어있다는 가정하에 다음과같이 진행한다.

1. https://code.visualstudio.com/Download 에서 다운받아 설치한다. (VS Code 설치)

2. http://www.mono-project.com 에서 다운받아 설치. (Mono Project 설치)

3. Unity3d Preferences메뉴를 클릭해서 External toos에서 External Script Editor를 설치한 VS Code로 선택한다.

4. Unity3d Assets메뉴를 클릭해서 Sync MonoDevelop Project를 눌러준다.

출처 : http://blueray21.tistory.com/30

http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]"

class HellowJava {     
    public static void main(String[] args)     {         
        System.out.println("Hello, Java ! ");     
    } 
}