クリエイティブエージェンシー HAUS のサイトに仕込まれたインパクト大な WebGL 実装
ウェブの技術を複合的に利用
今回ご紹介するのは、とあるクリエイティブ集団のウェブサイトです。
そのサイトのトップページには、一点ものの WebGL 実装がひとつ置かれているのですが、こちらのデモそのものは、いわゆる普通にレンダリングしているだけなんですね。
しかし、その他のウェブの技術と組み合わせることによって、演出として非常に面白いことが実現できています。
いろいろなものを組み合わせることのうまさ
ウェブには、WebGL よりももっとメジャーな様々なテクニックがありますね。WebGL はかなり敷居の高い技術に分類されると思いますが、それだけに、WebGL そのものが利用されるケースが少なくウェブならではの他の技術との組み合わせ例というのは、意外に多くないように思います。
そういう意味では、今回のサイトは見事にそれを成し遂げていると感じます。
まず大前提として、サイト全体の構成は今風というか、非常にモダンな感じにできていて、とても完成度が高いです。
マウスカーソルの動きに追従するアニメーションや、大きな余白をうまく活用したデザインが、とても秀逸です。
見た感じ、厳密には調べていませんが WebGL を使っているのは恐らくトップで表示されるデモのみだと思いますが、単純にサイトの完成度を見るに素晴らしい出来栄えだと感じます。
そんな技術力の高い彼らの作った WebGL 実装も、その実装そのものの凄さよりも、ウェブの他の技術との上手な組み合わせ方が素晴らしいですね。
まずページをいくつか閲覧して、トップページに戻ってきたときに、その演出がさりげなく実行されます。
トップページにあるデモの、ぼやけたようなシーンが出てくる部分がそれです。
上の画像を見ると、ぼやけたシーンから見事にクリアな高精細なシーンへと遷移しているのがわかると思います。
普通に私のような WebGL 脳の人間だと、ガウシアンブラー使ったるでえ！ と無駄に気合いが入ってしまうのですが、このサイトではシェーダによるそういったポストエフェクトは使っていない感じです。
それではどうやってこの「ぼやけたシーン」から「クリアなシーン」への遷移を行っているのかというと、最初のぼやけたシーンは単純に画像なんですね。
それが、CSS の効果で徐々に透明になっていき、完全に透明になったところで後ろで実行されていたデモが見えてくるわけです。なんでもシェーダでゴリゴリやろうとする人間には、簡単そうで、意外に思いつかない発想だなと思いました。
ウェブには、様々な技術があり、それらは日々研鑽され、活用されています。WebGL はそんなウェブで活躍できるひとつの技術ではありますが、やはり既存のものといかにして組み合わせてリッチな表現を行うのか、これが大事なのだなとあらためて感じさせられました。
デモは単品でひとつだけですが、見た目はなかなか面白いのでぜひチェックしてみてください。
