GLSL を背景で走らせる流体表現！ Dennis Markgraf 氏のポートフォリオサイトがすごい！

doxas : 2015-07-03 13:42:25

流体を効果的に利用した表現

今回ご紹介するのは、フリーランスのエンジニア Dennis Markgraf さんのポートフォリオサイトです。

このサイトは言葉で説明するのがちょっと難しいのですが、要約すると「一見して普通のエレメントに見えるけどホントのところは？」というところに注目して、ぜひ見てみてほしいページです。

非常に良くできていますし、流体の表現も見事です。カスタムシェーダの実装としても、大変興味深いものになっています。

当たり前のことですが、ウェブページは普通 HTML タグによってマークアップされ、エレメントが複雑に組み合わされて表示されています。

WebGL は、canvas タグの矩形領域のなかでレンダリングを行う機構ですから、基本的には HTML のエレメントとは相互的に作用しあうことはできません。しかし、このサイトは一見するとそれを可能にしているかのように振る舞うので、とてもびっくりします。

まずは、ページを開いて見てみましょう。すると、画面の上のほうからインクが流れるかのように、流体表現がじわじわと流れ出してきます。

白と、赤っぽい色の、二色のインクが流れていくような、そんな流体表現を見ることができます。画面の中央付近で一度障害物にぶつかったかのように左右に広がりますが、とても自然な、見事な流体表現を実現していると思います。

背景全体に敷き詰められた canvas 上で WebGL を走らせて、それでこの流体をレンダリングしているのでしょうね。

このサイトのデモのすごいところは、そこからさらにいくつかの項目を選択していくとわかります。

サイト内でリンク文字になっているところをクリックしたり、何かしらのアクションを起こしてみましょう。するとびっくりするようなことが起こります。

ジャケットとスニーカーのシルエットが特徴的なイラストが表示されている……ように見えますね？

一見すると img タグで画像を置いているかのように見えますが、これは canvas 上にレンダリングされた GLSL による描画です。

その証拠に、他のメニューに移動しようとすると……

これ、画像では伝わりにくいと思うのでぜひ本物を見てほしいのですが、画像が流体に溶け込んで流れて行ってしまいます。

完全に先入観で画面をぼんやり眺めていて、本当に度肝を抜かれました。

画面内の多くのパーツが canvas 上の WebGL 描画にフォールバックされていて、クリック操作などで表示されているものが切り替わる際には、画面内に表示されている文字や画像が背景に溶けて流れていきます。