Three.js を軽量化する方法について解説
Three.js とは？
hree.js は、WebGL を活用して 3D グラフィックスを簡単に扱うための JavaScript ライブラリです。
WebGL の複雑なコードを書く必要がなく、直感的に 3D オブジェクトやパーティクル、アニメーションを作成できるため、動的でインタラクティブなウェブコンテンツの開発に適しています。
Three.js を用いた描画は最適化されておりブラウザ上でも高速に描画処理を行ってくれます。
しかし、高解像度な 3D オブジェクトや光を利用する場合は処理落ちしてしまい、サイトが重たくなってしまうこともあります。
本ページでは、Three.js を使用した際の処理速度軽量化のための方法について説明します。
Three.js による描画処理の最適化方法
Three.js を使った描画パフォーマンスを改善するための具体的なアプローチをいくつかご紹介します。
レンダリング解像度の動的調整
Three.js はレンダリング解像度を低く設定することによって負荷が軽減されます。
しかし、解像度を落とすともちろん少しボケてしまうため、スペックが低い端末や一部の処理が重たい場面だけ一時的に解像度を下げ、FPS が安定したら解像度を元に戻す仕組みを導入します。
サンプルコード
const targetFps = 60;
let dynamicScale = 1;
const performanceMonitor = () => {
const fps = getCurrentFps(); // フレームレートを測定する関数を実装
if (fps < targetFps) {
dynamicScale = Math.max(0.5, dynamicScale - 0.1);
}
else if (fps > targetFps + 10) {
dynamicScale = Math.min(1, dynamicScale + 0.1);
}
renderer.setSize(window.innerWidth * dynamicScale, window.innerHeight * dynamicScale);
effectComposers.forEach(composer => composer.setSize(window.innerWidth * dynamicScale, window.innerHeight * dynamicScale));
};
setInterval(performanceMonitor, 500); // 定期的に監視
ピクセル比の調整
setPixelRatio に固定値の 1 を渡すことによって負荷を軽減することができます。
// 一般的な処理
this.renderer.setPixelRatio(window.devicePixelRatio);
// 少し軽量
this.renderer.setPixelRatio(1);
不要なオブジェクトの削除
シーン内に存在する不要なオブジェクトを積極的に削除することでメモリを節約できます。
this.scene.traverse(object => {
if (object.isMesh && object.geometry) {
object.geometry.dispose();
}
if (object.material) {
if (Array.isArray(object.material)) {
object.material.forEach(mat => mat.dispose());
} else {
object.material.dispose();
}
}
});がガベージコレクションの最適化
もし、シーンを変更するような処理が含まれる場合は、リソースが正しく破棄されているかを確認してみてください。
サンプルコード
this.renderer.dispose();
this.renderer.forceContextLoss();
this.scene.children.slice().forEach(child => this.scene.remove(child)); // 全オブジェクト削除まとめ
Three.js を用いてパフォーマンスを最適化する際には、ジオメトリやマテリアルの選定、テクスチャの管理、ライトやシャドウの設定、そしてアニメーションの効率化が重要なポイントです。
ご紹介した最適化手法を活用することで、描画パフォーマンスを向上させ、より滑らかで快適な 3D 表現の実現に近づけるはずです。
