恐妻家の気分が味わえる！？ とあるゲームのティザーサイトに見る WebGL 実装
一点ものだが高い完成度
今回ご紹介するサイトは、とあるゲームのティザーサイトなのですが、そのトップページに WebGL 実装のデモがひとつ、用意されています。
サイトはあくまでも宣伝用のサイトのようで、しかもまだ現時点では開発中なのかな？ ほとんどのコンテンツは動画やメールフォームなどで、WebGL のデモが複数あるということではありません。
ただ、その一点もののデモがなかなか美しいレンダリングになっており、一見の価値があるかなと思い紹介することにしました。
three.js を利用した美しきローポリゴン
サイトにたったひとつだけ用意されている WebGL のデモは、サイトに訪れると自動的にロードされ、最初から表示されます。
レンダリングされる 3D シーンは非常にキレイで、かなりこういった表現に 慣れた開発者がいる ことをうかがわせます。
恐らく、ゲームの雰囲気もローポリゴンなものなので、今回のサイトのようなシーンづくりが得意なのでしょうね。結果的に、WebGL でも見事にゲームの雰囲気を再現しています。
暗い、雨の降りしきる夜。
時折轟く雷鳴が、怪し気な雰囲気を醸しだしています。
基本的にユーザーが起こせるアクションはほとんどありませんが、マウスカーソルを移動させることによってインタラクティブにちょっとだけ変化が起こるようになっています。
画面の中央にある Angry Wife のロゴの上に、三角系のピラミッドのようなマークが描かれているのがわかるでしょうか。このピラミッドには目がついているのですが、この目がマウスカーソルを追従するようになっていて、マウスカーソルを動かすとカメラと一緒にピラミッドの視線が動きます。
また、このピラミッドにマウスカーソルを重ねると……
マウスカーソルが重なった瞬間にピラミッドから稲妻のようなアイコンが飛び出してくると同時に、背景のシーンが稲光によって輝くようになっています。
シーンの奥のほうにある住宅が、恐らく恐妻家の主人公が住む家なのだと思いますが、稲光の瞬間に窓をよーく見ていると、誰かがヒョイッと出てくる様子が確認できます。
意外と、細かいところまでしっかり作られているなあという印象です。
サイト内のコンテンツは動画などがほとんどなので、あまりいろいろなことができるというわけではありません。しかし、サイトのデザインやゲームの雰囲気に合わせた WebGL 実装など、結構見応えがあるのかなと思います。
ぜひチェックしてみてください。
