2026-02-24
3Dページの軽量化と最適化の記録
Three.jsで実装した3D ROOMを実機計測し、構造改善によってモバイル転送量を約92%削減し、KTX2段階でROOM.glbの転送サイズを約91%削減、CycleBake後も描画負荷を大きく改善した事例。
3D ROOM 最適化の記録
Three.jsで実装したポートフォリオ用の3D ROOMを公開前に実機検証したところ、
Web用途としては転送量・描画負荷ともに過剰な状態であることが分かりました。
特にモバイル環境では、
- 転送量
- DrawCalls
- ポリゴン数
の3つがパフォーマンスに大きく影響します。
見た目を崩さず、Webで扱える負荷まで落とすことを目的に改善を進めました。
測定方法
測定は以下の条件で行いました。
| 項目 | 内容 |
|---|---|
| 測定対象 | /room ページの3Dシーン全体 |
| 測定環境 | Chrome DevTools |
| Mobile測定 | Network Throttle（擬似モバイル回線） |
| Transfer | Chrome DevTools Network（初回ロード） |
| DrawCalls | renderer.info.render.calls |
| Triangles | renderer.info.render.triangles |
| FPS | 実機表示 |
※ DrawCalls / Triangles は 1フレーム単位の実測値です。
計測結果
| 状態 | 環境 | Transfer | Resources | Finish | DrawCalls | Triangles | FPS |
|---|---|---|---|---|---|---|---|
| 初期 | PC | 50.3 MB | 58.9 MB | 1.25 s | 11,594 | 20,793,278 | 57 |
| 初期 | Mobile | 93.2 MB | 98.9 MB | 1.61 s | 1,856 | 3,315,584 | 60 |
| テクスチャ・影最適化後 | PC | 5.8 MB | 14.8 MB | 0.659 s | 110 | 198,581 | 120 |
| テクスチャ・影最適化後 | Mobile | 7.66 MB | 12.2 MB | 0.737 s | 86 | 176,759 | 60 |
| CycleBake＋テクスチャ最適化後 | PC | 7.9 MB | 14.7 MB | 0.596 s | 69 | 215,331 | 121 |
| CycleBake＋テクスチャ最適化後 | Mobile | 7.66 MB | 12.2 MB | 0.707 s | 69 | 215,331 | 60 |
画像比較
比較用の画像を並べます。
① Before（最適化前）
② KTX2化（テクスチャ最適化）
※ この時点ではオブジェクトも一部変更しています。
③ Final（Cycles Bake + KTX2適用後）
改善結果
主要な指標は次のように改善しました。
Transfer
PC
50.3 MB → 7.9 MB
Mobile
93.2 MB → 7.66 MB
ROOM.glb の転送サイズ
KTX2適用前
49.07 MB → 4.27 MB（テクスチャ・影最適化後）
CycleBake後
49.07 MB → 6.83 MB（CycleBake＋テクスチャ最適化後）
※ Chrome DevTools の Size 欄ベースで、MB表記は小数第2位で丸めています。
KTX2適用時点で約 91.3%削減、CycleBake後でも初期比で約 86.1%削減 できています。
DrawCalls
PC
11,594 → 69
Triangles
PC
20,793,278 → 215,331
実施した最適化
今回行った主な改善は次の4点です。
テクスチャ圧縮
不要に高解像度だったテクスチャを整理し、
Web用途に適したサイズへ圧縮しました。
以下は、KTX2圧縮とCycles Bakeを適用した際の計測ログです。
テクスチャ由来の転送量が大きく落ちていることを確認できます。
この時点で、Network上の ROOM.glb も 49.07 MB → 4.27 MB まで縮小しています。
一方で、Cycles Bake後の計測では ROOM.glb が 6.83 MB まで一度増えています。
そのため、ベイク後にテクスチャ構成が増えたことが、転送サイズが一度大きくなった主な要因だと考えています。
つまり、CycleBakeの段階では ROOM.glb 単体の転送サイズは少し戻っていますが、
- 初期状態との比較では依然として大幅に軽量
- DrawCalls は 69 まで削減
- FPS は 121 まで改善
しているため、全体としては見た目と描画負荷のバランスが改善した状態です。
※ KTX2適用後の通信量変化と、Cycles Bake適用後の状態を比較したログです。見た目を維持しながら、転送量をどこまで落とせたかの確認用として載せています。
Shadow設定の見直し
ShadowMapは描画パスを増やすため、
Web環境では大きな負荷になります。
そこで
- Shadow解像度
- ライト数
を整理し、描画コストを削減しました。
Cycles Bake
BlenderのCyclesを使用して
- ライティング
- 質感
をベイクし、
リアルタイム計算を減らしながら見た目を改善しました。
Web向け描画構造の整理
3Dアセット構造を見直し、
- 不要ポリゴン削除
- 描画対象の整理
- マテリアル構造の整理
を行いました。
これにより
DrawCallsとポリゴン数を大幅に削減できました。
補足
CycleBake後に Triangles がやや増加しています。
これは最適化による増加ではなく、
計測時のカメラ視野角や描画範囲の違いにより、そのフレームで描画対象が増えたためと考えられます。
一方で
- DrawCalls はさらに減少
- FPS は維持
しているため、
最終的なパフォーマンスは安定しています。
まとめ
Blenderベースで制作した3Dシーンを、
- 転送量
- 描画負荷
- Webパフォーマンス
の観点から再設計することで、
見た目を保ったままWeb用途に適した軽量な3D空間へ最適化することができました。
続き
この最適化後、さらに ROOM.glb 自体へDraco圧縮を適用して、
3Dモデル本体のサイズも追加で削減しました。
最終的には、ROOM.glb の転送サイズを 49.07 MB → 2.29 MB まで削減し、FPS は 57 → 121、Draw Calls は 11,594 → 69 まで改善しています。
続きはこちらです。
DRACO圧縮で3Dポートフォリオをさらに軽量化