2014-10-12

デジタルアートセミナー#3 2日目の最初のセッションは、プロジェクションマッピングについて。

講師 : 藤本直明、他
openFrameworksでのプロジェクションマッピングの基礎を学び、実際に数名ずつのグループで簡単な制作を行います。また、エッジブレンディングやメッシュワープなど、実践的なプロジェクションマッピングを行う上でのテクニックについても紹介します。

過去のセッションのレポートはこちら。

プロジェクションマッピングとは

プロジェクションマッピングじゃないもの・・・マッピングしてなくて、ただプロジェクションしてるだけのものとか

プロジェクションマッピング事例

3D Projection Mapping promoting The Tourist in Dallas - YouTube

マッピングソフト

MadMapper

ofxQuadWarp

シンプルなマッピングのアドオン。4つの頂点を動かすとその矩形に合わせて映像をwarp処理してくれる。

（頂点調整前）

（頂点調整後）

使い方

// 画像読み込み
img.loadImage("quad_warp_kittens.png");

// 位置とサイズを取得
int x = (ofGetWidth() - img.width) * 0.5;       // center on screen.
int y = (ofGetHeight() - img.height) * 0.5;     // center on screen.
int w = img.width;
int h = img.height;

// FBO確保
fbo.allocate(w, h);

// 画像のrectを ofxQuadWarp にセット
warper.setSourceRect(ofRectangle(0, 0, w, h));              // this is the source rectangle which is the size of the image and located at ( 0, 0 )

// 4つの頂点の初期座標を ofxQuadWarp にセット
warper.setTopLeftCornerPosition(ofPoint(x, y));             // this is position of the quad warp corners, centering the image on the screen.
warper.setTopRightCornerPosition(ofPoint(x + w, y));        // this is position of the quad warp corners, centering the image on the screen.
warper.setBottomLeftCornerPosition(ofPoint(x, y + h));      // this is position of the quad warp corners, centering the image on the screen.
warper.setBottomRightCornerPosition(ofPoint(x + w, y + h)); // this is position of the quad warp corners, centering the image on the screen.

// セットアップ＆ロード
warper.setup();
warper.load(); // reload last saved changes.

Quad Warp事例

トラッキングしてプロジェクション

YouTube

講義資料：プロジェクションマッピング実例と応用｜ひつじ｜note

車に再帰性反射材のマーカーを付けて、車の位置をトラッキングしながらその周りで映像が展開するという演出です。車のトラッキングには、6台のoptiTrackを15mの高さから吊り下げてセンシングをしています。

optiTrackとは赤外線による光学式モーションキャプチャで、複数台を連携させて高い精度とfpsでマーカーの位置が取得できるデバイスです。

車にマッピングしたくないので、車には白い光をあてて、プロジェクションを逃がしてやる。

→ 再帰性反射材のマーカーを３つ載せて、OptiTrack でトラッキング