Spectral Lab Pro v5.0 - High Fidelity WebGL Physics Engine

Spectral Lab Pro は、ブラウザ上で動作する物理シミュレーションおよび可視化エンジンです。外部ライブラリ（Three.jsなど）に依存せず、生の WebGL 2.0 API と GLSL (OpenGL Shading Language) のみを直接操作することで、数百万ピクセル規模の並列計算をリアルタイム（60FPS）で実行します。

波動方程式（ベルレ法）、流体力学（セミ・ラグランジュ法）、複素数演算（フラクタル）など、異なる数学モデルを同一のレンダリングパイプライン上で統合し、科学的可視化（Scientific Visualization）の手法を用いて美しく描画します。

---

🔗 Live Demo / 動作デモ

ブラウザで直接シミュレーションを体験できます（PC推奨）：

👉 Launch Spectral Lab Pro (GitHub Pages)

注意: 高度な浮動小数点テクスチャ演算を行うため、GPUを搭載したPCでの閲覧を推奨します。

---

📚 目次

1. 主要機能 (Key Features)
2. シミュレーションモード詳細
3. 技術アーキテクチャ
   • レンダリングパイプライン
   • データ構造とバッファ
4. 数学的・物理的モデル
   • 波動方程式 (Wave Equation)
   • 流体シミュレーション (Fluid Dynamics)
   • 境界条件と相互作用
5. 視覚化とポストプロセス
6. パフォーマンス最適化
7. セットアップと開発
8. ライセンス

---

🚀 主要機能 (Key Features)

• Zero Dependencies: 外部のWebGLライブラリを一切使用せず、ネイティブAPIのみで構築された軽量かつ堅牢な設計。
• GPGPU Computation: 全ての物理計算をフラグメントシェーダー内で行うことで、CPUへの負荷を最小限に抑えつつ大規模並列処理を実現。
• Multi-Model Physics: 波動、流体、フラクタル、粒子干渉など、全く異なる物理法則を瞬時に切り替え可能。
• Interactive UI: パラメータ（周波数、粘性、減衰率など）をリアルタイムに変更し、即座に系への影響を確認可能。
• Dynamic Boundaries: ユーザーがマウスで「壁」や「障害物」を動的に描画し、波の回折や反射を実験可能。
• Scientific Rendering: Turboカラーマップ（視覚的均等性を持つ配色）と物理ベースの光学的ブルーム（Bloom）効果による高品質な映像表現。

---

🔬 シミュレーションモード詳細

本エンジンは以下の6つの計算モードを搭載しています。

1. WAVE (波動)

古典的な波動方程式 $\frac{\partial^2 u}{\partial t^2} = c^2 \nabla^2 u$ を離散化して解きます。波の伝播、反射、干渉、回折といった現象を忠実に再現します。壁による反射はノイマン境界条件とディリクレ境界条件の混合で処理されます。

2. FRACTAL (フラクタル)

ジュリア集合（Julia Set）の軌道トラップ法を用いたジェネレーティブアートモードです。カオス力学系における非線形な挙動を可視化します。マウス位置が複素平面上の定数 $C$ にマッピングされ、リアルタイムにフラクタル形状が変容します。

3. FLUID (流体)

ナビエ・ストークス方程式を簡略化した「セミ・ラグランジュ法」に基づく流体ソルバーです。

• 移流 (Advection): 速度場に従って物質（色）を運搬。
• 拡散 (Diffusion): 粘性によるぼかし処理。
• 外力 (External Force): マウスドラッグによる速度ベクトルの注入。
• 渦度閉じ込め (Vorticity Confinement): 消失しやすい微細な渦を増幅・維持する処理。

4. KALEIDO (万華鏡)

空間トポロジーを折り畳むことで、万華鏡のような対称性を生成します。計算空間の座標 $(u, v)$ を極座標変換し、角度成分をモジュロ演算することで、鏡面対称な境界条件を作り出します。

5. VORONOI (ボロノイ)

セル・オートマトン的なアプローチとプロシージャルノイズを組み合わせ、細胞状の境界壁を動的に生成します。波が複雑な迷路を通過する際の経路探索的な挙動を観察できます。

6. SLIT (二重スリット実験)

量子力学でも有名な「ヤングの干渉実験」のシミュレーションです。左端から平面波を発生させ、二つのスリットを持つ障壁を通過させることで、スクリーンの向こう側に干渉縞（Interference Pattern）が形成される様子を可視化します。

---

🛠 技術アーキテクチャ

本システムは、Ping-Pong Buffering と呼ばれるテクニックを用いたステートフルなシミュレーションループで構成されています。

レンダリングパイプライン

1. Input Handling: マウス座標、UIスライダーの値をJavaScriptで取得し、Uniform変数としてGPUへ転送。
2. Map Generation Pass: 障害物（壁）情報を保持するテクスチャを生成・更新。
   • ユーザーのブラシ入力またはプロシージャル生成（ボロノイ等）を合成。
3. Physics Simulation Pass (GPGPU):
   • 前フレームの状態（uPrev）と現在の状態（uCurr）を入力テクスチャとして受け取る。
   • 物理方程式に基づき次フレームの状態（Next）を計算。
   • 結果を浮動小数点フレームバッファ（FBO）に出力。
4. Post-Processing Pass:
   • シミュレーション結果（振幅データ）を色に変換。
   • 法線マップを動的に生成し、ライティング効果を適用。
   • ガウシアンブラーによるBloom（発光）効果を合成。
   • ガンマ補正とビネット効果で最終的な画作りを行う。
5. Swap Buffers: 現在のフレームバッファと次フレームのバッファを入れ替え、ループを継続。

データ構造とバッファ

物理精度を維持するため、以下の仕様でテクスチャを使用しています。

• Internal Format: gl.RGBA16F (16ビット浮動小数点)。
  • 8ビット（0-255）では物理計算に必要なダイナミックレンジと精度（負の値の保持など）が不足するため、浮動小数点テクスチャが必須です。
• Texture Filtering: gl.LINEAR。
  • 流体シミュレーション（セミ・ラグランジュ法）における逆トレース（Back-tracing）時に、ピクセル間の値を補間するために必要です。

---

📐 数学的・物理的モデル

波動方程式 (Wave Equation)

2次元波動方程式の数値解法として、ベルレ積分 (Verlet Integration) を採用しています。時間微分を差分化することで、以下の漸化式を導出・実装しています。

$$u_{t+1} = 2u_t - u_{t-1} + c^2 \cdot \Delta t^2 \cdot \nabla^2 u_t - \gamma \cdot \frac{\partial u}{\partial t}$$

ここで、ラプラシアン $\nabla^2 u$ の計算には、異方性を抑えるために 9点ステンシル (9-point stencil) を使用しています。

// シェーダー内でのラプラシアン近似（イメージ）
float laplacian = 
    0.2 * (up + down + left + right) + 
    0.05 * (up_left + up_right + down_left + down_right) - 
    1.0 * center;

流体シミュレーション (Fluid Dynamics)

ナビエ・ストークス方程式の「非圧縮性」と「移流項」に着目した実装です。

1. Curl (回転) の計算: 速度場から渦度を算出。
2. Advection (移流): 色場と速度場自身を、速度ベクトルに従って過去の座標からサンプリング（texture(uCurr, uv - velocity * dt)）して更新。
3. Decay (減衰): エネルギー保存則を厳密に守ると発散しやすいため、わずかな減衰項（Damping）を導入して系を安定化。

境界条件と相互作用

• PML (Perfectly Matched Layer) 近似: 画面端での波の反射を防ぐため、境界付近で強力な減衰を適用する吸収境界条件を簡易的に実装しています。
• 反射モデル: 壁（Mapテクスチャの値が1.0）の場所では、波の変位を反転させて反射させることで、固定端反射に近い挙動をシミュレートしています。

---

🎨 視覚化とポストプロセス

物理量を「色」として人間に知覚させるための工夫です。

Turbo Colormap

Google AIが開発した科学可視化用カラーマップ「Turbo」の近似関数をGLSLで実装しています。

• 特徴: 明度と色相が滑らかに変化し、データの微細な変化を強調しつつ、Jetカラーマップのような偽の境界線（バンディング）が発生しません。
• 実装: 振幅の位相（Phase）を0.0〜1.0に正規化し、多項式近似によってRGB値を算出しています。

Optical Glow (Bloom)

強いエネルギーを持つ領域を「発光」させるため、縮小バッファを用いずにシェーダー内で簡易的なガウシアンブラーを実行しています。5x5のカーネルを用いて周辺ピクセルをサンプリングし、加算合成することで、ネオンのような輝きを実現しています。

---

⚡ パフォーマンス最適化

Webブラウザ上で高負荷な物理演算を行うための最適化手法です。

1. Physics Downscaling:

• 描画（Canvas）はデバイスのネイティブ解像度（Retina対応）で行いますが、物理計算用のFBOは解像度を 0.5倍 にスケールダウンしています。これにより、画質を維持しつつ計算負荷を1/4に削減しています。

2. Multi-Step Simulation:

• 1回の描画フレーム（requestAnimationFrame）に対し、物理シミュレーションを複数回（例: 8回）回しています。これにより、波の伝播速度を上げつつ、数値計算の発散を防ぐための微小な dt（時間刻み）を維持しています。

3. Bitwise Operations & Frame Skipping:

• FPSカウンターの更新や特定の重い処理を、フレーム番号の剰余演算（frame % 30）で間引いています。

---

💻 セットアップと開発

本プロジェクトは単一のHTMLファイルで構成されていますが、開発サーバー経由での実行を推奨します。

ローカルでの実行方法

1. リポジトリをクローンします。

git clone https://github.com/Funmatu/spectral-physics-lab.git
cd spectral-physics-lab

2. 簡易ローカルサーバーを立ち上げます（Python 3系の場合）。

• ※ WebGLのセキュリティポリシー（CORS等）やモジュールロードの観点から、ファイル直接展開ではなくサーバー経由が安全です。

python -m http.server 8000

3. ブラウザでアクセスします。 http://localhost:8000

必要な環境

• 最新のモダンブラウザ (Chrome, Firefox, Edge, Safari)
• WebGL 2.0 および浮動小数点テクスチャ拡張 (EXT_color_buffer_float) をサポートするGPU。

---

📝 ライセンス

本プロジェクトは MIT License の下で公開されています。 商用・非商用を問わず、複製、改変、再配布が可能です。

Copyright (c) 2025 Spectral Lab Contributors

---

Author

Developed with ❤️ by Funmatu using pure WebGL & GLSL.