流体シミュレーションの WebGL デモをモノクロ化して取り入れたドイツの広告代理店 ZwislerDecker のウェブサイト
よりクラシックな印象のリアルタイム Fluid
今回ご紹介するのは、ドイツ・ベルリンを拠点にする代理店 ZwislerDecker のウェブサイトです。
ドイツ語なのでどう発音するのが正しいのかわからないのですが、個性的なフォントが使われており、どことなくクラシカルな印象を抱かせるデザインとも相まって、独特な空気感が漂っています。
WebGL の実装としてはオープンソースで公開されている PavelDoGreat/WebGL-Fluid-Simulation をベースにしているようですね。
リンク：
ZwislerDecker | Agency for Disorderly Conduct
流体が発動する場面とそうでない場面がある
今回のサイトでは、流体表現の部分も含めてあらゆるシーンがモノクロで描かれます。
ページが開かれた直後は、まず最初に流体の派手なエフェクトが発生するようになっており、自動的に流体に強い勢いが加えられたかのように流れが発生します。
一気にバッと流れが生まれてフェードアウトしていく様子はなかなか迫力があり、第一印象でグッと引き込まれるような感じになります。
上の画像を見ると、複数の方向に一斉流れが生まれているのですが、静止画だとちょっとわかりにくいかもしれません……
最初の自動的に発生する流れが収まったあとも、ページ内をドラッグ操作してやることで任意に流れを発生させることができます。このあたりの操作はいわゆるよくある流体のデモと同じですね。
WebGL の流体デモでは光ったような加算合成のビジュアルを用いているケースが多いですが、こういったモノクロの感じでもまた違った風合いで面白いです。
ページをスクロールしてコンテンツを進めていくと、途中では流体表現はいったん画面から消えてしまい……
途中、動画とテキストによって彼らのビジョンやコンセプトが語られます。
秩序を壊して新しいものを想像していくような、そんな雰囲気を感じさせる内容になっていますね。ここは単に動画が再生されている感じで WebGL は関係ないのですが、最後のセクションまでスクロールすると最下層では再び WebGL のデモがインタラクティブに動作する状態になります。
今回のサイトで使われている WebGL の流体実装は、冒頭でも書いたとおりオープンソースで公開されていて、比較的容易に自身のサイトに組み込みできるようになっています。
自力で理論を理解しながら流体を処理する実装を組むのはちょっとむずかしいので、こういった形でオープンソースで（かつ MIT ライセンスで）公開されているというのは非常にありがたいですね……
ある程度、パラメータを変更したり、今回のケースのように色を変えたりといったこともしやすい形になっているので、興味のある方はソースコードのほうも確認してみるといいかもしれません。
ぜひチェックしてみてください。
