独特な流体表現とイメージのトランジションに思わず目を奪われる！ ultranoir のウェブサイトがすごい！
少し粘度の高い不思議な流体感
今回ご紹介するのは、フランスはパリに本拠を置くデジタルエージェンシー、ultranoir のウェブサイトです。
フロントエンドの実装では結構有名なところだと思うのですが、WebGL の事例も今回がはじめてということではなく、これまでにも様々なウェブサイトをリリースしています。
今回のサイトはちょっと変わった流体表現をベースにしつつ、様々なインタラクティブ要素が組み込まれており、見ていて飽きない、素晴らしいサイトになっています。
リンク：
ultranoir, Digital Agency, Paris
イントロ演出には複数のパターンがある
今回のサイトでは、最初にロードが完了した直後、真っ暗な背景のトップページが表示されます。
このとき、背景には GLSL でエフェクトが掛けられているのですが、ここで出てくる演出にはどうやら複数のパターンがあるみたいですね。
ひとつは、やや粘度の高そうな、まるでチョコレートか何かのような流体表現。
もうひとつはノイズをベースにした、やや凹凸感の強いタイプ。
いずれもコントラストが強くないのでちょっと静止画ではわかりにくいかもしれませんが、実際に動いている様子を見ると結構しっかりと主張してきます。
うーん、画像で見ても、よくわからんですね（笑）
でも今回のサイト、他に WebGL のエフェクトが使われているところも、全部そうなのです。
実際に動いているところを見ないと、なかなかその動きの魅力が伝わりにくいかなあと思いますね。
たとえば下の画像は、イントロシーンからマウスボタンをホールドすることで遷移できる事例集のページです。
ここではカーソルを上下にドラッグ操作することで、次々と事例を切り替えていくことができます。
さらに、ホールドしていたマウスボタンを離したときには、画面全体が画像で覆われるようになるのですが……
この画像も、全て WebGL で描かれているレンダリング結果になっています。
つまり、これらの画像は常にインタラクティブなシェーダエフェクトが掛かった状態になっていて、マウスカーソルを動かしたりホイール操作を行ったりすると、画像が切り替わる際のトランジション演出などを見ることができます。
エフェクトがたくさん種類があって、見ていて本当に飽きないですね……
上の画像、ホイール操作で画像が切り替わる瞬間なのですが、うっすらと別の画像が滲み出して来ているのがわかりますでしょうか？
非常に洗練されたシェーダエフェクトが特盛りで、見応え十分な今回のサイト。
個人的には、最近、「静止画ではわかりにくいと思いますが」というようなことを当サイトの記事内で書くことが増えてきているような気がします。
それだけ、さり気なく演出する系のシェーダ芸が増えてきているのかなあという感じがしますね。
バリバリの 3D はそもそも（作ろうとしているサイトに）本当にそれが必要なのか？ というところから考える必要があると思っていますが、世界の WebGL の使われ方のトレンドを見ても、3D でなければならない状況というのはウェブにおいてはまだまだ限定的で、むしろ今回のサイトのようにエフェクトを盛るのに WebGL を利用するのが、まあ落とし所としては多いのかなと思います。
とは言え、3D でも実装しようと思えばできる、というエージェンシーやスタジオは多いと思いますし、3D の実装にはある意味では 2D は内包されているので、やっぱり 3D できるに越したことはない……とも思います。
今回のサイトも、基本的には 2D 的な演出が多いですが、3D で考えることもできる能力を持ったひとがたぶん作ったんじゃないかなあという気がします。
ぜひチェックしてみてください。
