エフェクト制作に少し慣れてくると、一度は挑戦したくなるのが「流体（Fluid）」を使った表現ですよね。
シルエットが流体的に変化する魔法表現や、キャラクターが倒れた時に煙のように消え去ったり……。ああいうリッチで有機的なエフェクト、「自分のゲームプロジェクトでも作ってみたい！」と思ったことはありませんか？
ただ、流体シミュレーションをいざ作ろうとすると、技術的なハードルや「処理負荷」という大きな壁にぶつかりがちです。
今回は、ワンランク上の表現を目指す方へ向けて、ゲームに組み込みやすい「疑似流体」の考え方と、その核となる「移流（Advection）」の仕組みについて解説します！
リアルタイム流体の現状と、「疑似流体」という選択肢
最近のUnreal Engine界隈では、公式の「Niagara Fluids」プラグインや「FluidNinja Live」など、UE内でリアルタイムに本格的な流体計算ができる素晴らしい機能やツールが増えてきました。
これらを使えば、確かにクオリティの高い流体がUEでも作れます。「もう流体もリアルタイムで動く時代なんだ！」と感動しますよね。
しかし、いざ実際のゲームに組み込もうとすると、少し話が変わってきます。
ちゃんとしたグリッドベースの流体力学計算をリアルタイムで行うのは、依然として処理負荷（GPU負荷）が非常に高く、同時に大量のメモリも消費します。ハイエンドなPCや最新コンソール（PS5など）を対象としたゲームであれば採用できますが、一般的なPC環境などハイエンドでないスペックの端末もターゲットにする場合、気軽にポンポンと出せるような代物ではなかったりします。
そこで今回紹介するのが、ちゃんとした3D流体処理に比べて、負荷を抑えつつ「いかにも流体っぽく見える」表現を作るアプローチです。
具体的には以下の2つの工夫をします。
- 3D空間ではなく、2D空間（テクスチャ）で計算する
キャラクターの現在の見た目（色やシルエットのマスク）を、一旦「レンダーターゲット（描画用テクスチャ）」に2D画像として書き込みます。そして、その2D画像に対して後処理（ポストプロセス）のように流体処理をかけます。 - 難しい物理計算の代わりに「カールノイズ」を使う
流体の複雑な「速度（Velocity）」を真面目に計算する代わりに、Niagaraの Sample Noise Field（カールノイズ）を使います。渦を巻くようなカールノイズのベクトルを、「流体の流れる向きと速さ」として代用してしまうわけです。
これで処理負荷やメモリの問題を改善することできます。 では、そのノイズを使って、どうやって画像を「流体っぽく歪ませる」のでしょうか？
流体のキモ！「移流（Advection）」の仕組みを理解しよう
流体シミュレーションにおいて、水やインクが流れに沿って移動していく現象を「移流（Advection）」と呼びます。ここが今回の最大のハイライトです！
バックワードトラッキング：「どこへ流れるか」ではなく「どこから流れてきたか」を逆算する
ある場所（マス目）の、現在のフレームの色を決めたいとします。
普通に考えると、「今の場所の色を、ノイズの方向に押し出す」と考えがちですよね。しかし、流体計算では逆のアプローチをとります。
「現在の自分の場所を流れている速度（ノイズ）から逆算して、『1フレーム前』にどこから色が流れてきたかを突き止め、その色を貰ってくる」
これをバックワードトラッキングと呼びます。
- 今、自分がいるマスの「流れる速度（カールノイズの向きと強さ）」を取得する。
- その速度の「逆方向」に線を伸ばし、「1フレーム前」の位置を計算する。
- その「1フレーム前の位置」にあった色とマスクの情報を取得し、現在の自分のマスに上書き（移流）する。
これを毎フレーム、画面のすべてのマス目で繰り返すことで、キャラクターの色がノイズの渦に巻き込まれるように歪んでいく、美しい流体表現が生まれるんです！
理屈から実装へ……Niagaraで組むためのポイント
「バックワードトラッキング」という言葉や、「1フレーム前から色をもらう」という概念、なんとなくイメージできましたでしょうか？
もちろん、文章と図解だけで「完全に理解した！」となるのはなかなか難しいかもしれません。流体の考え方は少し独特ですよね。
さらに、この仕組みをいざNiagaraで実際に組んでみようとした場合、もう一つ乗り越えるポイントがあります。
実はこの処理、通常のパーティクルを発生・更新する機能（Particle Updateなど）だけでは上手く作ることができません。
Niagaraの中でこの計算を行うためには、「Simulation Stage（シミュレーションステージ）」と「Grid 2D Collection」という機能を使っていくことになります。
- キャラクターの見た目を、どうやって2Dのグリッドに正確に書き込むのか？
- Simulation Stageを使って、どうやってピクセルごとの処理を回すのか？
- 画面のUV座標をどう計算して位置を合わせるのか？
などなど、理屈を実際のノードの繋ぎ方に落とし込むには、Niagaraの少しディープな機能に触れていく必要があります。
もし、ゼロから実装方法を学んでみたいと思ったら
もし今回の記事を読んで、「この疑似流体の仕組み、実際に自分の手で組めるようになりたい！」「Simulation StageやGrid 2Dの扱い方をマスターしたい！」と思っていただけたなら……
私がColosoで出しているオンライン講座で、この部分の実装手順をみっちり解説していますので、よかったら活用してみてください！
🔽 Coloso講座：仕組みから学ぶNiagara×Materialの高度VFX表現
https://coloso.jp/products/vfxartist-heyyo-jp
（※本記事で解説した流体ディゾルブの内容は、講座の「第12講〜第15講」にかけて、基礎からハンズオンで解説しています。）
この講座では、今回お話しした「移流」の概念をベースに、画面UVの計算、ステンシルでの型抜き、Grid 2D Collectionでのデータ更新など、「なぜそのノードを繋ぐのか？」を一つ一つ一緒に確認しながら進めていきます。
もちろん、完成済みのプロジェクトデータも付属しているので、途中でつまずいた時も安心です。
「とりあえず完成データの中身を見てみたい」という方へ
「講座をじっくり見る時間がない！」 「完成した仕組みを自分のプロジェクトにすぐ組み込みたい！」 「データを見れば、自分で解読できる！」
という方向けに、Gumroadにてプロジェクトデータ単体での販売も行っています。
🔽 Gumroad：ディゾルブエフェクト プロジェクトデータ販売
https://heyyohanashima.gumroad.com/l/iwfkbz
「これまでの単純なエフェクトから表現の幅を広げたい！」という方は、ぜひ講座やデータを通じて、この疑似流体のアプローチに触れてみてくださいね！
