GLBビューアー＆コンプレッサー — .glb / .gltfをオンラインで開いて検査・縮小

ブラウザのGLBビューアーは、タブ内でファイルをデコードし、WebGLで描画します。ページに.glbまたは.gltfをドロップすると、デスクトップでは数百ミリ秒でモデルが画面に表示されます。アップロードの手順も、インストーラーも、アカウントもありません。GLBはglTF 2.0のアセットを1つのバイナリファイルにまとめたもので、12バイトのヘッダー、シーングラフを記述するJSONチャンク、そして頂点バッファ、インデックスバッファ、通常は埋め込まれた画像を保持するBINチャンクで構成されています。

同じページが、ゲーム制作パイプラインにおける検査と軽量化の工程になります。書き出したファイルを開き、ワイヤーフレーム、法線、UVアイランド、マテリアルスロットを確認して、BlenderやMayaから出る途中で壊れていないことを確かめ、ファイルを圧縮してエンジン用のコピーをダウンロードします。このページでは、各検査ビューが何を捉えるか、3つの圧縮レバーとそれを引く順序、そしてブラウザのシーンが実際に収まらなければならない予算について説明します。

ここで.glbを開く

ファイルをドロップゾーンにドラッグするか、ファイルダイアログで選択します。ページはFile APIを通じてBlob URLとArrayBufferとして読み込み、同じタブ内で解析します。その間にブラウザのネットワークパネルを開いてみてください。モデルを運ぶリクエストはありません。何もキューに入らず、サーバーに書き込まれることもなく、タブを閉じれば破棄されます。

ローカルであることは2つの意味で重要です。第一にプライバシー。未公開のキャラクター、秘密保持契約下のクライアント案件、お金を払って購入したスキャンアセット。それらを第三者製のコンバーターに通すのは、性能の問題になる前にライセンスの問題です。第二に遅延です。10 Mbpsのアップロード回線で40 MBのGLBを送ると、変換が始まる前に約30秒待つことになり、その待ち時間はファイルを実際に確認する頻度を変えてしまいます。SSDからのローカル読み込みなら一瞬で、解析コストは自分のマシンのCPU処理で済みます。

受け付ける入力：.glbは単一ファイルの場合です。.gltfは同じシーンをJSONで表したものなので、通常は.binバッファと画像フォルダーを伴います。複数選択するか、フォルダーごとドラッグするか、zipをドロップすれば、ビューアーが相対URIを解決します。埋め込みのdata URIはサイドカーなしで機能します。テクスチャはPNG、JPEG、WebP、KTX2（Basis Universal）に対応し、ジオメトリはDracoまたはmeshoptで圧縮されていても構いません。ビューアーは両方のデコーダーを備え、JSONチャンク内の拡張機能リストを読んでどちらを使うか判断します。

描画内容：1つの指向性ライトとオプションの環境マップの下でのPBRマテリアル、実際の縮尺が読める切り替え可能な1 mグリッド、ファイル内のすべてのアニメーションのクリップリスト、そして三角形数、頂点数、ノード数、ドローコールの推定値、埋め込まれた各画像のピクセル寸法とバイトサイズを表示する統計パネルです。唯一の厳しい制限はメモリです。100 MBのGLBは通常デスクトップでは開きますが、スマートフォンのタブは解析が終わる前にブラウザに落とされることがあります。

もう一つの方法は往復です。3D制作ソフトを開き、読み込み、確認し、書き出し、エンジンに読み込み、問題に気づき、また戻る。各ホップには数分かかり、各ホップがそれ自体の変更を持ち込む可能性があるため、アセットではなくパイプラインをデバッグすることになります。ファイルがすでにあるのと同じタブで検査を続ければ、その往復がなくなり、さらに有益なことに、目にしている数値が出荷しようとしているファイルの中の数値そのものになります。

検査：ワイヤーフレーム、法線、UVレイアウト、マテリアル

4つのビューが、悪い書き出しのほとんどをエンジンに届く前に捉えます。ワイヤーフレームは三角形の密度を示し、エクスポーターがどこでn-gonを三角形分割したかを明らかにします。法線は面の向きを示すので、裏返った面は1つの指向性ライトの下で黒く見えます。UVレイアウトはUVチャンネルをテクスチャを背後に敷いたグリッドへ展開し、重なり合うアイランド、引き伸ばされたテクセル、0〜1の範囲外のジオメトリを一目でわかるようにします。マテリアルは、各マテリアルをそのテクスチャ、アルファモード、両面フラグ、色空間の設定とともに一覧表示します。

圧縮する前に、必ず検査してください。Dracoとmeshoptは頂点バッファを書き換え、頂点レイアウトを変えます。またテクスチャのリサイズは、もともと存在していた継ぎ目を隠してしまうことがあります。先に圧縮してしまうと、そのアーティファクトが自分のせいなのかコンプレッサーのせいなのか、区別できなくなります。

統計パネルも検査の一部です。何も触る前に、三角形数、頂点数、ノード数、マテリアル数、埋め込まれた各画像の寸法を書き留めておきます。これらは各圧縮ステップの後に比較する基準となる数値で、どのレバーを実際に引く価値があるかを教えてくれます。

壊さずにGLBを圧縮する

3つのレバーがあり、それらは等価ではありません。何からも参照されていないデータを削るのは無料で、再書き出しによって元に戻せます。テクスチャの再エンコードは、典型的なアセットではバイト数の大部分を取り除きます。ファイルを支配しているのは画像だからです。ジオメトリの圧縮はモデルを壊しうるものなので、最後に行います。

どれも保証された圧縮率はありません。4096×4096のPNGが1枚だけのGLBは、ほとんどが頂点データのGLBとはまったく挙動が異なりますし、512のテクスチャを30枚持つメッシュ主体のシーンは、4Kアトラス1枚の単一キャラクターと同じようには反応しません。他人のアセットの数値を信じるのではなく、各ステップの後に測定してください。

デコーダーは出荷時の制約であり、些細な事柄ではありません。DracoはDracoデコーダーモジュールを必要とし、meshoptはMeshoptDecoderを必要とし、KTX2は正しいターゲットフォーマットを備えたトランスコーダーを必要とします。three.jsはGLTFLoaderを同梱しますが、DRACOLoader、MeshoptDecoder、KTX2Loaderは自分で組み込む必要があります。Babylon.jsやUnityのglTFastにも同等のものがあります。実行環境が知らない拡張機能で圧縮すると、モデルは黒く読み込まれるか例外を投げ、設定ミスではなくファイル破損のように見えます。

GLB、glTF、FBXの比較 — エンジンが求めるのはどれか

glTF 2.0はランタイムフォーマットです。GLBと.gltfは同じデータの2つのコンテナで、GLBはJSONとバイナリバッファを1つのファイルに入れ、.gltfはそれらを読めるテキストとサイドカーファイルに分けて保ちます。FBXはglTFより前からある3D制作ソフト向けの交換フォーマットで、今でも多くのリガーやアニメーターが受け渡しに使っています。OBJはジオメトリのみで、アニメーションもPBRマテリアルも一切ありません。

軸と単位の慣習は、ファイルサイズよりも多くの読み込みバグを引き起こします。glTFはメートル、Yアップ、右手系で、カメラは-Z方向を向きます。FBXのエクスポーターは単位について意見が一致せず、センチメートルとメートルの不一致は、モデルが約100倍小さすぎるか大きすぎる形で現れます。BlenderのglTFエクスポーターはZアップをYアップに変換してくれますが、それを無効にするとモデルは横倒しで届きます。エンジンを責める前に、ビューアーのバウンディングボックスを既知の寸法と照らし合わせて確認してください。

ウェブ向けに最適化する：ドローコール、テクスチャサイズ、ポリゴン予算

これらは制限ではなく、プロジェクトごとに調整する出発点として扱ってください。ミッドレンジのノートPCで安定したフレームレートを保つブラウザのシーンは、通常、数十万三角形未満で、はるかに重要なことに、ドローコール数百未満です。インスタンシングとマテリアルの統合は最初の数値を動かしますが、2つ目の数値を動かすのはジオメトリを統合することだけです。

ドローコールはメッシュごと、マテリアルごとに数えます。それぞれが独自のマテリアルを持つ200個の小道具は、それぞれが数百三角形にすぎなくても200回のドローを要し、それらを投入するCPUコストはジオメトリのGPUコストを上回ることがあります。同じマテリアルを共有する静的なジオメトリを統合し、小さなテクスチャを1枚の画像にアトラス化し、繰り返し現れる小道具をインスタンス化してください。透明なマテリアルは、ピクセルごとに並べ替えとブレンドを行うため、三角形数が示唆する以上にコストがかかり、影の描画は同じジオメトリを深度マップへ再レンダリングします。

テクスチャサイズは通常、ファイルとVRAMの両方を支配しており、これは人々が逆に捉えがちな部分です。4096×4096のRGBA8テクスチャは、ミップマップを除いてメモリ上で67,108,864バイトあり、ミップマップはその上におよそ3分の1を加えます。4バイトの位置、法線、UVを持つ10万三角形のメッシュは、それに比べれば数メガバイトです。不注意な4K法線マップ1枚が、それが載っているメッシュ全体を上回ります。KTX2はテクスチャをGPUメモリ内で圧縮されたまま保ち、これはファイルサイズとは別の節約で、モバイルではしばしば重要なものです。

色空間は、しばしば間違えられるため、このリストに入ります。ベースカラーとエミッシブはsRGBです。法線、metallicRoughness、オクルージョンはリニアです。これらを取り違えるとマテリアルは色あせて、または暗すぎて見え、読み込み時にデータが誤って解釈されているため、どれだけライティングを調整しても直りません。

圧縮する前に実物のモデルを検査する

トポロジーについて読むことは、それを回転させることとは違います。Blender Model Galleryがこのページにワイヤーフレームモードで埋め込まれているので、実際の書き出しを回転させ、モデラーが見た綺麗な四角形ではなく、エンジンが実際に描画する三角形を眺めることができます。

回転させながら3つの点を観察してください。曲率：三角形が密集している場所はエクスポーターが追加した場所で、平坦な20三角形の壁の隣に2万三角形の球があるのは正常です。継ぎ目：エッジをまたいだ陰影の変化はそこで頂点が分割されたことを意味し、UVの継ぎ目では正しく、滑らかな面では誤りです。シルエット：輪郭はプレイヤーが遠くから読み取るもので、間引き処理を内部のディテールよりもはるかによく生き延びます。

同じ予算は、Mini Worldとサイクロプスの島で出荷されたアセットにも当てはまります。どちらも3Dゲームビルダーを通じてブラウザのタブで動きます。単体で4万三角形の小道具は問題ありませんが、それを1つのシーンに40個置くのは問題で、フレームレートが気づく前にそれを見つけられるのがワイヤーフレームビューです。

それが属する世界に足を踏み入れる

スプライトは、立つ場所のないキャラクターです。最後のステップは他にはないものです — 作ったばかりのスプライトシートを、誰かが歩き回れる世界に置くことです。小さな島、惑星、雨の降る街角など。このサイトのすべての世界は、1つの書かれた記述から作られ、遊べるページとして公開されました。

FAQ