Unity によるプロジェクションマッピング入門
Unity を使ってプロジェクションマッピングをやってみましょう。プロジェクターさえあれば、意外と簡単にできちゃいます。
必要なもの
Unity
後述する「仮想シーンの投影」を行う場合は Pro ライセンスが必要になります（Render Texture 使用のため）が、簡単なマッピングであれば無料ライセンスだけでも十分です。
適当なプロジェクター
スペックは低くても構いません。小規模なものであればポケットプロジェクターでも可能です。
投影対象となる物体
最初は箱などの単純な形状の物体から挑戦すると良いでしょう。白い紙を貼った段ボール箱やティッシュ箱などで構いません。
測定器具
大きさ、距離、傾きなどを測定する器具があると便利です。例えば、ここで紹介する事例では次のような器具を使いました。
- メジャー
- レーザー距離計
- iPhone の傾斜計
- iPhone のカメラ
ティッシュ箱ぐらいの規模であればレーザー距離計は不要ですが、段ボール箱の規模になると欲しくなってきます。それ以上なら必須と考えてよいでしょう。
iPhone の傾斜計はコンパスアプリに付属されているものです。プロジェクターの傾斜を計るのに使います。カメラはプロジェクターの投射角の測定などに使います。
前準備
作業を始める前に、まずプロジェクターの設定を調整しておきましょう。
- 台形補正機能を搭載している機種では、これを off にします。
- 投影サイズの変更（ズームレンズ）ができる機種では、これを最も小さい（狭角）設定にします。
その他にも、明るさの自動調整や、高さの自動調整の機能がある場合は、これを切っておくとよいでしょう。
シーンのセットアップ（実世界側）
今回は、白い段ボール箱を投影対象として、下図のようなセットアップにしました。
- 箱は人の肩ぐらいの高さに配置。
- プロジェクターは机の上に配置。
- プロジェクターの投射画面のほぼ中心に箱がくるよう調整。
- 観客はプロジェクターの左後方 1m 辺りにいるものとする。
だいたいの配置を行ってから、下図のようなテストパターンを表示して、ほぼ中心に箱が位置するように調整しました。
プロジェクターの縦位置調整（傾き調整）は操作が難しく、ぴったりと中心に合わせることはできないかもしれません。大まかに合わせておけばよいでしょう。左右については調整が容易なので、この時点でぴったりと合わせておくことにします。この時点でなるべく不定な要素を潰しておいた方が、あとの調整が楽になるからです。
シーンのセットアップ（Unity 側）
上で作成したシーンを Unity 上に再現します。プロジェクターの位置にはカメラを配置します。
まずは箱のサイズを測定してモデリングします。こんな感じでテストパターンを貼付けておくとよいでしょう。
箱の位置を特定します。プロジェクターに近い方の縦辺をシーンの基準として、(0,*,0) 上に位置するものとしましょう。高さは距離計で計ります。
上端が 1.847m の高さにあることが分かりました。箱の上手前の頂点がピボットになるよう編集したのち、この点を (0, 184.7, 0) に配置します。
箱の姿勢（Y軸回転）については、大まかな角度を目で求めて設定しておきます。今回のセットアップでは箱の姿勢以外のすべての変数が実測可能なので、姿勢だけは不定な変数として放置することができるのです。
次に、プロジェクターの位置にカメラを配置します。距離計で高さを計ります。
Z座標の特定のために、基準軸からの距離を計ります。タンジェントから算出する方法もありますが、ここでは下図のようにメジャーを垂らして位置合わせをしつつ水平距離を計りました。
プロジェクターの傾きを測定します。このとき、プロジェクター本体の傾きは参考にならないので注意してください。プロジェクター本体の角度と投射方向が一致していないケースもあるためです。下図のように板を当てて投射錐体を視覚化したうえで、赤線の角度を傾斜計で測定します。その２つの角度の平均値をカメラの姿勢として使います。
また、プロジェクターの投射角とカメラの FOV (Field of View) を一致させる必要があります。上で求めた赤線角度の差分がそのまま FOV 値として使えます。また、下図のように写真を取り込んで、Unity の Scene ビュー上で角度を一致させることでも調整が可能です。
調整
シーンのセットアップが完了したら、プロジェクター側の画面で Game ビューを最大化します。恐らく箱の姿勢（Y軸角度）だけがずれているはずなので、画面を見ながらこの値を増減して調整します。投射される箱と実世界の箱がぴったりと一致する値が見つかればビンゴです。
ただ、多くの場合、一発では一致しません。微妙にずれていたり、まったく見当外れな位置に投射されてしまうかもしれません。大幅にずれている場合は測定に何か致命的なミスがあったと考えられます。値の確認や再測定を行いましょう。微妙にずれている場合は、座標の微調整か、あるいは実物の配置の微調整により対処できます。
ひとまずまとめ
ここまでのセットアップにより、箱の各面に任意のテクスチャを投影できるようになりました。視点に依存する類のテクニックを用いることはできませんが、それでもできることは多々あります。たとえばこんなのはどうでしょう？
Mountain Brick — Video Game Mapping
じっさいに試してみると分かりますが、実世界の物体を自由に光らせることができるというのは、意外と面白いものです。この効果を使って、単なるスクリーンへの投影とは一風違った表現・演出を模索してみると面白いかもしれません。
仮想シーンの投影
プロジェクションマッピングでよく用いられる演出のひとつに、現実とは異なる仮想シーンを投影することによって得られる錯視効果があります。これを多用した作品として、例えば次のようなものがあります。
この手の演出は観客の視点位置に依存するという制約がありますが、効果的に用いることで、現実の物体のあり方を変えるような——観客の現実感を CG で上書きするような、とても幻惑的な効果を導き出すことができます。
例として、先ほどセットアップした箱の中に、下図のような「仮想の箱」を投影することを考えてみましょう。
このような効果を得るには、Unity の中で仮想シーンを箱にプロジェクションマップしてから、実世界の中でその結果を箱にプロジェクションマップする、という、２段階のプロジェクションマップを行う必要があります。
具体的には次のようなセットアップになります。
- 「仮想の箱」をセットアップする。現実の箱と同じ座標上に配置します。
- 観客の視点の位置にカメラを配置する。
- 観客視点カメラから render texture へレンダリングを行う。
- Projector コンポーネントを使って render texture を箱に投影する。
このようなセットアップを行うことで、観客の視点から見た仮想シーンの風景が（Unity の中で）箱へ投影され、その結果が（実世界の中で）現実の箱に投影されるわけです。
設定をうまく行うには layer を駆使するとよいでしょう。観客視点の仮想シーンに属するオブジェクトは "Audience" layer に、プロジェクター視点の実世界シーンに属するオブジェクトは "Projector" layer に、というように layer で分類分けし、各々のカメラでは適切なオブジェクトだけがレンダリングされるように調整していきます。
観客視点カメラの FOV は自由に設定できますが、Projector コンポーネントの FOV と必ず一致させるよう注意してください。狭くするほど画質は高まりますが、仮想シーンの範囲も狭まります。
Render texture の内容を Projector コンポーネントによって投影する際に、少し特殊なシェーダーを使う必要があります。ライティングや減衰係数を無視して render texture の内容をそのままプロジェクションするシェーダーを用意しました。
Assets/Projector/Projector.shader
特にこだわりが無ければ、これをそのまま使えばよいでしょう。
ふたたびまとめ
以上で Unity を使ったプロジェクションマッピングの基礎は終了です。ここで解説した内容は、プロジェクションマッピングにおいてはごく基本的なテクニックに過ぎませんが、これらのテクニックだけでもいろいろな遊びができます。
- Vine - Unity でプロジェクションマッピングの実験中。ダンボールの中に箱が浮いてる？
- Vine - 非現実的なものを出しても面白いかもしれない（Unity でプロジェクションマッピング
- Vine - Unity を使ったプロジェクションマッピング続き。暗くなって実験しやすくなった。箱の中に囚われた天使？
また、ライティングを使って錯視を生み出すような使い方も面白いです。これも上で解説したテクニックの応用で実現できます。
プロジェクションマッピングを実現する手段は Unity 以外にもいろいろあります。そこで敢えて Unity を用いるメリットは、プロトタイプの作りやすさにあります。既に仕様の決まったものを製作するのではなく、様々な実験をその上で行いたいような場合に、Unity は便利な道具となりえるでしょう。特にインタラクティブ性を持つ作品を製作するにあたっては、大きなアドバンテージを持っていると考えられます。
プロジェクションマッピングに興味を持ちつつも実際に試したことが無いという方は、これを機会に Unity でのプロジェクションマッピングに挑戦してみてはいかがでしょうか。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent