ムービーファイルに様々な工夫を凝らし、three.js のレンダリング結果を深度の破綻なく描画する WebGL 実験作！

doxas : 2018-07-09 14:05:23

手作業の部分も多いが面白い試み

今回ご紹介するのは、以前、当サイトでもその独特な作品を紹介したことのある Hèctor Monerris さんの作品と、その紹介ブログ記事です。

今回の作品は、完全な「実験作」という位置づけですが、非常に興味深い試みのなされた作品となっており、その方法論や一部のコードがブログ記事にて紹介されています。

動画ファイルで再生されているムービーシーンに CG を合成しつつ、しっかりと深度テストもパスさせているという面白い内容で、なかなか可能性を感じさせる仕上がりになっています。ただ、どうしても手作業の部分が多いので、気軽に真似するというわけにはいかなさそうですが……

今回の作品は、それほど尺の長くないムービーファイルが再生されると同時に、そこに WebGL によるレンダリング結果を合成していく、というなかなかおもしろい試みのなされた作品です。

ムービーとして再生されるシーンは完全にモノクロのシーンです。

そこにキューブの 3D モデルがインタラクティブに合成されています。

広場のようなところに、キューブのかぶりものをした男性が立っており、左右にゆっくりと揺れるように踊っています。

そこにキューブオブジェクトがたくさん出てくるのですが、上の画像では、そのキューブが画面中央に立っている男性を遮蔽するように描かれているのがわかるでしょうか。

今回の作品ではこんな感じでムービーで撮影された人物や地形と、3D のレンダリング結果が互いに干渉し合うようになっており、前後関係などに応じてオブジェクトがきちんと隠れたりします。

ブログ記事でも触れられていますが、擬似的に深度を内部的に持たせてやることで、衝突判定や深度テストを有効にしているみたいですね。

また、上の画像では男性のシルエットがホワイトノイズのようなテクスチャで塗りつぶされているのがわかりますね。

このように今回の作品ではムービーをリアルタイムに加工したような、そんな不思議な仕上がりになっています。あまり見たことのないような WebGL 作品で、とてもおもしろいです。

制作過程の様子がある程度説明されているブログ記事を見ると、だいぶ手作業で行っている部分が工程としては多いので、簡単に真似するというのは難しそうです。

ただ、ハイコントラストな動画を用意してオブジェクトをマスクしたり、あるいはマーカーとなるオブジェクトを用いて擬似的に深度を計算したりと、こちらもかなり技術的に楽しめる内容になっています。

今回の作品の素晴らしい点は、深度の情報をムービーの再生と完全に同期させているので、その上にどのようなタイミングで CG を重ねても破綻しないようになっている点だと思います。

言葉で言うとわかりにくいかもしれないですが、画面内を漂っている赤い色のキューブがスライダーのつまみのようになっており、演出のタイムラインを操作できるハンドルとして機能します。ぜひ、赤いキューブをぐりぐり動かしてみてください。