WebGL で実装されたパーティクルベースの流体シミュレーションデモ！ パラメータも多彩で楽しい一作
パーティクルを利用した流体表現
今回ご紹介するのは、WebGL を利用した、パーティクルベースの流体シミュレーションデモです。
ただし、最初の断っておくと、今回のデモはシミュレーション自体を GLSL で処理しているわけではないようですね。ですから、大量のパーティクルがドバドバ出てくるような、物量感で ﾋｬｯﾎｳ する系のデモではありません。
逆に言えば、シミュレーションの実装自体は JavaScript で記述されているので、こういった実装に興味がある方にとっては、かなり参考になるのではないでしょうか。
多彩なパラメータ操作やインポート機能が秀逸
先程も書いたとおり、今回のデモは実は案外と派手さという意味では見栄えがしません。WebGL や GLSL というと、どうしても超高速に大量のオブジェクトを描画するというイメージが先行しますが、今回のデモはそういうものではないのですね。
しかし、多彩なパラメータ調整が行えたり、JSON ベースのファイル入出力機能を持っていたりと、かなり機能がしっかりしています。
流体シミュレーションそのものは、私自身があまり詳しく知らないので詳細に解説はできないのですが、Github のリポジトリを参照すれば、参考にした論文なども引用されており、かなり参考にできそうです。
デモを実行すると、緑色の枠が備え付けられたエリアが出てきますが、ここでパーティクルを排出するエミッタや壁を自由にカスタマイズすることができます。
画面の左側にあるメニューからは、カプセル（壁）やエミッタを ADD するのか REMOVE するのかなどを選択できるようになっているので、好みの形状になるようにフィールドをカスタムしてみましょう。
パーティクルの数にはあらかじめ上限が決められているので、エミッタを大量に配置しても、規定のパーティクル数に到達すると排出がストップするようになっています。これは恐らく、負荷が高くなり過ぎないようにするためなのかなと思います。
カスタムできる項目は、パーティクルの動きにかかわるものや、単純なパーティクルの個数の上限値など、おおよそ見れば意味がわかるものがほとんどだと思います。
パーティクルに掛かる重力や、パーティクルの粘度などを変化させると、まるで違った動きをするようになるので、見ていて非常に楽しいですね。
物理的な計算を CPU で行っているので、GPU の性能よりも CPU の速度が問われることになります。パーティクルの数をあまり多くしすぎてしまうと、なにかとトラブルの元になる可能性もあるので気をつけましょう。
とても豊富なカスタム機能が素晴らしい。
JSON 形式のファイルを出力したり、あるいはそれを読みこんだりする機能が備わっており、あくまでも研究的な意味でのデモ作品なのだと思いますが、かなり遊べますね。
これを GLSL 版として実装すれば、軽く数十倍から百倍以上のパフォーマンスが出ると思いますが、冒頭でも書いたように、あえて JavaScript で記述されていることをメリットとして捉えれば、シェーダの記述に不慣れな人でも、流体系の処理を垣間見ることができる貴重なサンプルだとも言えますね。
作者の方は、Github で他にも WebGL に関連したいくつかのリポジトリを公開してくれています。ランダムに岩状のモデルやテクスチャを生成するデモなど、ちょっと地味ですが面白いアルゴリズムを見ることができる作品が公開されています。
気になる方は、そちらも併せてチェックしてみてください。
