2026-02-24

3Dページの軽量化と最適化の記録

Three.jsで実装した3D ROOMを実機計測し、構造改善によってモバイル転送量を約92%削減した事例。

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

画像比較

以下の3枚を配置すると、最適化プロセスが視覚的に理解しやすくなります。

① Before（最適化前）

Before Scene

② KTX2化（テクスチャ最適化）

<small>※ オブジェクトも一部変わっています。</small>

Bake Scene

③ Final（Cycles Bake + KTX2適用後）

Final Scene

改善結果

主要な指標は次のように改善しました。

Transfer

PC
50.3MB → 7.9MB

Mobile
93.2MB → 7.66MB

DrawCalls

PC
11,594 → 69

Triangles

PC
20,793,278 → 215,331

実施した最適化

今回行った主な改善は次の4点です。

テクスチャ圧縮

不要に高解像度だったテクスチャを整理し、
Web用途に適したサイズへ圧縮しました。

Shadow設定の見直し

ShadowMapは描画パスを増やすため、
Web環境では大きな負荷になります。

そこで

Shadow解像度
ライト数

を整理し、描画コストを削減しました。

Cycles Bake

BlenderのCyclesを使用して

ライティング
質感

をベイクし、
リアルタイム計算を減らしながら見た目を改善しました。

Web向け描画構造の整理

3Dアセット構造を見直し、

不要ポリゴン削除
描画対象の整理
マテリアル構造の整理

を行いました。

これにより
DrawCallsとポリゴン数を大幅に削減できました。

補足

CycleBake後に Triangles がやや増加しています。

これは最適化による増加ではなく、
計測時のカメラ視野角や描画範囲の違いにより、そのフレームで描画対象が増えたためと考えられます。

一方で

DrawCalls はさらに減少
FPS は維持

しているため、
最終的なパフォーマンスは安定しています。

まとめ

Blenderベースで制作した3Dシーンを、

転送量
描画負荷
Webパフォーマンス

の観点から再設計することで、

見た目を保ったままWeb用途に適した軽量な3D空間へ最適化することができました。

記事一覧に戻る