トランスフォーマーのキャラクターが生き生きと動き回る? 選択方式で内容も面白い WebGL コンテンツ!
ド派手な 3D 表現が面白い
今回ご紹介するのは、先日も、別のサイト(公式サイト)をご紹介したばかりの、トランスフォーマーの新作映画に関連したサイトです。
こちらのサイトでは、ちょっとした心理テストのような感じの質問がいくつか用意されていて、それらにどのように答えたのかによって、最終的に出てくる結果が変わるという方式になっています。
とにかく生き生きとした 3D モデルの動きが秀逸な、驚きの内容となっています。
どうやらあとから聞いた話では、今回のサイトは PlayCanvas 製らしいです……すごいですね……
2017/7/12 にこの記事を公開したんですが、公開と同時にどうやら当サイトの URL が 404 になってるみたいです…… ついこの間までは見れていたのですが……復旧することを祈りつつも、もしかしたら期間限定のコンテンツだったのかもしれないので、その点ご了承ください……
選択した答えによってモーションも変化!
今回のサイトは、かなりしっかりとした 3D モデルが使われており、一見、ゲームかなにかのサイトなのではと錯覚してしまう人もいるかもしれません。
ブラウザで、こんな感じの 3D モデルが普通に動いているということが、なんだか不思議な感じがします。
まず最初にサイトがロードされると、トランスフォーマーのおなじみのロゴマークと共に、クオリティを選択できるボタンが出てきます。
負荷が気になる場合は「Medium」などを選択するといいでしょう。
スペックに不安が無いなら「High」を選択すると、より高品質なビジュアルを楽しむことができます。
クオリティを選択すると、トランスフォーマーの最新タイトルのロゴが表示された直後、カメラがグイッと動いて町並みと共にキャラクターが 3D モデルで描かれたビジュアルが出てきます。
これだけキッチリとした 3D モデルが使われているケースは珍しいので、パッとそれが目に入った瞬間には、結構大きな驚きを感じる人も多いのではないでしょうか。
私はあんまりトランスフォーマー詳しくないのですが、バンブル(Bumblebee)というキャラクターなのかな?
車から人型にトランスフォームするキャラクターですね。
コンテンツの内容としては、ひとつの問いに対して四つの選択肢が表示される、ちょっとした心理テストのような感じのもの。
こちらはそれぞれの選択肢ごとに短いイントロミュージックが割当てられていて、エレキギターが特徴のものからボーカルが特徴のものまで様々です。
そして、その曲の特徴に合わせるように、キャラクターが動くというのがこのコンテンツのすごいところで、ギターを引くようなモーションや、ノリノリでダンスする様子などを楽しむことができます。
キャラクターのモーションは、恐らくモーションキャプチャなどではなく手付けによるものだと思いますが、それが逆に、どこかロボットっぽい感じの印象を作っているようにも思いました。
基本的にあまり激しいカメラアングルの変化はなく、シーンのバリエーションそのものはそれほど多くない今回のコンテンツ。選択肢も五問だけですし、それほどボリューム感があるというわけではないですね。
でもそれだけに、巨大な 3D モデルの生き生きとした動きや、個性というか、感情をも伝えてくるような雰囲気づくりは見事だなと思いました。
3DCG 的な目線では、結構細かいところまでよーく観察してみると、微妙にブルーム処理されているところがあったり、金属の質感表現に部位ごとの違いがあったりと、なかなか手が混んでいます。あんまり CG に詳しくないと見逃してしまうかもしれないような部分ではありますが、WebGL を自分で触ることがあるのなら参考にできるところも多いでしょう。
コンテンツの内容が比較的シンプルなので、サクッと閲覧できる、そんなコンテンツとなっています。
ぜひチェックしてみてください。