GLSL 実装の流体シミュレーションがなんとも面白い！ ビュー切り替えで流れを可視化することも可能！
GLSL ならではの高速演算！
今回ご紹介するのは、GLSL を利用して高速に流体シミュレーションを行っているデモンストレーションです。
一見するとなんのことはない、Twitter の ID が書かれているだけの画面なのですが、ひとたび筆を置けば一気に世界が変わっていきます。
流れの可視化が面白い！
今回のデモは、まず一度画面内をクリックしないと流体の計算が始まりません。ですから、最初は静止画が映っているような感じに見えます。
画面内をクリックすると、水をたっぷり含んだ紙に、水性ペンで色を付けたかのようにインク状の色が広がっていきます。
最初に設定されている色が若干エグイので注意！
画面の右上にはコントロールメニューが出ていますが、このメニューから様々なパラメータを修正することができます。
流れの速さを変えてみたり、インクの色を変えてみたり、いろいろやってみると違いが体感できると思います。絵の具が滲んでいくような、不思議な質感にすることもできます。
コントロールメニューからは、画面のキャプチャを撮ることもできます。
また、非常に面白いなあと感じたのが、流れのベクトルを可視化するモードに移行することができる点。
この状態で画面をクリックしてみると、どんなふうにベクトルが発生し、それがどのように流れていくのかが一目でわかります。色がちょっとビビットな感じですが、しっかり色からベクトルの方向をイメージできるようになっています。
実装には three.js が利用されていて、カスタムシェーダで動かしているものと思います。GLSL のソースは HTML に埋め込まれているので、簡単に見ることができますし、非常に参考になると思います。
ときどき思うのですけれど、こういう GLSL ベースのデモを作るときに three.js を利用するメリットはあるのでしょうか……three.js を使ったことがないのでわかりませんが、シェーダがメインであればさくっと自前で実装したほうが速い気がします。
それと、今回のデモはビューポートの設定がちゃんとされていないみたいなので、もし画面が若干歪んでいるように感じる場合は、ウィンドウのサイズをちょっと変えてみると正しい縦横比で描画されるようになるはずです。
