Stable Fluidsによる炎シミュレーション
パラメータを調整することで、リアルタイムに見た目や動き方を変えられます。
公開
https://gyazo.com/57bbb677ce30948c918b7e7064bf025a
仕組み
空間に分布する温度と速度の流れをシミュレーションし、その結果を色と明るさに変換して描画することで、炎の形と動きを作ります。
具体的には、
温度を空間に与える
温度が上向きの流れを生む
流れが温度を運び、形を変える
温度を色と明るさに変換して描画する
という流れを Stable Fluids の枠組みの中で繰り返します。
視覚表現としての自然さを重視した手法であり、物理現象を厳密に再現する用途には向きません。
流体計算は、炎の動きと揺らぎを安定して生成する基盤として使われており、その結果を視覚的に解釈することで、自然な見た目の炎を構成しています。
長所
実時間で滑らかな動きを表現できる
少ない状態量で安定した変化を作れる
調整によって幅広い見え方を作れる
短所
奥行き方向の構造は表現できない
煙や火花などの要素は含まれない
温度は物理的な温度そのものではない
1. 炎をどのような量で表しているか
この表現では、空間を格子に分け、各点に次の量を持たせます。
速度：その場所で流れがどの方向・どの速さで動くか
温度：その場所がどれくらい強く発光しているか
煙や密度のような量は使わず、温度だけを扱います。
速度は、温度が空間の中をどのように運ばれるかを決める役割を持ちます。
2. 温度をどのように生み出しているか
画面の下側に複数の発熱点を置き、そこから温度を周囲に与えます。
中心に近いほど温度が高くなる
少しずつ強さが変動する
この変動によって、毎フレームまったく同じ形にならず、自然な揺らぎが生まれます。
※ 燃焼反応は厳密に扱いません。
3. 温度が流れを作る仕組み
温度が高い場所ほど、上向きの速度が加わります。
その結果、温度の高い部分は上に移動し、周囲の流れを巻き込みながら形を変えていきます。
この関係によって、下から立ち上がり、上に伸びていく炎らしい動きが形成されます。
4. Stable Fluids の役割
温度が流れに乗って滑らかに運ばれる
急激な数値の乱れや不自然な発散を抑える
流れ全体が連続的につながる
拡散は温度や速度の分布をなだらかにし、移流は流れに沿った移動を表現します。
射影は流れの不整合を抑え、安定した動きを保ちます。
5. 温度の減衰
温度は時間とともに少しずつ小さくなります。
これにより、温度が無限に蓄積することを防ぎ、上昇した部分が自然に弱まっていきます。
結果として、炎が発生・成長・消失を繰り返す動きになります。
※ 上端と左右の端では開いた境界条件を採用しており、流体が画面外へ流れ出ていくことができます。
これにより、流れ場の端での不自然な反射を抑制し、炎の形状を安定化させています。
6. 流体計算から見た目への変換
流体計算によって得られるのは、温度と速度の分布です。
これをそのまま色に変換して描画します。
温度が高いほど明るく、白や黄色に近づく
温度が下がるにつれて橙や赤に近づく
一定以下の温度はほとんど見えなくなる
速度の大きさは、わずかに明るさへ反映され、動きのある部分が視覚的に分かりやすくなります。
透明度も温度と位置に応じて変化させ、輪郭が急に切れないようにしています。
7. パラメータ調整と見え方の関係
いくつかの数値を調整することで、炎の印象が変わります。
発熱の強さを上げると、明るく勢いのある炎になる
上向きの力を強くすると、立ち上がりが速くなる
温度の減衰を弱めると、炎が長く残る
発熱点の数や配置を変えると、炎の広がり方が変わる
これらは物理定数というより、見た目を制御するための調整値として扱われます。
8. 実装
80×120の2次元グリッド上で、各セルごとに速度場（u, v成分）、温度場、これらの相互作用を計算します
GPU可視化
Data Texture: シミュレーション結果（温度・速度）をRGBAテクスチャとして格納
Fragment Shader: テクスチャから温度値を読み取り、温度に応じた炎の色（白→黄→橙→赤）を動的に生成
Additive Blending: 加算合成により炎の発光感を表現
Three.js + WebGL
3Dグラフィックスライブラリを用いて、シェーダーとシミュレーションを統合し、ブラウザ上でリアルタイム描画を実現。
調整可能パラメータ
以下を調整することで、激しい炎から穏やかな揺らめきまで、多様な表現が可能です。
粘性係数: 流体の粘り気（乱流の発生しやすさ）
拡散係数: 熱の伝わりやすさ
浮力: 高温部分の上昇力
冷却率: 時間経過による温度低下