【WebGL / three.js】DRACO＆Basis圧縮でWebに最適なレベルまで3Dモデルを圧縮する

はじめに

Webに3Dモデルを表示したい場合、やはり少しでも容量を軽くしたいですよね。
手元の3Dモデルの形式が何であるかによりますが、
基本的には.glb形式がWebで使う一般的なデータ形式となります。

例えばもし.objでモデルを持っているならobj2gltf、.fbxならFBX2glTFあたりで変換すると便利です。
gltfをglbに変換する場合はmakeglbを使うといいと思います。
実はglb（gltf）に変換するだけで結構容量が圧縮されます。

でも問題はここからです。
ここまで変換してもまだ重い、もしくはBlenderから直接glb出力したけどめっちゃ重い！！
ということも結構ありますよね〜

そういう場合の対処法が、
DRACO圧縮とBasis圧縮です。
本記事では、上記の圧縮を行い、three.jsを使用してWebに表示するまでを解説します。

ちなみに今回使用する圧縮なのですが、Windows環境のみで可能でmacOS環境だとできませんでした。
あらかじめご了承ください。。
※「できたよ〜」って人いたら教えてください

DRACO圧縮 / Basis圧縮の概要

DRACO

DRACOは使っている方も多いと思います。
Googleが開発した圧縮ライブラリで、メッシュや点群データを圧縮できます。

といいつつ私も「これ使ったら軽くなるすげ〜〜」くらいの能天気な知識しかないので、詳細は下記記事に任せます。
クロノス、Google Draco技術を使用したglTFジオメトリ圧縮エクステンションを発表

DRACO圧縮をするには、
gltf-pipelineあたりが有名です。
ただ、今回は使用しないので詳細は解説しません！

Basis

次はBasisです。
これは私は最近知りました。皆様ご存知でしょうか？
Basisとは、正式にはBasis Universal Texture Formatと呼び、簡単にいうと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を実行可能パスに通す

圧縮にあたり、basisu v1.15が必要となります。

このURLからzipファイルをダウンロードします。
その中にbasisu.exeファイルが入っているので、適当なフォルダに入れてpathを通してください。
コマンドプロンプトで「basisu」とタイプし、オプションが出れば成功です。
Windowsのpathの通し方は下記記事に詳しいです。
【Windows 11対応】Path環境変数を設定／編集して、独自のコマンドを実行可能にする

圧縮コマンド実行

次に、3d-tiles-validatorのフォルダへ移動し、toolsフォルダへ移動します。

cd tools

そしてnpm installします。

npm install

これで準備完了です。
いよいよモデルを圧縮していきます。

今回サンプルで使用するモデルは、私がiPhoneで撮影したフォトグラメトリのファイルを使用したいと思います。
容量は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！めっちゃ軽いですね。これならWebで使えます！！！！

three.jsで表示してみる

three.jsで表示するために、いくつかloaderが必要となります。
結論から言うと、コード全容は以下です。

※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/three@0.137.0/examples/js/libs/draco/' );
KTX2Loader.setTranscoderPath( 'https://unpkg.com/three@0.137.0/examples/js/libs/basis/' );

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

DRACO圧縮したのでDRACOLoader、Basis圧縮したのでKTX2Loaderというものが必要となります。
それらをGLTFLoaderに設定しloaderの完成です。
あとはこのGLTFLoaderを使って煮るなり焼くなりお好きにどうぞ。

まとめ

Webのみならず、WebXR系でもモデルの圧縮は至上命題だと思います。
そんなときにDRACO圧縮のみならずBasis圧縮もぜひぜひご活用ください！