巨大なスクリーンが幻想的な世界を鮮やかに描き出す！ WebGL を上手に活用したグラヴィタスのウェブサイト
まさに企業の顔に相応しいウェブサイト
今回ご紹介するのは、国内で映像制作などを手掛けているクリエイティブプロダクション、株式会社グラヴィタスのウェブサイトです。
まるで一枚の巨大なスクリーンのような、非常に印象的な WebGL を用いたイントロデモが用意されており、映像の世界で存在感を放つグラヴィタスに相応しい、見事な演出がなされています。
当サイトでは様々な WebGL を利用したサイトを日々紹介していますが、これほど企業の持つ特色を見事に体現しているサイトは、ちょっとめずらしいのではないでしょうか。
非常にかっこよく仕上がっています。
WebGL だけでなくサイト全体が品のある仕上がり
今回のサイトは、WebGL を上手に利用して「映像」というキーワードに素直に結びつきやすい、巨大なスクリーンを再現しています。
そのスクリーンはワイドパネルのディスプレイモニターのような感じの形状なのですが、空中に浮かんでいるかのような動きと、そこに映し出される映像の雰囲気とが相まって、とても幻想的でファンタジックな風合いに仕上がっています。
最初にパッと目に飛び込んできたときに、思わず声が出てしまいそうになる、そんな迫力のあるイントロデモになっていますね。
背景と同じシーンなのに飛び出してきているかのような迫力が感じられるから不思議です。
キャプチャ画像ではどうしてもわかりにくいかなと思うのですが、ポストエフェクトなんかも使われていて、すごく雰囲気というか色合いというか……質感が見事ですね。
マウスカーソルの動きに応じてスクリーンの部分がぐいぐいと動くのですが、遠くの方から柔らかい日光が当たっているかのような、ライティングっぽい色変化も付けられていて手が込んでいます。
映像制作を主に手がける企業のサイトらしい、非常にかっこいい演出だと思います。
WebGL を利用しているイントロ部分も見事ですが、さらにスクロールしていくと現れる事例紹介のページにも、粋な演出が加えられています。
そこにはたくさんのモニターが並べられたような感じで、グラヴィタスの手掛けてきた様々な事例が置かれているのですが……
それらのひとつひとつにカーソルを合わせていくと、その該当する部分が、まるで分割した複数のディスプレイに投影されているかのような演出が入るようになっています。
スムーズなアニメーション効果もシーン全体の雰囲気づくりに良い意味で貢献していて、見ているだけで圧倒されてしまいそうになりますね。
今回のサイトは、日本のウェブ制作会社である株式会社バケモノさんの手によるもの。
聞いたところによると、今回のサイトは新人さんが担当して作ったものらしいです……（デジャヴ）
以前にも、バケモノさんの手がけたサイトを紹介したことがありましたが、あのときも、新人社員の方がひとりで手掛けたらしい！ という感じでサイトを紹介して、一部界隈では大きな反響を呼びました。今回のサイトも、またしても同じような感じの展開なわけですが、にわかには信じられないほど、細かいところまでしっかりと作り込まれた見事なサイトになっていますね。
はじめての WebGL、はじめての JavaScript による本格実装だったとのことですが……
いったいどんな新人教育しているんでしょうか……
暗いのでちょっとわかりにくいですが、フッター部分にもちょっとしたアクセントとなる WebGL の表現が取り入れられています。
今回のサイトに見られるような、動画を上手に活用した表現は、ある意味では WebGL ならではといったところがあります。というのも WebGL は、ブラウザで動画を読み込んで、それをそのままダイレクトにテクスチャにアタッチすることができるというチートな機能がありまして、ネイティブでは考えられないほど簡単に、動画がそのままテクスチャとして利用できてしまいます。
今回のサイトのすごいところは、ただ動画を板ポリゴンに貼って終わり、ということではなくて、湾曲したスクリーンに見立ててそこにさらにエフェクトを盛ることにより、独特な世界観を体現していることではないでしょうか。
よく観察してみるとわかるかなと思いますが、スクリーンに見立てたイントロシーンでは、ただ単に動画を貼って終わりということではなく、様々な効果がシェーダを利用して付加されています。
どういったエフェクトによって、どのような効果が得られているのか……
そんなことを観察しつつ眺めてみるのも、いいかもしれません。
非常に完成度の高い、見事なウェブサイトに仕上がっていると思います。ぜひチェックしてみてください。
