まるでそれは流体のように……不思議な Curl Noise を使った WebGL デモ
ノイズを利用した流体表現
今回ご紹介するのは、Curl Noise というノイズの一種を利用して、あたかも流体のような表現を行っているデモンストレーションです。
いわゆる一般的なパーリンノイズなどをベースに、ノイズの力で流体のような表現を行うことができるカールノイズ。
非常にシンプルなデモですが、その効果は十分に実感できる内容になっています。
パラメータを調整して変化を楽しもう
今回のデモはカラーもモノクロですし、BGM もありませんし、一見するととても地味です。ただ、あくまでも実験用デモなのだと思いますし、カールノイズの効果を確かめるのに十分な仕上がりになっています。
既定の状態でも、ページを開けばすぐにノイズによる疑似流体表現を見ることができます。
これをぼんやり眺めているだけでも、なんだか不思議な気分を満喫できます。
右上には各種パラメータ調整のためのメニューがありますね。
ここからいくつかパラメータを変更すると、まったく違った見た目や動きを表現できます。流れるパーティクルの大きさを変えてみたり、流れるスピードを変えてみたり、結構いろいろなことができます。
自然界の真っ当な流体を正確に計算して再現することは大きな計算の負荷を伴います。
そこで、ゲームなどのリアルタイム性を求められる分野などでは、カールノイズを利用した疑似流体表現を用いるなど、近似するなんらかの負荷の軽い処理が使われることが多かったみたいですね。
今回のデモを見る限り、確かに比較的軽い計算でサクサクと動いているのかなという印象を受けますね。
うまく利用すれば、流体だけでなくエイリアンの触手のような表現や、砂などの粉末なども表現できそうですね。
Curl Noise で調べれば、具体的なコードを掲載しているサイトもいくつか見つかります。今回のデモも参考にしつつ、ノイズによる面白い表現について調べてみるのもいいかもしれません。
