GLB 圧縮 — GLB ファイルをオンラインで軽量化

GLB の圧縮とは、テクスチャとジオメトリを再エンコードして、同じモデルをより少ないバイト数で表せるようにすることです。削減分の大半はテクスチャから生まれます。計測した Khronos のサンプルモデル 8 つでは、テクスチャを持つファイルのすべてで、画像が容量の大部分を占めていました。この GLB 圧縮ツールは、それらの画像を縮小し、ジオメトリを整理して、新しい .glb を書き出します。すべてブラウザ内で完結します。

GLB ファイルを軽量化すれば、商品ページでの読み込みが速くなり、3D プラットフォームやマーケットプレイスのアップロード上限にも収まり、スマートフォンでのメモリ使用量も減ります。そのためにモデルの形状、マテリアル、アニメーションを変える必要はありません。

GLB の容量は何に使われているか

GLB には 3 種類のデータが入っています。テクスチャ（モデルの表面に貼られる画像）、ジオメトリ（頂点の位置、法線、三角形のリスト）、そしてアニメーションです。テクスチャは完全な画像ファイルとして GLB の中に格納されていて、2048 × 2048 の PNG であることも珍しくありません。三角形が数百個しかないモデルでも 8 MB になることがあるのはそのためです。圧縮する前に GLBビューアでファイルを開けば、そのファイル自身の内訳を確認できます。

ロスレスな整理と非可逆圧縮

見た目を何も変えない処理もあります。重複データの削除、どこからも使われていないマテリアルやテクスチャの除去、まったく同じ頂点の統合です。大きな削減につながるのは非可逆（ロッシー）な処理で、テクスチャの縮小、WebP や JPEG への再エンコード、頂点の位置をより少ないビット数で保存することがこれに当たります。非可逆だからといって見た目が目に見えて悪くなるわけではありませんが、確認しておきたいのはこの部分です。「圧縮前」と「圧縮後」の切り替えは、そのためにあります。

GLB の中のテクスチャは、どれも完全な画像ファイルです。モデルが表示されると、GPU はそれを生のピクセルに展開します。2048 × 2048 のテクスチャは、元の PNG がどれだけ小さくても、ミップマップを除いて約 16 MB のグラフィックスメモリを使います。つまり GLB を圧縮するとき、テクスチャの設定はダウンロードサイズだけでなく、モデルの表示の重さも左右します。

テクスチャのリサイズ：4096、2048、1024、512 のどれにする？

テクスチャの幅と高さを半分にすると、ピクセル数は 4 分の 1 になります。モデルが画面の一部に表示されるのが普通の Web ページなら、ほとんどの商品は 1024 px で十分です。メインビジュアルやクローズアップには 2048 px を残す価値があり、小物には 512 px が向いています。この GLB 圧縮ツールはテクスチャを縮小するだけで拡大することはなく、縦横比も保ちます。テクスチャを 1 枚ずつ手作業でリサイズするなら、画像リサイズツールをお使いください。

GLB 内の WebP・PNG・JPEG の違い

PNG と JPEG は glTF 本体の一部なので、GLB ファイルを開けるアプリならどれでも読み込めます。WebP はたいていいちばん小さいファイルになりますが、WebP を使う GLB は EXT_texture_webp 拡張機能を宣言するため、開くアプリ側がそれに対応している必要があります。JPEG は透過を保存できないので、このツールはピクセルが完全に不透明でないテクスチャを PNG のまま残します。形式ごとの一般的な違いについては、PNG から WebP への変換をご覧ください。

ノーマルマップは控えめに圧縮する

ノーマルマップは表面の向きを色として保存しています。非可逆圧縮で生じるブロック状のノイズは、色ムラではなくライティングの誤差として現れます。そのため、どちらのプリセットもノーマルマップには高めの品質下限（0.9）を設けています。また、WebP と JPEG は色情報を低い解像度で保存するため、ノーマルマップや、ラフネス・メタリック・オクルージョンを別々のチャンネルに詰め込んだテクスチャでは、精度が多少失われます。その精度が重要なら、「カスタム」を選んで元の形式を維持してください。

透過のあるテクスチャ

葉、デカール、ガラスは、アルファチャンネルに頼っていることがよくあります。WebP はアルファチャンネルを保持できますが、JPEG はできないため、JPEG にする予定だった透過テクスチャは代わりに PNG で保存されます。今回の計測でも、Lantern と ToyCar はこの理由で、それぞれ 1〜2 枚のテクスチャが PNG のまま残りました。

ジオメトリは GLB の中では小さいほうの部分であることが普通ですが、高密度なメッシュ、スキャンデータ、アニメーション付きのキャラクターでは、ファイルの大半を占めることもあります。「Web」プリセットはジオメトリを meshopt で圧縮します。ほかのプリセットはエンコード方式をそのままにして、整理だけを行います。

meshopt 圧縮の仕組み

meshopt はまず、隣り合うデータがまとまるように頂点と三角形を並べ替えます。次に、位置、法線、テクスチャ座標を 32 ビット浮動小数点数ではなく小さな整数として保存し（量子化。KHR_mesh_quantization として宣言されます）、最後に EXT_meshopt_compression で結果を詰め込みます。ブラウザでのデコードは非常に高速で、three.js、model-viewer、Babylon.js のいずれも読み込めます。

頂点の統合と重複の削除

エクスポーターは、同じ頂点を何度も書き込んだり、アクセサーを丸ごと重複させたり、どこからも使われていないマテリアルやテクスチャを残したりしがちです。同一の頂点を統合し、未使用のデータを削除する処理はロスレスで、すべてのプリセットで実行されます。小さな Fox モデルでは、これだけで 32% 削減できました。

Draco モデルのジオメトリをそのまま残す理由

Draco もジオメトリ圧縮の拡張機能で、多くの場合 meshopt より高い圧縮率が得られます。Draco で書き戻すにはそのエンコーダーが必要で、Draco をデコードして Draco なしでジオメトリを保存すると、テスト用のメッシュは 4〜13 倍の大きさになりました。そのため、すでに Draco を使っている GLB では、このツールはテクスチャだけを再エンコードし、Draco ジオメトリを含むそれ以外のバイトは元のまま一切変えません。そうなった場合は、結果カードにその旨が表示されます。

GLB を圧縮する前に、モデルの次の行き先を考えてください。最も小さくなる設定は、すべてのアプリが読めるわけではない glTF 拡張機能に頼っているため、適したプリセットは行き先によって変わります。プリセットの下の注記には、現在の設定で追加される拡張機能が表示されます。

Web ビューア向け：three.js、model-viewer、Babylon.js

Web プリセットを選んでください。テクスチャを最大 1024 px に縮小して WebP で保存し、ジオメトリを meshopt で圧縮します。ブラウザベースのビューアや、three.js・Babylon.js で作られたエンジンは、このプリセットが使う 3 つの拡張機能をすべて読み込めます。このツールで作れる中でいちばん小さいファイルになり、Khronos のサンプルでは 48%〜98.8% 小さくなりました。

Blender、Unity、デスクトップのビューア向け

互換性重視プリセットを選んでください。テクスチャは最大 2048 px を保ち、不透明なものは JPEG、透過のあるものは PNG で書き出し、拡張機能は一切追加しません。デスクトップのツールやゲームエンジンのインポーターは、WebP や meshopt への対応がまちまちです。受け取る側のソフトウェアを自分で選べないなら、これらを使わないファイルが安全です。

「カスタム」を使う場面

「カスタム」は、テクスチャを元のサイズのまま残したいとき、精密なデータマップを元の形式のまま残したいとき、品質を上げ下げしたいとき、meshopt をオフにしたいときに使います。設定を変えるたびにテクスチャ表が更新されるので、圧縮する前に結果を確認できます。

どれくらい小さくなるかの目安として、このページで Khronos glTF Sample Assets コレクションの GLB ファイルを圧縮しました。対象は 8 つのオリジナルファイルで、デスクトップパソコンの Chrome を使っています。「Web」プリセットでは、8 ファイルが平均で 86%、中央値で 96% 小さくなりました。最も削減量が大きかったのは Avocado で、7.73 MB から 0.09 MB になりました。2048 × 2048 の PNG テクスチャ 3 枚が、ファイルのほぼすべてを占めていたためです。処理時間はモデル 1 つあたり約 1 秒でした。

「互換性重視」はテクスチャを 2048 px のまま残し、WebP も使わないため削減量は少なめですが、それでも 8 モデル中 4 つで 83%〜93% 削減できました。削減量が少なかったのは、ジオメトリが最も多いモデル（ToyCar は三角形が約 109,000 個）か、PNG のまま残る透過テクスチャを持つモデルです。

GLB の圧縮で変わるのはデータの保存方法であって、モデルそのものではありません。メッシュ、マテリアル、ノード名、アニメーションなどの glTF の機能はそのまま引き継がれます。確認すべきなのは、新しいファイルが必要とする拡張機能と、テクスチャを間近で見たときの見た目です。

出力ファイルに必要になりうる拡張機能

「Web」プリセットでは EXT_texture_webp、EXT_meshopt_compression、KHR_mesh_quantization が追加されることがあります。これらは必須の拡張機能として記録されるため、読み込めないアプリは壊れたモデルを表示する代わりに、その旨を報告します。「互換性重視」では何も追加されません。GLB がもともと使っていたほかの拡張機能はそのまま残ります。このツールが認識できない拡張機能があった場合は、テクスチャの再エンコードだけに切り替えるため、理解できないものが書き換えられることはありません。

アニメーション、スキン、モーフターゲット

アニメーション、スキニングされたキャラクター、モーフターゲットは、圧縮後もそのまま残ります。meshopt はアニメーションのキーフレームも圧縮し、量子化しても通常サイズのモデルには十分な精度が保たれます。非常に大きなシーンや、ミリメートル単位で測る設計用のモデルの場合は、ワイヤーフレームをオンにして結果を見比べるか、「カスタム」で meshopt をオフにしてください。

KTX2 テクスチャはそのまま

すでに KTX2（KHR_texture_basisu）として保存されているテクスチャは GPU 向けに圧縮されており、メモリ上でも小さいままです。このツールはそれらを通常の画像に戻さず、変更せずに残します。

GLB を圧縮しても削減量が小さい場合、たいていはパネルにその理由が表示されます。ファイルがすでに圧縮済みなのかもしれません。もともと小さな WebP や JPEG のテクスチャはそれ以上縮みにくく、このツールは再エンコードしても小さくならないテクスチャを元のまま残します。結果がまったく小さくならない場合は、仕様としてダウンロードできるものはありません。

高密度なスキャンデータとフォトグラメトリ

スキャンしたオブジェクトやフォトグラメトリのデータは、三角形が数十万から数百万個に及ぶことが多く、その場合はテクスチャではなくジオメトリがファイルを占めます。meshopt も効果はありますが、根本的な解決策は三角形を減らすことです。Blender の Decimate モディファイアーなどを使い、3D エディターでメッシュを簡略化してから、その結果をここで圧縮してください。

外部ファイルを使う .gltf の圧縮

.gltf は、ジオメトリとテクスチャを別々のファイルに保存しています。それらをすべて選択するかフォルダーごとドロップすれば、このツールがすべてを 1 つの圧縮された .glb にまとめます。Draco を使っている .gltf は、先に .glb として書き出す必要があります。Draco データを変更せずに残せるのは GLB の中だけだからです。

コマンドラインで同じことをするには

このページは、オープンソースの glTF Transform ライブラリをブラウザ内で実行しています。ビルドパイプラインで多数のファイルを圧縮したい場合は、そのコマンドラインツールで同様の処理ができます。たとえば gltf-transform optimize input.glb output.glb --compress meshopt --texture-compress webp --texture-size 1024 のように実行します。

オンラインの GLB 圧縮ツールの多くはファイルをサーバーにアップロードし、中には 1 週間に圧縮できるファイル数を制限するものもあります。このページでは、処理全体がブラウザのタブ内のバックグラウンドワーカーで実行されます。モデルはディスクから読み込まれ、メモリ上で圧縮され、そのままダウンロードとして保存されます。未発表の製品、クライアントの案件、NDA の対象となるあらゆるデータにとって、これは重要な点です。タブを閉じれば何も残りません。同じ仕組みで動くほかのツールは、無料ツール一覧をご覧ください。