How it works
反応拡散（Reaction-Diffusion）は、2 種類の仮想的な化学物質が 反応（化学変化）と拡散（空間的な広がり）を同時に行うことで、生物の模様に似た自己組織化パターンを生み出す数理モデルです。このデモでは Gray-Scott モデル を WebGPU コンピュートシェーダーで GPU 上にリアルタイム計算しています。
Gray-Scott モデルとは
Gray-Scott モデルは 2 つの物質 A と B の濃度変化を連立偏微分方程式で記述します。
- 物質 A は一定速度
fで供給される - 物質 B は
A + 2B → 3Bの自触媒反応で A を消費しつつ増殖する - 物質 B は速度
f + kで除去される - 両物質はそれぞれ異なる拡散速度
dA、dBで空間的に広がる
feed（供給率）と kill（除去率）の 2 つのパラメータだけで、珊瑚・斑点・縞模様・泡・指紋など驚くほど多様なパターンが出現します。
コンピュートシェーダー
WebGPU のコンピュートシェーダーで 256x256（モバイルは 192x192）のグリッドを並列更新しています。各セルは 8x8 ワークグループで処理され、5 点ステンシルのラプラシアンで拡散項を近似します。
// ラプラシアン（5 点ステンシル）
let lap_a = src[u].a + src[d].a + src[l].a + src[r].a - 4.0 * c.a;
let lap_b = src[u].b + src[d].b + src[l].b + src[r].b - 4.0 * c.b;
// Gray-Scott 反応項
let reaction = c.a * c.b * c.b;
let na = c.a + (p.dA * lap_a - reaction + p.feed * (1.0 - c.a)) * p.dt;
let nb = c.b + (p.dB * lap_b + reaction - (p.feed + p.kill) * c.b) * p.dt;グリッドの端はトーラス状に接続（ラッピング）されているため、パターンが端で途切れることなく連続します。
ピンポンバッファ
カールノイズと同様、読み込み用と書き込み用の 2 つのバッファを毎フレーム交互に使うダブルバッファリングを採用しています。これにより同じフレーム内での読み書き競合を回避しています。
プリセット
8 種類の Pearson 分類に基づくプリセットが用意されています。
- Coral — 珊瑚のように枝分かれしながら成長
- Mitosis — 細胞分裂のように球が分裂を繰り返す
- Spots — 均一な斑点が並ぶ
- Stripes — ゼブラ模様のような縞
- Worms — 迷路状のうねうねした模様
- Bubbles — 泡が安定して並ぶ
- Waves — 波紋が伝播する
- Fingerprint — 指紋のような複雑な曲線
ポインターインタラクション
画面をタッチ/クリックすると、その位置を中心に物質 B が注入されます。ガウシアン風の減衰でキャンバスの 2.5% の半径に影響を与え、既存のパターンに干渉する新しいシード点を作り出します。