最近様々な技術系のブログで取り上げられているHTML5。かなり複雑な動きやインタラクティブな処理ができるようで、実験的な試みも多数行われていますが、今回紹介するのはHTML5で動画を細かく分散させたり、3D空間にマッピングするという「Blowing up HTML5 video and mapping it into 3D space」を紹介したいと思います。

まずは動画を分散させる加工をHTML5で施したもの、上記の写真のように、動画をクリックすると、細かな長方形上に動画が砕け散ります。マッピングされていますので、細切れになったエレメント上で再生は続いています。実際制作したデモが公開されていましたので「HTML5 Video Destruction」からご覧ください。

詳しくは以下

次に3D上にマッピングしたものです。デモは「HTML5 Video 3D」からご覧ください。いままで不可能だった表現が、HTML上で再現されています。現在はブラウザの互換の問題もあり、一般的にはまだまだ使われてはいませんが、近い将来多くのサイトで利用されるのは間違いないと思います。

原文の「Blowing up HTML5 video and mapping it into 3D space « Craftymind」にはソースコードも公開されていましたので、勉強したいと思っている方は原文もどうぞ。

Blowing up HTML5 video and mapping it into 3D space « Craftymind