WebARで3Dモデルを表示するために欠かせないのが「GLBファイル」です。しかし「GLBとglTFの違いは?」「USDZとどう使い分ける?」「ファイルが重くてARが遅い」など、GLBファイルに関する疑問は多いです。本記事では、WebAR制作者が知っておくべきGLBファイルの基礎知識から、Blenderでのエクスポート方法、Draco圧縮による軽量化まで詳しく解説します。
GLBファイル(glTF Binary)とは
GLBは「GL Transmission Format Binary」の略で、Khronos Groupが策定した3Dモデルのファイル形式です。3Dモデルのジオメトリ(頂点データ)・マテリアル(色・質感)・テクスチャ・アニメーションを1つのファイルにバイナリ形式でまとめた形式です。
GLBとglTFの違い
| 項目 | GLB | glTF(.gltf) |
|---|---|---|
| ファイル構成 | 1つのバイナリファイル | JSONファイル+別ファイル(テクスチャ画像など) |
| 配布のしやすさ | 1ファイルで完結(◎) | 複数ファイルの管理が必要(△) |
| 読み込み速度 | 高速 | やや遅い(複数リクエストが必要) |
| 用途 | WebAR・Web配信・配布 | 開発・編集時(中間ファイル) |
| ファイルサイズ | ほぼ同じ | ほぼ同じ |
WebARでの利用には、1ファイルで完結するGLBが圧倒的に向いています。glTFは開発・編集の中間ファイルとして使い、最終的にGLBに変換して配信するのがベストプラクティスです。
GLBとUSDZの使い分け
USDZはAppleが採用している3Dファイル形式で、iOSのAR Quick Lookで使用されます。GLBとUSDZは以下のように使い分けます。
| 用途 | 推奨フォーマット |
|---|---|
| WebARプラットフォーム全般(Vossle・8th Wallなど) | GLB |
| iOSのSafariでAR Quick Lookを表示 | USDZ |
| Googleの3Dビュー(Search AR) | GLB |
| AppleのRealityKitアプリ | USDZ |
ECサイトの商品AR対応では、GLBとUSDZの両方を用意して、ユーザーのOS(iOS/Android)に応じて自動的に切り替える実装が一般的です。
WebAR用GLBのファイルサイズ目安
WebARではモバイル回線でのリアルタイム読み込みが必要なため、ファイルサイズが体験品質に直結します。以下を目安にしてください。
| 状況 | 推奨サイズ |
|---|---|
| 一般的なWebARコンテンツ | 5MB以下 |
| SNSキャンペーン・初回接触 | 2MB以下 |
| 高品質が求められるEC・ショールーム | 10MB以下 |
5MBを超えると4G回線での読み込みに5秒以上かかることがあり、ユーザーが離脱するリスクが高まります。
BlenderからGLBをエクスポートする手順
STEP1:3Dモデルを最適化する
エクスポート前に、ポリゴン数を削減します。WebAR向けには総ポリゴン数を50,000以下に抑えることが目安です。Blenderの「Decimate Modifier」を使うと自動的にポリゴン数を削減できます。また、テクスチャ画像は2048×2048px以内に収めてください。
STEP2:マテリアルをPBR(Principled BSDF)に統一する
GLBフォーマットはPBR(物理ベースレンダリング)マテリアルに対応しています。BlenderのPrincipled BSDFシェーダーを使ったマテリアル設定がGLBに正しく変換されます。カスタムシェーダーはGLBで正しく表示されない場合があるため注意してください。
STEP3:GLBとしてエクスポート
Blenderメニュー「ファイル」→「エクスポート」→「glTF 2.0(.glb/.gltf)」を選択します。エクスポート設定で「フォーマット」を「glTF Binary(.glb)」に設定します。「テクスチャを含む」「アニメーションを含む」のチェックを確認してエクスポートします。
Draco圧縮でGLBを軽量化する
Googleが開発したDraco圧縮を使うと、GLBファイルのサイズを60〜80%削減できます。
Draco圧縮の方法
Node.jsのgltf-pipelineツールを使うのが一般的です。ターミナルで以下のコマンドを実行します。
npm install -g gltf-pipeline
gltf-pipeline -i model.glb -o model-draco.glb --draco.compressionLevel 7
圧縮レベルは1〜10で、7〜8が品質と圧縮率のバランスが良い設定です。圧縮後は必ず3Dビュアーで見た目を確認してください。
gltf.reportで品質確認
gltf.reportはGLBファイルをブラウザ上で解析できる無料ツールです。ポリゴン数・テクスチャサイズ・ファイル内の構成を確認でき、最適化の改善点を具体的に把握できます。GLBエクスポート後は必ずgltf.reportで確認することをおすすめします。
よくある質問
よくある原因として、カスタムシェーダーの使用・ポリゴン数の超過・テクスチャサイズの超過・スケールの不一致などがあります。まずgltf.reportでGLBファイルを解析し、エラーや警告を確認してください。また、Principled BSDFシェーダーのみを使用しているか確認してください。
以下の方法でファイルサイズを削減できます。①Draco圧縮を適用する(60〜80%削減可能)、②テクスチャ画像をJPGに変換し解像度を下げる(1024×1024px以内)、③不要なポリゴンをDecimate Modifierで削減する、④不要なアニメーションやオブジェクトを削除する。
iOSのSafariはGLBの直接表示をサポートしておらず、USDZフォーマットが必要です。ただし、8th Wall・Vossle・UniteARなどのWebARプラットフォームはiOSでもGLBを表示できるよう内部で変換処理を行っています。GLBとUSDZの両方を用意するのがベストプラクティスです。