Three.jsによる大規模データビジュアライゼーション：10万ポイントを60FPSで描画する手法

Webブラウザ上で膨大なデータを可視化する際、従来のDOMベース（HTML/CSSやSVG）のアプローチでは、数千要素を超えたあたりからレンダリングのボトルネックが発生します。この制約を突破し、数万〜数十万のデータポイントをリアルタイムに処理・描画するために不可欠なのが、WebGLを活用したアプローチです。

本記事では、Three.jsを用いて100,000個のデータポイント（パーティクル）を60FPSで描画する技術デモとその実装のコア技術について解説します。

※マウスまたはタッチスワイプで視点操作が可能です。

実装のコア：BufferGeometryによるメモリ最適化

このデモで10万個のオブジェクトを滑らかに動かしている最大の要因は、Three.jsの THREE.BufferGeometry クラスと Float32Array 型付配列の使用にあります。

初心者によくある間違いは、データポイントごとに THREE.Mesh などの個別のオブジェクトを生成してしまうことです。10万個のMeshを生成すると、CPUからGPUへのドローコール（描画命令）が10万回発生し、ブラウザは即座にクラッシュします。

Float32Arrayによるデータの一括転送

これを解決するため、すべてのパーティクルの座標（X, Y, Z）や色（R, G, B）を1つの巨大な一次元配列（Float32Array）に格納します。

• positions = new Float32Array(100000 * 3)
• colors = new Float32Array(100000 * 3)

これらのデータを BufferGeometry の属性（Attribute）としてセットし、THREE.Points として描画することで、10万個のデータを「たった1回のドローコール」でGPUに一括送信することができます。これにより、CPUの負荷を劇的に下げ、GPUの並列処理能力を最大限に引き出しています。

想定される実務でのユースケース

この技術は、単なる視覚的なデモにとどまらず、以下のような実際のビジネスや研究における大規模データの可視化に直接応用できます。

1. AI・機械学習におけるクラスタリング結果の可視化

多次元データを主成分分析（PCA）やt-SNE等で3次元に次元削減した際、数万件に及ぶ教師データや予測結果の分布を3D空間にプロットできます。クラスタごとの色分けや、特定データ群の空間的な偏りを直感的に把握するUIとして機能します。

2. 地理空間情報・ユーザー行動マッピング

地球儀モデルと組み合わせることで、数十万のグローバルなトランザクションデータ、IoTデバイスのリアルタイムログ、あるいはWebサイトへのアクセス起点を、パーティクルとしてマッピング可能です。

3. ネットワークトラフィック・依存関係の表現

今回は球状にパーティクルを配置していますが、データセット（JSON等）の座標値を読み込ませることで、複雑なノードとエッジからなるネットワーク構造を、ブラウザ上で遅延なく探索可能な形で提供できます。

導入の手軽さ

この実装に必要なのは、ベースとなるHTMLファイルと、Three.jsのライブラリ本体のみです。複雑なビルド環境やプラグインは不要で、既存のWebシステム（管理画面やダッシュボード）の特定のdivコンテナ内に容易に組み込むことができます。

静的なグラフやチャートでは表現しきれない「データそのものの全体像と密度」をユーザーに体感させるツールとして、WebGLベースのパーティクルシステムは非常に有効な選択肢となります。