WebARで3Dモデルを公開したとき「表示が遅い」「スマホで固まる」という問題に直面したことはありませんか?その原因の多くは3Dファイルのサイズが大きすぎることです。WebAR向けには、GLBファイルを5MB以下・ポリゴン数10万以下に最適化することが推奨されています。本記事では、Blenderでのポリゴン削減からgltf-transformによる自動最適化まで、具体的な手順をステップバイステップで解説します。
軽量化の目標値
| 指標 | 推奨値(WebAR) | 許容最大値 |
|---|---|---|
| GLBファイルサイズ | 2MB以下 | 5MB |
| ポリゴン数(三角形) | 5万以下 | 10万 |
| テクスチャ解像度 | 1024×1024 | 2048×2048 |
| テクスチャ枚数 | 1〜2枚 | 4枚 |
| マテリアル数 | 1〜2個 | 5個 |
Blenderでのポリゴン削減手順(デシメート)
デシメートモディファイアの使い方
Blenderの「デシメートモディファイア」を使うと、モデルの見た目を保ちながらポリゴン数を削減できます。
- Step1:Blenderでオブジェクトを選択 → 「プロパティ」→「モディファイア」→「モディファイアを追加」→「デシメート」を選択
- Step2:「モード」を「崩壊」に設定し、「比率」を調整(例:0.5で約50%削減)
- Step3:ビューポートで見た目を確認しながら比率を微調整する(最終的に10万三角形以下を目標に)
- Step4:「適用」してモディファイアを確定する
リメッシュで一から作り直す方法
スキャンデータなどポリゴンが非常に多いモデルには「リメッシュ」が有効です。スカルプトモード → リメッシュ → Voxelサイズを0.01〜0.05に設定してCtrl+Rで均等なポリゴンに再構成できます。
テクスチャ圧縮(KTX2/Basis)
Basis Universal(KTX2形式)とは
テクスチャはGLBファイルサイズの大部分を占めます。PNGやJPEGをそのまま使うのではなく、KTX2形式(Basis Universal圧縮)に変換することで、ファイルサイズを1/5〜1/10に削減しながらGPU上での展開が高速になります。
テクスチャ解像度のリサイズ
まずBlenderのノードエディタで使用中のテクスチャを確認し、不要な高解像度テクスチャを1024×1024または512×512にリサイズします。ImageMagickを使う場合のコマンド例:
magick input.png -resize 1024x1024 output.png
Draco圧縮コマンド
Draco(Googleのメッシュ圧縮技術)を使うと、ジオメトリデータをさらに50〜80%削減できます。gltf-transformのCLIで一発変換できます。
# インストール
npm install -g @gltf-transform/cli
# Draco圧縮(ジオメトリのみ)
gltf-transform draco input.glb output_draco.glb
# テクスチャ圧縮(KTX2)を合わせて実行
gltf-transform optimize input.glb output_optimized.glb --texture-compress ktx2
gltf-transformの使い方
最適化パイプライン一括実行
# 全最適化を一括適用
gltf-transform optimize input.glb output.glb --texture-compress webp --texture-size 1024
# 結果を確認
gltf-transform inspect output.glb
inspectコマンドで、最適化後のポリゴン数・テクスチャサイズ・マテリアル数を確認できます。
gltf.reportでの品質確認
gltf.reportは無料のブラウザツールで、GLBファイルをアップロードするだけで以下を確認できます。
- ファイルサイズ・テクスチャサイズ・ポリゴン数の一覧
- マテリアル・テクスチャのプレビュー
- 最適化の提案(Suggestions)
- before/afterのビジュアル比較
Before/After比較
| 指標 | 最適化前 | 最適化後 | 削減率 |
|---|---|---|---|
| GLBファイルサイズ | 28.4MB | 2.1MB | -93% |
| ポリゴン数 | 450,000三角形 | 48,000三角形 | -89% |
| テクスチャ解像度 | 4096×4096 PNG | 1024×1024 KTX2 | -98%(容量) |
| スマホでの読み込み時間 | 18秒 | 2.3秒 | -87% |
よくある質問
主要ブラウザ(Chrome・Safari・Firefox・Edge)の最新版はDraco圧縮に対応しています。ただしmodel-viewerやThree.jsなど描画ライブラリ側でもDracoデコーダーの読み込みが必要です。
過度に削減すると輪郭がカクカクします。デシメート比率を徐々に下げながら確認し、問題ない範囲で削減してください。ノーマルマップを活用することで、低ポリゴンでも高品質に見せる手法もあります。
はい。gltf-transformはMITライセンスの完全無料OSSです。npmでインストールしてCLIまたはJavaScript APIとして使用でき、商用プロジェクトにも制限なく使えます。