まるで映画のワンシーンのような高品質な WebGL のレンダリングは世界でも随一！ Active Theory のウェブサイト
明暗を意識したシーンづくりが秀逸
今回ご紹介するのは、ウェブの制作会社としてはとても有名な Active Theory のウェブサイトです。
最近、新しくリニューアルされたのだと思うのですが、これまで同様見る人を魅了するような、非常に高品質なウェブサイトになっています。
ほぼ全面的に canvas と WebGL を使って構築されているサイトで、ものすごく、見た目のビジュアルにこだわって作られています。
CG の様々なテクニックが盛り込まれている
今回のサイトは、もう最初にサイトに行ってみればその凄さを直接味わえる作りです。
ローディング表示が終わると、まるでスラムの裏路地のような……
暗く湿った世界が画面いっぱいに広がります。
よく観察してみるとわかるかと思うのですが、マウスカーソルを動かさずにそのまま静止した状態にしておくと、画面内の UI が少しずつ薄くなっていき、同時にまるでカメラのレンズ部分が濡れてしまったかのように、画面に水玉の模様などが浮き出して見えてきます。
また、上の画像を見るとわかるかなと思うのですが、カーソルを動かしてやると、濡れたガラスの上をなぞったかのように、ロゴの部分や背景の形式が歪みます。
WebGL ではカーソルの動きに合わせて画面になにか影響を与えるインタラクションは珍しくありませんが、こんなふうに、まるで濡れているみたいに歪ませるタイプは結構珍しいかもしれません。
さらに、インタラクションという意味では、画面内でマウスのボタンをホールドしておくことでも違った演出が現れます。
まるでネオンでできたかのような Active Theory のロゴマークが、とてもかっこいいですね。
濡れたような歪む演出ももちろん素晴らしいですが、なんといっても世界観というか……その明暗の使い分けが今回のサイトでは本当に見事です。
その他にも、細かく見ていくとかなりたくさんの CG に関連したテクニックが使われていて、わかりやすいところだけを抜粋するだけでも、フォグや環境マッピングにソフトパーティクルなどいろいろ見つかりますね。
さらに、彼らの手がけた事例を見ることのできるページでは、手前に書かれた文字にマウスカーソルをホバーさせることで、背景の様子が逐一変わるような演出も見ることができます。
体裁こそウェブサイトですが、中身はほとんどゲームなどの実装と同じような感じになっていることが想像できる作りですね……
コンテンツの内容そのものは、いわゆるリンク集ような感じでポートフォリオサイトとしては結構シンプルです。
にもかかわらず、あまりにも圧倒的なそのビジュアルがものすごい迫力で押し寄せてくるかのようです。
Active Theory はいろいろな WebGL 事例を手がけていますが、案件として手掛けた事例に引けを取らない、見事なサイトに仕上がっていると思います。
本当に、見ているだけですごく興奮するような、素晴らしいできばえです。
ぜひチェックしてみてください。
