GLTF Draco 압축

컴퓨터/IT작업기록

lu

luasenvy (luasenvy)

개요

최근 취미로 작성 중이던 프로그램에서 주 콘텐츠를 3D 렌더링으로 테마를 잡았다. 작성 중에 수십에서 수백 메가는 기본이고 기가급을 넘나드는 다양한 3D 모델 파일들도 보게 되면서 자연스럽게 대용량 네트워크 트래픽에 대한 문제와 그 해결 방식에 대해 호기심을 갖게 되었다.

이러한 호기심을 가진 상태로 다양한 3D 모델 파일을 공유하는 사이트들의 트래픽을 뜯어보게 되었는데 희한하게도 대용량이어야 할 모델 파일이 쉽게 눈에 띄지 않았다. 아주 적은 용량의 파일을 수신하여 깨끗한 3D 모델을 렌더링 하는 것을 보고 흥미를 느끼게 되었다.

Draco 압축

구글에서 만든 Draco 도형 압축¹은 오픈소스로 누구나 무료로 사용할 수 있다. 설정에 따라서 압축률을 조정할 수 있으며 육안으로는 쉽게 구분할 수 없을 정도의 수준에서 높은 압축률을 보여줄 수 있기 때문에 아주 유용하게 사용할 수 있다. 처음 내용을 찾았을 때는 80MB 모델을 거의 10MB 수준으로 압축하는데 '이게 되나?' 싶은 수준이었다.

컴퓨터 성능에 따라 다르겠지만 시간만 투자할 수 있다면 다른 압축 알고리즘도 극한의 설정으로 높은 압축률을 끌어올릴 수도 있다. 물론 압축해제에도 많은 시간이 들어가 서비스용 사용하기에는 적절하지 않다. 그에 비해 Draco압축은 80메가를 80%에 가까운 압축하면서도 아주 적은 시간밖에 들지 않았다. 브라우저에서 수행하는 압축해제도 매우 빠르게 완료되기 떄문에 서비스에 차질을 주지 않으면서 용량에서 큰 이점을 얻을 수 있어서 처음 적용 했을 떄에는 박수를 치지 않을 수 없었다.

사용법

sudo npm i -g gltf-pipeline

Nodejs를 사용한다면 Cesium 팀에서 만든 gltf-pipeline을 사용하여 Draco 압축을 사용할 수 있다. 설치 후에는 글로벌 명령으로 사용할 수 있는데 압축할 GLTF 파일이 있는 곳에서 실행하면 된다.

압축해볼 대상 파일은 80메가 파일로 텍스쳐 23.6메가 까지 합치면 100메가 정도 된다.

gltf-pipeline -i scene.gltf -o build/scene.gltf -d \
  --draco.compressionLevel 10 \
  --draco.quantizePositionBits 14 \
  --draco.quantizeNormalBits 10 \
  --draco.quantizeTexcoordBits 12 \
  --draco.quantizeColorBits 8 \
  --draco.quantizeGenericBits 10

이 명령은 Draco 압축만을 위한 명령이 아니기 때문에 -d 옵션을 주어 Draco 압축 알고리즘을 사용하겠다고 명시해야 한다. 뒤 옵션들은 모델의 색이나 디테일 등에 영향을 주게 되는데 모델마다 적절한 옵션 값을 찾아서 육안으로는 쉽게 구분이 불가능하면서 높은 압축률을 가지는 옵션을 찾는 것이 좋다. 더 자세한 옵션과 설정법들은 깃헙에서 확인할 수 있다.

압축 결과 용량이 반으로 줄었다. 이렇게 한 번 압축하고 나면 압축된 gltf가 생성되는데 여기서 glb 옵션으로 한 번 더 압축하여 크기를 더 줄일 수 있다.

gltf-pipeline -i build/scene.gltf -o build/scene.glb

압축 결과 추가로 10메가를 더 확보했다. 결과적으로 100메가의 파일을 거의 70% 가까이 압축하였다. 이렇게 압축된 파일은 텍스처 파일도 GLB 내에 포함되므로 여러 번 응답할 필요 없이 한 번만 응답하면 되는 네트워크 입장에서도 아주 바람직한 형태로 만들어진다. 그러나 10명만 붙어도 300메가 트래픽이 되기 때문에 웹 서비스라고 하기에는 상당히 부담스러운 용량으로 보인다. 영상 스트리밍과 같은 대용량 트래픽이 일반적이 된 요즘 시대에서는 그렇게 큰일이 아니지 않을까 싶긴 하지만 네트워크 트래픽 비용을 고려해야 하는 상황이 된다면 누구나 한 번쯤 더 생각하게 될 것이다.

용량 더 줄이기

나의 경우처럼 1메가의 트래픽도 아까운 상황이라면 텍스처 파일을 최적화하는 방법도 적용할 수 있다. 텍스처 파일은 보통 jpg, png로 구성된 경우가 많은데 웹 브라우저에서 보여주는 것이 목적이라면 webp로 변환하여 최적화하는 것도 좋은 선택지 중에 하나이다. 3D 모델을 렌더링 할 수 있는 최신 브라우저라면 webp 렌더링 정도는 지원될 것이다.

이미지 파일을 webp 포맷으로 변환하려면 'imagemagick'을 사용하면 된다. webp의 경우도 압축 시 품질 옵션을 줄 수 있는데 80% 이하로 내려갈수록 압축률이 크게 차이가 나지 않기 때문에 가장 합리적이라고 한다.

sudo apt install imagemagick
convert -quality 80 textures/face.jpg textures/face.webp

webp	gltf 경로 변경

webp 이미지도 높은 압축률을 자랑하는데 거의 60 ~ 80%까지 용량을 줄일 수 있다. 텍스처 파일을 변경했다면 원본 gltf 파일을 열어서 해당 텍스처 파일을 참조하는 경로를 변경해 주어야 한다. 경로를 바꿨다면 다시 압축을 진행해보자.

텍스처 최적화와 Draco 압축 그리고 GLB 압축까지 적용한 최종 결과이다. 100메가 파일이 12.7메가가 되었다. 1차 작업 결과인 30메가보다 더 부담이 없어졌고 이 정도면 3D 서비스라는 점을 고려하여 네트워크 트래픽과 그 비용에 대해서도 충분히 납득할 만한 수준이라고 생각한다.

무압축 원본과 비교한 사진이다. 좌측이 100메가 모델을 렌더링 한 것이고 우측이 방금 압축한 12.7메가 모델이다. 서로 렌더링 효과가 다르기 때문에 색이나 질감이 조금 차이가 있지만 동일하게 맞춰준다면 나 같은 막눈들은 육안으로 식별이 불가능했다. 많이 확대하였을 때에도 적당히 효과가 주어지면 분간하기 힘들 것이라 생각한다. 감각이 좋아서 분간이 가능하더라도 이 압축률이라면 충분히 감당할 수 있을 정도라 생각하고 3D 모델을 다운로드하는 시간도 극적으로 개선되었기 때문에 좋은 점들이 더 매력적으로 다가왔다.