今回もすごいぞ Active Theory！ Hulu のハロウィーンキャンペーンページが迫力満点！
まるでプリレンダリングの映像作品のよう
今回ご紹介するのは、動画ストリーミングサービスとして有名な Hulu の、ハロウィーンに連動したキャンペーンサイトです。
制作は Active Theory みたいですが、相変わらずとんでもないクオリティで WebGL 事例としての完成度は異常に高いです。
まるでプリレンダリングした映像作品を見せられているかのようなグラフィックスは、最後までハラハラさせられる大変面白い内容となっています。
リンク：
ウェブカムを有効化してカードも作れる
今回のサイトはハロウィーンの企画なので、いわゆるホラー系の作品を中心に、SF からアニメまで含めた様々な作品がサイト内で登場します。
とはいえ、いわゆる普通の動画埋め込みのような形でそれらの作品が出てくるわけではなく、あくまでも WebGL で描かれる 3D シーンのなかに、素材として出てくるような感じです。
今回のサイトは、音声が再生されるのですがぜひ音声ありで楽しんでいただくことをおすすめします。
また、後述しますがウェブカメラへのアクセスを求められる場面があり、これを許可しておくことで最後にちょっと面白い場面を見ることができるようになっています。
上の画像は、コンテンツがスタートしてから現れる序盤のシーンをキャプチャしたものです。
画面の中心に、懐中電灯で照らしたかのようなひときわ明るい部分があるかと思うのですが、これがマウスカーソルの動きにある程度連動するようになっています。
カーソルを気になる部分に向けて動かすと、そこが懐中電灯で照らされてハッキリと目に映るようになる…… といった感じです。
ちなみに、カーソルで視点を動かすことができると言っても、ユーザーに注目させたい要素がある場合ではカーソルの影響力が弱まって視線を動かせなくなるなど、UX は相当考えて作り込まれていますね。
室内を模したシーンもあれば、墓場のような屋外のシーン、さらには混沌とした精神世界のようなシーンなど……
とにかくバリエーション豊富な場面が用意されています。
その場面ごとに WebGL 実装として注目したい技術がいろいろあり、ここではなかなか全部を紹介することはできないのですが…… あえて一言で総括するなら、極力負荷を抑えつついかにリッチなグラフィックスを見せるか、ということにかなり気を配っている感じがしますね。
落雷の表現なんかはビルボード的なローポリゴンモデルで表現していると思いますが、頂点処理が軽量な分だけ、フラグメントシェーダを活用して質感向上を図ったりされているので、よーく観察してみるといろいろ勉強になりそうです。
後半に現れる絵画が両サイドの壁に敷き詰められたシーンなんかは質感も本当に素晴らしくて思わず見入ってしまいます。
この上の画像、よく見ると左側になんかメガネを掛けた私の顔が映ってるんですけどわかりますかね？
今回のサイトでは、ウェブカメラを有効にしておくとコンテンツ終盤のとある場面でカメラに映り込んでいる人物の顔の部分をキャプチャしてくれるようで、こんなふうにオリジナルのカードとしてダウンロードできるようになっています。
これはめちゃくちゃ面白い試みだと思いました。（本当はびっくりした顔とか、怖い顔とかをしてカードに映り込むのが正しいんだと思いますが、私はめっちゃ真顔で映り込んでました 笑）
このカードにユーザーの顔をはめ込むという実装、たぶん、顔検出する何かしらの機構と組み合わせてやってるのでしょうが、技術力もさることながらアイデアがすごいですよね……
WebGL 実装としての完成度はいわずもがな。
とにかくその迫力に圧倒される非常に完成度の高い作品となっています。
ハロウィーン関連ということでもしかしたら期間限定でしか見ることができないかもしれませんので、気になる方はぜひチェックしてみてください。
