流体シミュレーションを使った画像のゆがみエフェクト

note

WebGLとThree.jsのGPUComputationRendererを用い、Stable Fluidsに基づくリアルタイム流体シミュレーションで画像を滑らかに歪ませるエフェクトです。マウスカーソルの動きを参照し、生成した速度場でテクスチャ座標や密度場を動かし、ゼリーのような弾性がある揺らぎから煙のような拡散といった質感の異なる表現のほか、速度場と密度場のベクトル可視化を切り替えられます。

GPU上で速度場を移流計算し、マウス移動による外力を注入します。発散を算出してJacobi反復法で圧力ポアソン方程式を解き、圧力勾配を差し引いて非圧縮性を保ちます。境界条件も設定し、物理的に自然な流体挙動を再現します。密度場は速度場にしたがって移流し、画面端ではミラー反射で跳ね返るように処理することで、煙が渦を巻くような動きを表現します。これらの計算結果をフラグメントシェーダーでテクスチャの各ピクセルに反映し、ゆがみエフェクトを実装します。可視化表示では、速度場のベクトルをX成分=赤、Y成分=緑で示し、密度の変化は白いdye（染料）として描画します。

この実装では、非圧縮性ナビエ＝ストークス方程式の数値解法（Stable Fluids）を採用し、計算対象を抽象的な「場」として切り分け、GPUのレンダーターゲット（テクスチャバッファー）として保持・更新します。速度場（velocity）はテクスチャのRG成分で流れの方向と強さを表現し、圧力場（pressure）はR成分でスカラー圧力を蓄え、密度場（density）は現在の画像状態（色）を保持します。発散場（divergence）はR成分で速度場の発散値を格納し、圧力ポアソン方程式の右辺として利用されます。染料場（dye）は白ベースの可視化用テクスチャで、しきい値や減衰を用いて流れの軌跡を描きます。各「場」はシェーダー間でping-pong（read/writeの交互入れ替え）しながら更新され、最終の描画段では表示モードに応じてこれらの場を参照・合成して画面に出力します。

インタラクティブなヒーローセクションやビジュアルギャラリー、製品・ロゴの動的演出、イベントLPの背景表現に適しています。ベクトル可視化は教育用途の流体デモにも活用でき、幅広いシーンで応用可能です。

【使用ライブラリ】 Three.js