GLBビューア — GLB・glTF ファイルをオンラインで表示

GLB ファイルは glTF 2.0 のバイナリ形式で、3D モデルのメッシュ、マテリアル、テクスチャ、アニメーションを 1 つのファイルにまとめたものです。glTF 2.0 は 2017 年に Khronos Group が公開し、2022 年には国際規格 ISO/IEC 12113 になりました。Blender や AI のモデル生成ツール、3D スキャンアプリで作った .glb が、この GLBビューアでも、Web ページでも、多くのゲームエンジンでも開けるのはそのためです。

.glb ビューアに必要なのは、ファイルを読み込んで描画することだけです。編集やテクスチャの差し替え、ほかの形式への書き出しは 3D エディターの役割です。

GLB と glTF の違い：1 つのファイルか、フォルダーか

同じモデルでも、保存の仕方は 2 通りあります。.gltf ファイルは人が読める JSON で、別のファイルを参照します。ジオメトリを収めた .bin ファイルと、テクスチャごとに 1 枚の画像です。.glb は JSON、バイナリデータ、画像を 1 つのファイルにまとめるため、メールで送るのもアップロードするのも、ひとまとめに管理するのも簡単です。

GLB の中身：ヘッダー、JSON チャンク、バイナリチャンク

12 バイトのヘッダー

GLB はどれも glTF という文字、バージョン番号、ファイル全体の長さから始まります。ビューアはまずこのバイトを確認します。だからこそ、「GLB」が実は FBX や glTF 1.0 のファイルだったときに、それを伝えられるのです。

JSON チャンク

次に、シーンを記述した JSON のブロックが続きます。メッシュ、マテリアル、テクスチャ、アニメーション、そして各パーツの頂点数です。モデルのレポートはここから読み取るため、何かが描画される前に各数値が表示されます。

バイナリチャンク

最後がバイナリデータです。頂点の位置、法線、アニメーションのキーフレーム、そして多くの場合はテクスチャ画像そのものが、PNG、JPEG、WebP、KTX2 として格納されています。

モデルを開くのは仕事の半分にすぎません。残りの半分は、そのモデルが使う場所、つまり Web ページ、スマートフォン、AR アプリ、ゲームにそのまま出せる状態かどうかを見極めることです。この GLBビューアは、その答えになる数値を読み取ります。

頂点、三角形、メッシュ

三角形の数は、モデルの描画がどれだけ重いかを最もはっきり示す指標です。Web ページ向けの製品モデルなら通常は数万程度に収まりますが、スキャンした彫像は数百万に達することもあり、スマートフォンではカクつきます。複数のパーツで共有される頂点は 1 回だけ数えるため、数値はファイルに保存されている内容と一致します。

テクスチャ：容量の大半を占めるもの

GLB が大きくなるのは複雑なジオメトリのせいだと思われがちですが、実際にはめったにありません。「情報」タブには、ファイルをテクスチャ、ジオメトリ、アニメーション、その他に分けたバーが表示され、静止したモデルの多くではテクスチャの割合が圧倒的です。サンプルのアボカド（Avocado）は三角形がわずか 682 個なのに 7.73 MB あり、そのほぼすべてが 2048 × 2048 の画像 3 枚です。

Khronos glTF Sample Assets の GLB ファイル 13 個を、このビューア自身のパーサーで計測しました。ファイルに占めるテクスチャの割合は、中央値で 95% でした。ジオメトリが大半を占めたのは、アニメーション付きのキャラクターと、三角形 109,000 個のおもちゃの車だけです。詳しい数値は下の表をご覧ください。

アニメーションとモーフターゲット

アニメーション付きのファイルでは、すべてのクリップが長さとともに一覧表示されます。クリップを選んで一時停止したり、タイムラインをドラッグしたり、速度を 4 分の 1 に落としたりして、歩行サイクルを 1 フレームずつ確認できます。キャラクターや表情に使われるスキンとモーフターゲットも、レポートで数えられます。

デコードできる圧縮拡張機能

圧縮された GLB は多く、それをデコードできないビューアでは何も表示されません。このビューアは、一般的な拡張機能に対応しています。

• Draco（KHR_draco_mesh_compression）はジオメトリを大幅に縮めますが、モデルを描画する前にデコーダーが必要です。
• meshopt（EXT_meshopt_compression）はジオメトリとアニメーションを圧縮し、非常に高速にデコードできます。
• KTX2（KHR_texture_basisu）はテクスチャを GPU でそのまま扱える形式で保持し、ビデオメモリの使用量を抑えます。
• WebP（EXT_texture_webp）はテクスチャファイルを小さくし、ブラウザがネイティブにデコードします。

各デコーダーは、ファイルがその拡張機能を宣言しているときだけダウンロードされるため、拡張機能を使わない GLB で余計な読み込みが発生することはありません。

.gltf ファイル単体には、JSON の記述しか入っていません。ジオメトリは隣にある .bin ファイルに、テクスチャは画像ファイルに入っていて、画像は textures フォルダーにまとめられていることがよくあります。この glTF ビューアには、それらをすべて一度に渡してください。ファイル選択ダイアログでまとめて選ぶか、フォルダーごとビューアにドラッグします。

ビューアは各ファイルを .gltf に書かれたパスと照合するため、フォルダー構成もそのまま反映されます。.bin が見つからない場合は、黙って失敗するのではなく、そのファイルの正確な名前を表示します。テクスチャが見つからない場合もモデルは開き、足りないファイルが一覧表示されるので、どれを探せばよいかがわかります。

モデルが読み込めないとき、原因はほぼ必ず次の 5 つのどれかです。この GLBビューアは真っ白な画面を出すのではなく、原因を具体的に示します。

実は GLB ではない

FBX、OBJ、STL ファイルの拡張子を、何とかなるかもしれないと .glb に書き換えることがあります。しかし、それでは開けません。中身のバイトは別の形式のままだからです。ビューアは先頭のバイトを読み、そのファイルが本当は何なのかを表示します。Blender やそのモデルを作ったソフトから、GLB として書き出し直してください。

モデルが黒い・灰色・テクスチャがない

画像ファイルを置き忘れた .gltf は、表面が無地の灰色や白で表示されます。モデルが黒く見えるのは、たいてい光が足りないためです。「シーン」タブで「スタジオ照明」をオンにするか、露出を上げてください。

小さすぎる・大きすぎる・横倒しになっている

glTF はメートル単位で、+Y が上向きです。ミリメートル単位で書き出したモデルは 1,000 倍の大きさになり、別の軸を上として作ったモデルは横倒しになります。ビューアはどのモデルも自動でフレームに収めるので常に画面内に表示されますが、スケールや軸は書き出すときに直してください。

glTF 1.0 のファイルである

2017 年より前に書き出されたファイルは glTF 1.0 の場合があり、現在のツールでは読み込めません。Cesium のオープンソースツール gltf-pipeline を使えば、ほとんどは glTF 2.0 にアップグレードできます。

スマートフォンでページが重くなる・落ちる

スマートフォンでは、ブラウザとグラフィックスチップがわずかなメモリを共有しています。8K テクスチャを使った 120 MB のスキャンデータはそれを使い切ってしまうことがあり、スマートフォンでの上限を 50 MB にしているのはそのためです。大きなファイルはパソコンで開くか、先にテクスチャを小さくしてください。

GLBビューアは物理ベースレンダリングとスタジオ環境の反射を使い、毎秒何フレームもリアルタイムで描画します。一方、Blender の Cycles レンダラーは 1 枚の画像に数秒から数分かけて光線を追跡し、柔らかい影や面と面の間で跳ね返る光まで再現します。マテリアルは同じでも、ライティングが違うのです。

色味が変わることもあります。このビューアは、製品の色を正確に保つよう設計された Khronos PBR Neutral トーンマッピングを使っていますが、ほかのツールではフィルム調の見た目が適用されることがあります。モデルが暗すぎたり明るすぎたりする場合は、マテリアルを編集するのではなく、「シーン」タブで露出を調整してください。

カメラボタンを押すと、表示されているとおりの画面を PNG 画像として保存できます。高解像度の画面でもくっきり見えるよう、サイズはビューアの 1×、2×、4× から選べます。「背景を透明にする」にチェックを入れると、スタジオの背景が消えます。床の柔らかい影は残るので、どんな色のページに置いてもモデルが自然になじみます。

つまりこの GLBビューアは、商品ページ、資料、サムネイル、ポートフォリオ用に GLB を PNG にする手軽な方法でもあります。画像をさらに軽くしたいときは、PNG を圧縮するか WebP に変換し、サイトが指定する寸法に合わせてリサイズしてください。

このビューアなら安全です。ファイルはブラウザのタブ内で読み込まれて描画され、アップロードも保存も一切されません。.gltf が別の Web サイト上のテクスチャのアドレスを参照していても、それを取得することは許可されないため、モデルを開いても、そのモデルのためのリクエストが送信されることはありません。

追加でダウンロードされるのは、ビューア自身のコンポーネントだけです。3D エンジンと、圧縮ファイルで必要な場合の Draco または KTX2 デコーダーです。これらは誰にとっても同じプログラムコードで、あなたのデータは何も含まれていません。モデルを開くときに、ブラウザの開発者ツールの「ネットワーク」タブでご自身で確認することもできます。