スタント専門のフィルムスタジオがコーポレートサイトに WebGL を導入！？
スタントのスタジオらしいサイトに
今回ご紹介するのは、とあるスタント専門のフィルムスタジオのコーポレートサイトです。
スタントというと、激しいアクションや危険なシーンの撮影というイメージがありますが、今回のサイトもそんなスタントのイメージにぴったりと言った感じの演出が加えられています。
WebGL ならではのインタラクションを導入しつつ、スタジオで制作された映像が流れるという凝った趣向になっています。
ビデオを活用した WebGL 実装
今回のサイトは、背景になっている部分が WebGL による実装になっています。
ページを開くとおもむろにこのスタジオで撮影されたムービーが流れ始めるのですが、その背景で流れる動画の部分が、実は WebGL によってレンダリングされたシーンになっているというわけです。
ガラスを突き破って人が飛び出してくるシーンが見えますね。スタントの代名詞と言っても過言ではないド派手で危険なシーンの様子です。
しかし、これはあくまでも実写映像の、撮影されたムービーによる「動画のシーン」です。
このようにムービーが流れている状態で、ムービーの領域をクリックしてみましょう。すると、そのクリックされた部分が、今度は「WebGL のエフェクト」として画面が割れたような演出が動きます。
静止画ではちょっとわかりにくいかもしれませんが、もともと再生されていたシーンが砕けて欠片となり、画面の四方に向かって飛び散っていきます。
その裏からは、また別のシーンの動画の様子が見えるような感じですね。
そして、上の画像をよく見るとわかるとおり、飛び散った欠片の表面にも動画の映像が映り込んでいますね。これは、動画をテクスチャの元データとして利用できる WebGL ならではの演出だと言えますね。
その他、よーく見てみるとわかると思うのですが、画面内の上部に置かれている「STUNT POWER FILMS」と書かれた文字の部分には、なにやらノイズのようなものが乗って表示が乱れています。このようなグリッチエフェクトがランダムで掛かるのも、このデモの特徴のひとつになっています。
マウスによるクリック操作で、画面が割れるようなエフェクトを。
そして時間の経過とともにランダムで追加されるグリッチエフェクト。いずれのエフェクトも、激しく危険な世界であるスタントというジャンルをよく表現できていると思います。
あまり大規模なフィルムスタジオではないようですが、こんなふうに一工夫されたサイトを用意してあると、なんとなく印象にも残りやすいですね。
WebGL の実装としてはそれほど凝ったものではありませんが、動画を用いた面白い実装例のひとつとして、ぜひチェックしてみていただければと思います。
