プロジェクションマッピングをやる上で問題になるのは、いかに現実のオブジェクトに合わせて映像を投射するかです。単に映像を映すだけではダメで、モノの形に合わせる必要があります。 そこで使ってみたいのがmaptasticです。HTML上のコンテンツを形を変えてプロジェクションマッピングにあった形にしてくれます。

maptasticの使い方

デモです。Shift+スペースキーで編集モードになります。

こんな感じで形を変えることができます。プロジェクターで投影しつつ、四隅を合わせることでマッピングを行えます。

ビデオタグの部分だけでなく、他のDOMに対しても変形が行えます。

面白いのは動画はそのまま流れているということです。

maptasticを使えば動画をそのままマッピングして再生できます。より本格的なエフェクトは無理ですが、お試しとしては十分楽しめるかと思います。

maptasticはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

https://glowbox.github.io/maptasticjs/example/index.html glowbox/maptasticjs