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

2018.07.20

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

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

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

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

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

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

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

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

3. ポリゴンの最適化

モデルは基本的に3Dソフト等で制作したものを読み込みますが、
その際モデルのポリゴン数(面の分割数)が多いと、それだけサイズも大きくなり、表示の際の負荷も大きくなってしまいます。

最適化のコツ
平面内の分割数はなるべく少なくし、網目などの複雑な造形はテクスチャで再現することでポリゴン数を大きく節約することができます。

ex. statsの使用

Three.jsには、現在のFPS(秒間フレーム数)等を表示するstats機能があります。
軽量化作業の際、まずstatsを表示し、数値を比較検証すると効果的です。

以上、3つのポイントをご紹介しました。
Web3Dは負荷が高くなりがちですので、最適化しないと 表示が重くなるだけでなく、PCやスマートフォンに大きな負荷をかけ、発熱やクラッシュの原因となりかねません。

上記のような方法で軽量化することにより、安定したWeb3Dコンテンツの制作が期待できると思われます。

satoshi

投稿者:satoshi

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

TOPへ