[WebGL/three.js] DRACO & Basis 압축을 통해 3D 모델을 웹에 가장 적합한 수준으로 압축

개시하다

웹에 3D 모델을 표시하려면 용량을 조금 줄여야 합니다.
수중에 있는 3D 모델의 형식에 따라 다름
기본적으로glb 형식은 웹에서 사용하는 일반적인 데이터 형식입니다.
예를 들면.만약에 obj에 모델이 있다면obj2gltf.fbxFBX2glTF 정도면 편하실 거예요.
나는gltf를glb로 변환할 때makeglb를 사용하는 것이 비교적 좋다고 생각한다.
사실glb(gltf)로 바꾸기만 하면 용량을 압축할 수 있다.
하지만 문제는 여기에 있다.
여기로 전환하는 것도 무겁거나 블렌더에서glb를 직접 출력하는 것도 무겁습니다!!
이런 경우도 많죠~
이 경우 대처 방법
DRACO 압축 및 기본 압축.
이 글에서 상술한 압축을 진행한다.three.js를 사용하여 웹에 표시하기 전에 설명합니다.
참고로 이번에 사용한 압축은 Windows 환경에서만 가능하며 맥OS 환경이라면 안 됩니다.
미리 양해해 주십시오.
※ "잘 됐다~"하면 알려주세요.

DRACO 압축/Basis 압축의 개요

DRACO

DRACO를 사용하고 싶은 사람도 많습니다.
Google에서 개발한 압축 라이브러리에서 격자와 점 그룹 데이터를 압축할 수 있습니다.
이렇게 말하지만 저도'이걸로 하면 가벼워질 거야~'이런 롯데파 지식밖에 없어요. 자세한 내용은 아래 기사에 보내주세요.
Kronos, Google Draco 기술을 사용한 glTF 형상 압축 확장 발표
DRACO 압축하기
gltf-pipeline 근처에 유명해요.
하지만 이번에는 사용하지 않기 때문에 자세히 설명하지 않겠습니다!

Basis

다음은 Basis 입니다.
이것은 내가 최근에 알고 있는 것이다.그거 아세요?
Basis는 정식으로 Basis Universal Texture Formt라고 하는데 쉽게 말하면 3D 모델을 압축한 디트로이트의 새로운 형식이다.
예시의 상세한 내용에 근거하여 아래의 문장을 보십시오.
Google and Binomial Contribute Basis Universal Texture Format to Khronos’ glTF 3D Transmission Open Standard
어려운 것은 잠시 말하지 않겠다
나는 압축망상물은 DRACO이고 압축무늬는 Basis라고 생각한다.
다음은 실천편.

실제로 압축을 해볼게요.

이번에 사용한 것은 3d-tiles-validator라는 창고다.
이 창고는 원래 CesiumGS의 3d-tiles-validator fork에서 몇 가지 기능을 추가했는데, 3d-tiles 형식의 파일을 만들기 위해 이번에는glb를 압축하기 위해 사용했다.
MacOS가 실행되지 않으므로 Windows에서 사용하십시오.

실행 가능한 경로를 통해

압축 시 필요basisu v1.15.
이 URL에서 zip 파일을 다운로드합니다.
여기서 basisu는exe 파일이 있기 때문에, 적절한 폴더에 path를 통해 넣으십시오.
명령 프롬프트에 "basisu"를 입력하면 옵션이 있으면 성공합니다.
Windows의 path 통과 방법은 다음과 같습니다.
[Windows 11] Path 환경 변수를 설정하고 편집하여 별도의 명령을 실행할 수 있도록 합니다.

압축 명령 실행

그리고 3d-tiles-validator 폴더로 이동하고tools 폴더로 이동합니다.

cd tools

그리고 npm install 입니다.

npm install

준비 완료.
드디어 모형을 압축하려고 한다.
이번 샘플에 사용된 모형은 아이폰으로 찍은 광도 파일을 사용하고 싶습니다.
용량은 44.6MB입니다.무거워.
※ 잘 모르겠지만, 푸른 길 스캔 중

이 파일을 이전 tools 폴더에 넣고 다음 명령을 실행한 후 압축을 시작합니다.
(이름이 sample.glb입니다.)

node bin/3d-tiles-tools.js compressGlb -i sample.glb -o sample_out.glb --options --basis

제 환경에서 2분 정도 걸렸어요. 그러면 DRACO & Basis를 압축할 수 있어요.
8.2MB라니!가볍다.이렇게 하면 인터넷에서 사용할 수 있어요!!!!

three.js로 표현해 주세요.

three.js에 표시하기 위해서는 로더가 몇 개 필요합니다.
결론적으로 코드의 전모는 다음과 같다.
※three.js v137

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();
const DRACOLoader = new DRACOLoader();
const KTX2Loader = new KTX2Loader();
DRACOLoader.setDecoderPath( 'https://unpkg.com/[email protected]/examples/js/libs/draco/' );
KTX2Loader.setTranscoderPath( 'https://unpkg.com/[email protected]/examples/js/libs/basis/' );

const GLTFLoader = new GLTFLoader()
    .setDRACOLoader(DRACOLoader)
    .setKTX2Loader(KTX2Loader.detectSupport( renderer ))

DRACO 압축DRACOLoader을 했기 때문에 베이스 압축KTX2Loader이 필요하다.
그것들을 GLTFLoader 로 설정하고loader를 완성합니다.
그리고 이것GLTFLoader으로 끓이거나 구우세요. 마음에 드세요.

총결산

웹뿐 아니라 웹XR계의 모델 압축도 가장 중요한 명제다.
이럴 땐 DRACO 압축뿐만 아니라 Basis 압축도 꼭 활용하세요!