Three.jsの負荷軽減のTips

2022年10月1日

こんにちは！
XRクリエイターの伊東（@ALAKIWebVRAR1）です。

※TwitterでもWebXRの事を中心に情報発信中です。
よかったらフォローお願いします！
Follow @ALAKIWebVRAR1

今私は、ある実装で、Open Streat Mapから生成した大阪駅付近の3DマップをThree.jsに読み込み、一人称視点で3Dマップの中をうろうろする、という楽しいことをしています。

3Dマップ（objファイル）の容量がなかなか大きく、Three.jsの凝ったコントローラと掛け合わせるとかなり動作がもっさりしてしまいます。

今回は、負荷が大きくなりがちな実装をする際に、どうやって負荷軽減をして安定した動作を実現するかというお話しです。
具体的な実装例をまとめました。今後も新しい知見があればこちらに足していきます。
ご参考になれば幸いです。

この記事の目次

1 アンチエイリアスを無効にする
2 フレームレートを下げる
3 Cameraのfarを下げる
4 PixelRatioを固定する
5 最後に

アンチエイリアスを無効にする

Three.jsのrendererには、オプションでアンチエイリアスの設定をすることができます。
通常、3Dオブジェクトの輪郭がギザギザしてしまうことがありますが、アンチエイリアスをかけてあげると輪郭の見え方が滑らかになります。
優れた機能ですが、その分計算コストも大きく、アンチエイリアスを無効にしてあげると負荷も軽減されます。

ちなみにデフォルト値はアンチエイリアスが無効になっていますが、公式のサンプルからソースコード流用したりしていると、アンチエイリアスが有効になっている場合があります。

その場合は、以下のようにしてあげると無効になります。

renderer = new THREE.WebGLRenderer( {
	antialias: false,
} );

renderer = new THREE.WebGLRenderer( {

antialias: false,

} );

見た目の良さをとるか、負荷軽減をとるか、アンチエイリアスの有効/無効を切り替えてみて、ご検討ください。

フレームレートを下げる

フレームレート、いわゆるFPS（Frame Per Second）のことで、1秒間に何フレーム処理するかということです。
※冒頭の一人称視点 = FPS（First Person Shooter）とややこしいですね

理想は60fpsで、負荷の程度とマシンスペック、PCの使用状況によって、FPSは下がって行ったり、また60fpsに近づいたりします。
不安定になると動作が不快なので、あえてFPSを下げた状態で安定させるテクニックをご紹介します。

let frame;

function animate() {
	requestAnimationFrame( animate );

  	/* フレーム数をカウント */
  	frame++;

  	/* 偶数フレームをスキップ */
	if (frame % 2 == 0) {
		return;
	}
}

let frame;

function animate() {

requestAnimationFrame( animate );

/* フレーム数をカウント */

frame++;

/* 偶数フレームをスキップ */

if (frame % 2 == 0) {

return;

}

※こちらを参考にさせていただきました！
https://ics.media/entry/12930/

上記の例だと、通常が60fpsであれば、30fpsで動作させるということになります。
私が実装しているケースでは、動作の荒さはそこまで目立たず、ストレスなく動かすことができました。

Cameraのfarを下げる

Three.jsのCameraの値には、nearとfarというプロパティが存在しています。
文字通り、CameraがSceneを写すとき、near = どこまで近くのものまで写せるか、far = どこまで遠くのものまで写せるか、ということになります。

farの値を大きくすれば、それだけたくさんのオブジェクトを描画する必要があるため、負荷も大きくなります。
farを適切に調整することで、負荷を軽減することをお勧めします。

以下のコードの「100」という最後の引数が、farにあたります。

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );

1	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );

PixelRatioを固定する

PixelRatioとは、Sceneを描画する時のCanvasの「解像度」のことです。
どのデバイスでも最大の解像度で描画したい場合、window.devicePixelRatioという値をRendererに設定して、デバイスごとに解像度を最適化してたりします。

解像度が高ければ描画コストも高くなりますので、どのデバイスでも一律描画領域に対して1倍の解像度を設定することで、負荷を軽減する方法をご紹介します。