Three.js：負荷を軽くする3つのポイント

2018.07.20

弊社でWeb3Dを制作する際、Three.jsというライブラリを使用します。
今回はそのThree.jsで3Dモデルを表示する際、軽量化に効果的な3つのポイントをご紹介致します。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

【実際にthree.jsを使用したサービスのご紹介】

①バーチャルギャラリーサービス
GALLERISTIIID（ギャラリスト3D）
https://gallerist3d.com

②3DデータをWebGLに変換。見積シミュレータが作れる
だれでもシミュレータ
https://daredemo-3dsim.com

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

1. 3Dモデルにベーシックマテリアルを使用

Three.js内で3Dモデルを読み込むと、標準ではライティングを反映するマテリアル設定となります。ですがこの方法では毎フレームライティングを計算することになり、大きな負荷がかかってしまいます。
マテリアルをライトが反映されないベーシックマテリアルに変更することで、ライティング計算の負荷を省き、大幅な軽量化が可能となります。

ベイクマップの使用
しかしこのままですと、ライトが一切ない、暗く平坦なモデルに見えてしまいます。
そこで、3Dモデルにベイクマップを適用します。

ベイクマップとは
ベイクマップとは、3Dソフト等であらかじめライティングを計算し、擬似的にリアルな陰影を持ったテクスチャマップのことです。
ベイクマップを使用することで、表示を軽量化したまま、モデルのクオリティを保つことができます。

マップサイズについて
その際、マップサイズに気をつける必要があります。
大きすぎるとかえって負荷がかかりますし、逆に小さすぎると表示が汚くなり、モデルのクオリティが下がってしまいます。
また、その際準備するベイクマップの縦横ピクセル数を2のべき乗（2,4,8,16,32,64…）で準備するのも効果的です。メモリ効率を最適化でき、表示をよりスムーズにできます。

2. カメラ表示領域の設定

Three.js内のカメラで表示領域を設定できますが、むだに広い領域に設定してしまうと、3Dモデルのない部分も描画し続けてしまい、余計な負荷がかかってしまいます。
カメラヘルパーでカメラの表示領域を確認し、3Dモデルを表示する領域より外を描画しないように調節することで、余計な負荷を減らすことができます。