WebGL で実現した 3D 流体シミュレーション！ パーティクルの滑らかな動きがすごい！
柔軟性も高い素晴らしい出来栄え
今回ご紹介するのは、WebGL で実装された流体シミュレーションです。
パーティクルを利用した流体の表現で、二次元ではなく三次元で実現されているというのがすごいですね。
影が落ちるような見た目の質感も素晴らしく、ハイエンドな GPU のマシンで閲覧すればとても見事なアニメーションでまさに流れるように動きます。
逆にスペックがちょっと低いマシンでは、重くてとてもきついと思いますので、その点は注意してください。
JavaScript で動いているとは思えない軽さ
流体シミュレーション系のデモというのは、たいていの場合とても負荷が高くなります。それに、WebGL を使った流体系のデモというと、普通は二次元で実現されている場合が多いと思います。
今回のデモは、流体を三次元で立体的にシミュレートしているだけでなく、およそ三次元とは思えないほどの軽さです。WebGL のデモとしてはもちろん負荷が高い部類に入りますが、それでも流体を三次元で表現しているとなれば驚異的な軽さと言ってもいいほどです。
また、機能的な面でも非常に素晴らしくて、パーティクルが発生する領域を自由にカスタマイズしたり、パーティクルの発生する密度を変更したりすることもできます。
初期状態では、画面の左端に白っぽい箱のようなものが見えています。
この箱の領域がパーティクルの初期位置になります。
画面内はドラッグ操作を行うことで新しいパーティクルの発生源を作ったり、あるいはそのボックスのサイズを任意に変更したりといった操作が可能です。
複数のボックスをいくつも組み合わせて、流体が自然とぶつかり合うような配置にすることもできます。
画面の左上のほうにまとめられているメニューからは、パーティクルの密度を変更するスライダーなどが操作できます。
また、ボックスのプリセットをロードできるボタンなどもありますね。パーティクルで流体を表現しているだけでも必見モノなのに、これだけいろいろと手が加えられるようになっているというのは、とても素晴らしいですよね。
デモをスタートさせるボタンも、左上のところに置かれています。お好みのボックスを配置できたら、シミュレーションをスタートさせてみましょう。
流体が動き出すと、マウスカーソルで流体に干渉できるようになります。
大きくなぎ払うような動きをすれば、パーティクルを巻き上げるようなことも可能です。ぶつかり合うパーティクルの様子が、非常に見事ですね。
デモがスタートした後は、ホイール操作でズームしてみたり、左上にあるスライダーを動かしてパーティクルの移動スピードを変化させたり、自由に遊んでみましょう。
たぶん、ファンが唸りを上げると思いますけど（笑）
非常に負荷の高いデモですが、内容を思えばかなり軽量なデモだと言えると思います。
GPGPU を駆使して動かしているのだとは思いますが、影をしっかりと描画していたり、加速度がそのままパーティクルの色として反映されるようになっていたり、抜かりは無いという感じです。
こういったデモが作れるようになりたい！ 思わずそう感じてしまう、非常に素晴らしい出来だと思います。
ラップトップなどのオンボード GPU ではかなりきついと思いますが、さくさくで動作するハイエンドなマシンで閲覧すると、とても気持ちの良い動きを見ることができるでしょう。
WebGL 界隈で随一の流体デモと言っても過言ではありません。ぜひチェックしてみてください。
