手軽に GPGPU を活用したパーティクルや流体エフェクトを導入できる three-fluid-fx がおもしろい
ソースコードも公開されている
今回ご紹介するのは、GitHub でソースコードも公開されている three.js ベースのライブラリ、three-fluid-fx です。
シンプルに言えば、手軽に流体表現をポストエフェクトとして導入できるライブラリ、というふうに説明できるように思いますが、GPGPU でパーティクルを制御するみたいなことも可能なようです。
いわゆる、three.js の EffectComposer のパスの１つとしてサクッと導入できてしまうようなので、かなり手軽ですね。
リンク：
流体を諦めていたあなたに
流体エフェクト、かっこいいですよね。
WebGL に興味を持った多くの人が、それを使ってみたいと感じたことがあるはずです。
実際、わたしも自分で流体エフェクトを実装した経験はありますが、なかなか理解するのも大変ですし、それをウェブサイトに落とし込むとなるとそれなりに苦労をするということは言えるように感じます。
今回のライブラリはそんな流体表現を手軽に使えるようにする、ということを目指しているようですね。
チュートリアルやドキュメントも用意されており、three.js を多少触ったことがあるひとなら手軽に導入できるのではないかなと感じますね。
なにより、GitHub まで見に行けば実装も公開されているわけですし、WebGL や GLSL の知識がそれほどなくてもこれらの演出を使えるというのはなんとも夢がありますよね。
流体実装のようなものになると、中身の原理を理解しているかどうかはいったん度外視して、とにかくそれっぽく使えればいいというようなケースもそれなりにありそうに感じるので…… それが良いことかどうかは置いておいて、ひとまず動かすことができるというのは一定の需要がありそうです。
実際に動くデモもたくさん用意されています。
動作している様子を見ながら、パラメータをインタラクティブに変更させつつその振る舞いを観察することもできるため、普通にただグリグリ動かしているだけでも楽しいと思います。
どうして流体エフェクトってこんなに心にサワサワするんですかね…… 不思議です。
流体エフェクトを実際に自分で実装した経験があれば想像できると思うのですが、流体エフェクトっていうのは基本的には非常に処理負荷の高い表現です。
ですから見た目がいかに良く導入も手軽だからといっても、なんでもかんでも流体エフェクト加えたらいいというものではありません。ただ、上でも少し書きましたがとにかくこう…… 見た人に与えるインパクトはとにかく強いです。
良くも悪くもですね。
ですから効果的に使えばもちろんそれは非常に大きな効果を生むでしょう。そういう意味では、こういったライブラリが公開されていることはとても有意義なことだと思います。
ぜひチェックしてみてください。
