2026-03-12

DRACO圧縮で3Dポートフォリオをさらに軽量化

KTX2やCycles Bakeで調整した3D ROOMに対して、DRACOメッシュ圧縮を導入し、ROOM.glbの転送サイズを2.29 MBまで削減した記録。

DRACO圧縮で3Dポートフォリオをさらに軽量化

DRACO圧縮で3Dポートフォリオをさらに軽量化

現在のROOMページでは、ROOM.glbKTX2 + Draco の構成に整理しています。

以前 6.82 MB まで戻っていた ROOM.glb の Network transfer は、
現在 2.29 MB まで下がっています。


現在の結果

主要な指標は次のように整理できています。

項目以前現在
ROOM.glb の転送サイズ6.82 MB2.29 MB
FPS(PC実測)57121
Draw Calls(PC実測)11,59469

初期計測から見ると、ROOM.glb の転送サイズは
49.07 MB → 2.29 MB で、約 95.3%削減 です。


現在の ROOM.glb

現在の ROOM.glb は次の構成です。

  • KHR_draco_mesh_compression
  • KHR_texture_basisu
  • 5枚image/ktx2 テクスチャ

ファイルサイズ自体も、現在は 2.41 MB まで整理できています。

読み込み側では RoomModel.tsxDRACOLoaderKTX2Loader の両方を設定しているため、
追加の実装変更なしでこの構成をそのまま利用できます。

なぜこの構成にしたか

今回の目的は、見た目を崩さずに ROOM.glb 単体の転送コストを下げることでした。

  • KTX2 でテクスチャ転送を圧縮
  • Draco でジオメトリを圧縮
  • そのうえで Draw Calls と描画構造の改善を維持

という形にすることで、画質を保ちながら読み込み負荷を抑えています。


まとめ

現在のROOMは、ROOM.glb の転送サイズを 6.82 MB → 2.29 MB まで削減しながら、
FPS は 57 → 121、Draw Calls は 11,594 → 69 まで改善した状態です。

3DをWebに載せる場合は、KTX2Draco を別々の役割で併用し、
描画構造も含めてまとめて調整するのが有効でした。