WebGL を用いた視覚効果で 3D と 2D をフレキシブルに活用した UN-SCALABLE VISION のウェブサイト

3D 表現がたっぷり使われている

今回ご紹介するのは UN-SCALABLE VISION というユニットのウェブサイトです。

どうやら複数の企業・グループからメンバーが集まったクリエイティブユニットのようなチームなのかなと思うのですが、専用の WebGL 製ウェブサイトまで作っていてなかなか力の入った取り組みのようです。

今回のサイト上では、3D から 2D までさまざまな形で WebGL を活用しています。

リンク：

UN-SCALABLE VISION

多彩な 3D シーンは丁寧な作り

今回のサイトの WebGL 表現は、ベースとしては 3D 的な、つまり立体的な奥行きを持った画作りになっている場面が多いです。

トップページの冒頭にも、いくつかのボックスを組み合わせたようなオブジェクトが登場し、背景を演出しています。

幾何学形状のみ、かつ落ち着いたトーンの配色なので、なんかクラシカルなかっこよさがあるビジュアルです。

スクロール操作などに連動してオブジェクトが動いたりもするのですが、絶妙にディレイが掛かったイージングが適用されていたりして細かい部分まで上手に調整されている感じがします。

どこか手触り感のようなものを覚える質感で、操作していて心地よいです。

また、スクロールしていくとテキストが波打つように歪む演出があったり、一見平面のように感じられる部分にも立体的な奥行きを感じる演出が盛り込まれています。

途中のセクションでは、まるでディスプレイが円筒形に並べられたかのような場面が出てくるのですが、ここも見た目以上に凝った作りになっています。

事例が切り替わる際、テクスチャがディストーションしながら切り替わるようになっていてすごくかっこいいですね。

スクリーンショットではちょっとどういうことが起こっているのか伝えるのが難しいので、ぜひ実際に動いているところを見てみていただければと思います。

ディスプレイのようなオブジェクトの表面（のテクスチャ）がディストーションしながら切り替わる演出など、2D 的なエフェクトも盛り込みながら作られていてなかなか手が込んでいます。

3D 表現自体は、あまりこう…… フォトリアルな質感にとことん近づけようみたいな意図は感じないのですが、さまざまな空間を多彩に演出できるチームなのだということがしっかりと WebGL によって表現されているなと感じました。

すごく丁寧な WebGL 実装だと思います。

ぜひチェックしてみてください。

リンク：

UN-SCALABLE VISION