Three.js大規模ギャラリー最適化：WebGLコンテキスト限界突破とパフォーマンス改善の実践

Three.jsで大規模な3Dモデルギャラリーを構築する際、WebGLコンテキストの限界やパフォーマンスの問題に直面することは避けられません。この記事では、私が実際に直面した課題と、それを乗り越えるために編み出した独自の最適化テクニックを共有します。単なる一般的な解説ではなく、一歩踏み込んだ実践的なアプローチで、あなたのギャラリーを劇的に改善するヒントを提供します。

Three.jsギャラリーにおけるWebGLコンテキスト問題：ボトルネックの特定と対策

大規模ギャラリーでは、大量のモデル、テクスチャ、ジオメトリがWebGLコンテキストを圧迫し、最悪の場合、コンテキストロスを引き起こします。しかし、単に「モデルを減らす」だけでは解決策になりません。ボトルネックを特定し、ピンポイントで対策を講じることが重要です。

私が最初に行ったのは、WebGL Inspectorを使った詳細なプロファイリングです。単純なフレームレートの低下だけでなく、どの draw call が最も負荷が高いのか、どのテクスチャがメモリを消費しているのかを可視化します。

重要なのは、draw call の削減です。Three.js は draw call 毎に GPU に命令を送るため、これが多すぎるとオーバーヘッドが大きくなります。対策として、後述するインスタンス化やマテリアルの共有が有効ですが、それ以外にも、オブジェクトの表示/非表示を頻繁に切り替えることも draw call を増加させる原因となります。

そこで私が試したのが、Frustum Culling の精度向上です。Three.js はデフォルトで Frustum Culling を行いますが、モデルが複雑な形状の場合、完全に画面外に出ていないと判断され、無駄な draw call が発生する可能性があります。そこで、モデルの bounding sphere をよりタイトに調整することで、より正確な Frustum Culling を実現し、draw call を削減しました。

// モデルの bounding sphere を調整する例
model.traverse(child => {
  if (child.isMesh) {
    child.geometry.computeBoundingSphere();
    // bounding sphere の半径を少し小さくする (調整が必要)
    child.geometry.boundingSphere.radius *= 0.9;
  }
});

遅延ロード戦略：Intersection Observer APIを活用した効率的なモデル読み込み

ギャラリー全体のロード時間を短縮するために、Intersection Observer API を活用した遅延ロードは必須です。しかし、単に「画面に表示されたらロードする」だけでは、ユーザーがスクロールする度に読み込みが発生し、カクつきの原因となります。

私が採用したのは、予測ロードです。Intersection Observer API で要素が画面に入る少し前に読み込みを開始し、ユーザーが実際に要素を見る頃にはロードが完了しているようにします。

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 画面に入る少し前にロードを開始する
      setTimeout(() => {
        loadModel(entry.target);
        observer.unobserve(entry.target); // 一度ロードしたら監視を停止
      }, 200); // 200ms 後にロード開始 (調整が必要)
    }
  });
});

const modelElements = document.querySelectorAll('.model-element');
modelElements.forEach(element => {
  observer.observe(element);
});

さらに、ロード優先度の設定も重要です。ユーザーが現在見ているエリアのモデルを優先的にロードし、それ以外のモデルは後回しにすることで、初期表示速度を向上させます。

オブジェクトプーリングとインスタンス化：メモリ効率を最大化するテクニック

同じモデルを複数表示する場合、オブジェクトプーリングとインスタンス化はメモリ効率を劇的に向上させる強力なテクニックです。しかし、単に THREE.InstancedMesh を使うだけでは、パフォーマンスが十分に発揮されない場合があります。

私が特に意識したのは、インスタンス化するジオメトリの最適化です。複雑なジオメトリをそのままインスタンス化すると、GPU の負荷が高まります。そこで、Lod (Level of Detail) を活用し、距離に応じてジオメトリの詳細度を下げることで、パフォーマンスを改善しました。

// Lod を設定する例
const lod = new THREE.LOD();

// 高解像度ジオメトリ
const highResGeometry = new THREE.BoxGeometry(1, 1, 1);
const highResMesh = new THREE.Mesh(highResGeometry, material);
lod.addLevel(highResMesh, 0); // 距離 0 から表示

// 低解像度ジオメトリ
const lowResGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
const lowResMesh = new THREE.Mesh(lowResGeometry, material);
lod.addLevel(lowResMesh, 50); // 距離 50 から表示

lod.updateMatrixWorld(true); // LOD の行列を更新

instancedMesh.add(lod); // インスタンスメッシュに追加

また、インスタンス化するマテリアルの最適化も重要です。インスタンス毎に異なるマテリアルを使用すると、draw call が増加し、パフォーマンスが低下します。可能な限り、マテリアルを共有し、インスタンス毎に異なる色やテクスチャを適用する場合は、THREE.ShaderMaterial を使用してカスタムシェーダーで処理することで、draw call を削減できます。

テクスチャ最適化：圧縮、ミップマップ生成、アトラス化によるGPU負荷軽減

テクスチャは GPU のメモリを大きく消費するため、最適化は必須です。しかし、単に画像を圧縮するだけでは、画質が劣化し、ユーザー体験を損なう可能性があります。

私が採用したのは、可逆圧縮と非可逆圧縮の組み合わせです。重要なテクスチャ（ロゴやUIなど）は可逆圧縮（PNG）を使用し、それ以外のテクスチャ（背景やモデルのテクスチャ）は非可逆圧縮（JPEGやWebP）を使用することで、画質とファイルサイズのバランスを取ります。

さらに、テクスチャアトラスの作成も重要です。複数の小さなテクスチャを1つの大きなテクスチャにまとめることで、draw call を削減できます。Three.js には、テクスチャアトラスを生成する機能は組み込まれていませんが、TexturePacker などのツールを使用することで簡単に作成できます。

// TexturePacker で作成したテクスチャアトラスの UV を設定する例
const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial({ map: textureAtlas });

// テクスチャアトラス内の特定の領域の UV を設定
const uvAttribute = geometry.attributes.uv;
uvAttribute.setXY(0, 0, 0); // 左下
uvAttribute.setXY(1, 0.25, 0); // 右下
uvAttribute.setXY(2, 0, 0.25); // 左上
uvAttribute.setXY(3, 0.25, 0.25); // 右上
uvAttribute.needsUpdate = true;

シェーダー最適化：カスタムシェーダーによる描画処理の効率化とパフォーマンスチューニング

Three.js の標準マテリアルは便利ですが、大規模ギャラリーでは、より効率的な描画処理を実現するために、カスタムシェーダーの利用を検討する価値があります。

私がカスタムシェーダーを導入したのは、ライティング処理の簡略化です。Three.js の標準ライティングは非常に高機能ですが、その分処理も重くなります。そこで、ギャラリーの雰囲気に合わせて、よりシンプルなライティングモデルを実装することで、パフォーマンスを向上させました。

// シンプルな Phong ライティングのシェーダー例
varying vec3 vNormal;
varying vec3 vPosition;

void main() {
  vNormal = normalMatrix * normal;
  vPosition = (modelMatrix * vec4(position, 1.0)).xyz;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// フラグメントシェーダー
uniform vec3 lightDirection;
uniform vec3 ambientColor;
uniform vec3 diffuseColor;
uniform vec3 specularColor;
uniform float shininess;

varying vec3 vNormal;
varying vec3 vPosition;

void main() {
  vec3 normal = normalize(vNormal);
  vec3 lightDir = normalize(lightDirection);
  vec3 viewDir = normalize(cameraPosition - vPosition);
  vec3 reflectDir = reflect(-lightDir, normal);

  float diffuse = max(dot(normal, lightDir), 0.0);
  float specular = pow(max(dot(viewDir, reflectDir), 0.0), shininess);

  vec3 ambient = ambientColor;
  vec3 diffuseComponent = diffuseColor * diffuse;
  vec3 specularComponent = specularColor * specular;

  gl_FragColor = vec4(ambient + diffuseComponent + specularComponent, 1.0);
}

さらに、ポストエフェクトの最適化も重要です。Three.js には多くのポストエフェクトが用意されていますが、処理負荷の高いエフェクトを使用すると、フレームレートが大幅に低下します。そこで、ポストエフェクトの数を減らす、解像度を下げる、より効率的なアルゴリズムを使用するなどの対策を講じる必要があります。

実装例：Three.js + Reactによる大規模ギャラリー構築のステップバイステップ

React は Three.js と相性が良く、大規模ギャラリーの構築に適しています。以下は、React で Three.js ギャラリーを構築する際の基本的なステップです。

1. React Three Fiber の導入: React で Three.js を扱うためのライブラリです。宣言的な記述で Three.js のシーンを構築できます。
2. コンポーネント分割: モデルの表示、カメラの制御、ライトの設定など、機能をコンポーネントに分割することで、コードの可読性と保守性を向上させます。
3. 状態管理: モデルのロード状態、カメラの位置、ライトの色などを React の state で管理することで、インタラクティブなギャラリーを構築できます。
4. パフォーマンス最適化: 前述の最適化テクニックを React のコンポーネントに組み込むことで、パフォーマンスの高いギャラリーを実現します。

// React Three Fiber の例
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

function Model({ url }) {
  const { scene } = useLoader(GLTFLoader, url);
  return <primitive object={scene} />;
}

function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} />
      <Model url="/path/to/model.glb" />
      <OrbitControls />
    </Canvas>
  );
}

パフォーマンス計測とトラブルシューティング：フレームレート監視、プロファイリング、メモリリーク対策

パフォーマンスの計測とトラブルシューティングは、最適化のサイクルにおいて不可欠なステップです。フレームレートの監視、プロファイリング、メモリリーク対策を徹底することで、潜在的な問題を早期に発見し、解決することができます。

私が使用しているツールは、Chrome DevTools の Performance タブです。CPU 使用率、GPU 使用率、メモリ使用量などを詳細に分析できます。特に、Timeline 機能は、フレーム毎の処理時間を可視化し、ボトルネックを特定するのに役立ちます。

メモリリーク対策としては、Three.js のオブジェクトを適切に破棄することが重要です。ジオメトリ、マテリアル、テクスチャなど、不要になったオブジェクトは dispose() メソッドを呼び出して、メモリから解放する必要があります。

// オブジェクトを破棄する例
geometry.dispose();
material.dispose();
texture.dispose();

WebGLコンテキストロスの回避と復旧：予期せぬエラーへの備えと対応

WebGL コンテキストロスは、ブラウザのタブを切り替えたり、他のアプリケーションが GPU リソースを消費したりした場合に発生する可能性があります。予期せぬエラーに備え、コンテキストロスの回避と復旧策を講じることは、安定したギャラリーを提供するために重要です。

コンテキストロスの回避策としては、GPU の負荷を軽減することが最も効果的です。前述の最適化テクニックを徹底することで、コンテキストロスの発生頻度を減らすことができます。

コンテキストロスが発生した場合の復旧策としては、シーンを再構築する必要があります。Three.js には、コンテキストロスのイベントを検知する機能が組み込まれており、このイベントが発生した場合に、シーンを再構築する処理を実行します。

// コンテキストロスのイベントを検知する例
renderer.domElement.addEventListener('webglcontextlost', function(event) {
  event.preventDefault();
  console.log('WebGL コンテキストが失われました');
  // シーンを再構築する処理を実行する
  rebuildScene();
}, false);

重要なのは、ユーザーにコンテキストロスが発生したことを通知し、ページのリロードを促すのではなく、自動的に復旧を試みることです。 これにより、ユーザー体験を損なうことなく、ギャラリーを継続して利用してもらうことができます。

この記事が、あなたの Three.js 大規模ギャラリー構築の一助となれば幸いです。