ムービーに衝突判定付きの 3D オブジェクトを重ねて描画する動画風デモがすごい!
本当にその空間の中に置かれているかのよう
今回ご紹介するのは、映像として撮影された動画の風景に、あたかもそこにオブジェクトが存在するかのように、3D モデルを配置して描画する不思議な WebGL デモです。
今回のような映像に 3D モデルを合成する技術は前にも見たことがありますが、ここまですごいものは初めて見ました。
技術ブログも同時に公開しているので、単純にテクニックの方を参考にしてみるというのもいいかもしれません。
驚きの 2.5D 動画デモ
今回のデモ作品では、本来なら二次元的な情報しか持っていないはずの「映像」の上に、3D の頂点で描画されるオブジェクトが重なったような見た目になります。
さすがに、映像の中に存在する(映っている)オブジェクトとの深度テストは不可能ですが、驚くべきことに衝突判定はある程度行っているようです。
これには After Effects などを利用して作られたデータが使われているようですね。
デフォルトで表示される幾何学図形のシーンでは、自転車の後輪に追従するようにオブジェクトが生成されているのがわかると思います。
画面の左右にある不等号のようなアイコンをクリックすれば、他のオブジェクトが描画されるモードに切り替え可能です。
ふたつ目のシーンは、今度は丸いボールのようなオブジェクトが大量にシーンに登場します。
マウスでクリックした座標に、ばらまかれるようにボールが現れるのですが、二次元の映像のなかにある「路面」や「自転車」との衝突判定が正しく行われるようになっており、とても不思議な感覚を覚えます。
また、全てのシーンに言えることですが、再生されている BGM の波形データを取っているようで、音楽に合わせてオブジェクトがなにかしらの動きをするようになっているのも、密かにポイントです。
幾何学図形の次にボールときて、その次に出てくるのがリアルタイムなテキストレンダリングのデモモード。
これも、三次元空間に破綻無くテキストが重なって描画されるようになっています。画面の下にある文章を変更すれば、その場でリアルタイムにレンダリングされる文章が変化します。
その他にも、三次元空間内にリボン状のラインを引けるモードなどがあります。こちらも完成度が高いですね。
ポップな印象の BGM と、それにぴったりと雰囲気を合わせた可愛らしいオブジェクトがなんともいい感じです。
このデモを作るまでの制作工程は、同時に公開された技術ブログのほうでかなり詳しく公開されています。
three.js やサードパーティ製のソフトを駆使して、どのようにしてこのデモが完成していったのか、気になる方はこちらもチェックですね。
デモを単体で見ても本当に楽しい作品です。
ぜひチェックしてみてください。