1. はじめに

ブラウザ上で数万〜数十万規模のパーティクルやエンティティを扱うシミュレーションや、WebGPUを用いた描画処理では、「計算コストの爆発」が避けて通れない課題になります。
すべてのオブジェクトに対して毎フレーム座標更新や衝突判定を行っていては、CPU・GPUともにすぐ限界に達してしまいます。

本記事では、この問題に対する実用的なアプローチとして、画面外のオブジェクト計算を大胆に省略する「確率雲（Probability Cloud）」という設計手法を紹介します。

2. 確率雲アプローチの基本概念

この手法の本質は非常にシンプルです。

「画面に見えていないものは、個体として存在させない」

オブジェクトの状態を次の2つに分けて管理します。

■ 画面外（確率雲状態）

個別の座標や速度は持たない
群れ全体を以下のような統計データで表現
- 平均位置（center）
- 平均速度（velocity）
- 密度・分布（spread）
- 個体数（count）

■ 画面内（実体状態）

実際のエンティティとして生成
各オブジェクトを個別にシミュレーション

この切り替えにより、計算量は次のように変化します：

画面内：O(N)（通常の個別計算）
画面外：O(1)（統計データ更新のみ）

たとえば10万個のオブジェクトが存在する場合でも、画面に映る1,000個だけを計算し、残りは「1つのデータ」として扱えます。

3. 実装イメージ（JavaScript）

以下はシンプルな実装例です。

/**
 * 確率雲マネージャー
 * 画面外では統計データのみ保持し、必要時に実体化する
 */
class ProbabilityCloudManager {
  constructor(totalCount) {
    this.cloudData = {
      count: totalCount,
      averageVelocity: { x: 0.5, y: 0.2 },
      centerPosition: { x: 5000, y: 5000 },
      spreadRadius: 500
    };

    this.activeEntities = [];
    this.isVisible = false;
  }

  update(cameraRect) {
    const distanceToCamera = Math.hypot(
      this.cloudData.centerPosition.x - cameraRect.x,
      this.cloudData.centerPosition.y - cameraRect.y
    );

    const threshold = 1000;

    if (distanceToCamera < threshold && !this.isVisible) {
      this.spawnEntities();
    } else if (distanceToCamera >= threshold && this.isVisible) {
      this.compressToCloud();
    }

    if (this.isVisible) {
      // O(N)
      for (let ent of this.activeEntities) {
        ent.x += ent.vx;
        ent.y += ent.vy;
      }
    } else {
      // O(1)
      this.cloudData.centerPosition.x += this.cloudData.averageVelocity.x;
      this.cloudData.centerPosition.y += this.cloudData.averageVelocity.y;
    }
  }

  spawnEntities() {
    this.isVisible = true;
    this.activeEntities = [];

    for (let i = 0; i < this.cloudData.count; i++) {
      this.activeEntities.push({
        x: this.cloudData.centerPosition.x + (Math.random() - 0.5) * this.cloudData.spreadRadius,
        y: this.cloudData.centerPosition.y + (Math.random() - 0.5) * this.cloudData.spreadRadius,
        vx: this.cloudData.averageVelocity.x + (Math.random() - 0.5),
        vy: this.cloudData.averageVelocity.y + (Math.random() - 0.5)
      });
    }
  }

  compressToCloud() {
    this.isVisible = false;

    // 実運用ではここで統計量を再計算する
    // (平均位置・速度など)
    
    this.activeEntities = [];
  }
}

4. 実践的な最適化テクニック

このアプローチは単体でも有効ですが、他の最適化と組み合わせることでさらに効果を発揮します。

■ ゼロアロケーション設計

Uint32Array / Float32Array などのTypedArrayで管理
オブジェクト生成を避け、GCを最小化

■ GPUフレンドリー設計

可視オブジェクトのみをGPUバッファへ転送
Compute Shaderの負荷を大幅削減

■ 疑似無限空間

未観測領域をノイズ関数や数式で定義
メモリを使わずに広大な空間を表現可能

■ LOD（Level of Detail）との併用

距離に応じて
- 粒子数
- 挙動の精度
  を段階的に変化させる

5. このアプローチが効くケース

特に以下のような場面で効果を発揮します：

パーティクルシステム（煙、群れ、流体）
大規模シミュレーション
RTS・MMOのような多数ユニット管理
WebGL / WebGPU 描画最適化
群集・生物系シミュレーション

6. まとめ

「すべてを正確に計算する」という前提を捨て、「観測される部分だけ整合性を保つ」という発想に切り替えることで、パフォーマンスは飛躍的に向上します。

確率雲アプローチは、

計算量削減（O(N) → O(1)）
メモリ削減
GPU負荷軽減

を同時に実現できる、非常に強力な設計パターンです。

大規模データやリアルタイムシミュレーションを扱う際の選択肢として、ぜひ取り入れてみてください。