Zenn
⚒️

glTF・glb形式の3Dモデルのサイズを小さくしよう！

2023/07/09に公開
CLI
3d
glTF
glb
tech

TL;DR

  • glTFあるいはglb形式の3Dモデルのサイズを小さくするよ
  • モデル形式の説明はしないよ
  • glTF TransformというSDKのコマンドラインAPIを使うよ

WebならglTFだよね

Webブラウザ上で動作する3Dコンテンツを作るなら3Dモデルの形式はglTFがいいですよね(個人の感想)。Three.jsでも扱えるモデル形式なので一般的かと思います。ちなみにglbはglTFのバイナリ形式です。

3Dモデルのサイズはいつでもネック

Webに限らず3Dモデルのサイズは見た目を損なわないのであればなるべく小さいほうが良いです。3Dモデルを自分で制作しているなら作る時に頂点数とかテクスチャサイズとか色々注意できるけど他の人が作ったアセットを利用したりする場合、モデルのサイズに困る時があります。

簡単にモデルサイズを最適化

そこで今回おすすめしたいのがglTF Transformです。(ドキュメント、Github)
こちらはglTF2.0フォーマットの3Dモデルを読込/編集/書込みできるSDKで、既存の3Dモデルを結合/分割/最適化するのに適しています。3Dモデルのサイズを最適化するだけならばコマンドラインAPIを利用するのが簡単なので今回はこちらを使っていきます。

glTF TransformのコマンドラインAPI

以下のコマンドでインストールします。
Node.jsはv14以降を使ってください。

npm install --global @gltf-transform/cli

利用できるコマンド一覧は以下で確認できます。

gltf-transform --help

最適化には主に以下のコマンドを使います。細かい設定は公式ドキュメントをご覧ください。

# gltf-transform optimize 変換前のモデル 変換後のモデル名 --texture-compress webp
gltf-transform optimize input.glb output.glb --texture-compress webp

このコマンドですとinput.glbというモデルを最適化処理後、output.glbという名前で出力します。テクスチャは.webp形式に変換します。

変換例

変換前 変換後
3.95MB 1.35MB
2.94MB 1.05MB
6.26MB 1.23MB

拡大しても遜色ないぐらいクオリティはそのままで、サイズを小さくできました。
みなさんも是非試してみてください！

参考

https://gltf-transform.dev/

Discussion