いまさらだけど TouchDesigner でプロジェクションマッピング

はじめに

Qiita 初投稿のあおきです。よろしくお願いします。
TouchDesigner Advent Calendar 2019 への投稿という事で、テーマを何にするか迷ったのですが、先日プロジェクションマッピングをやろうとした際に意外と情報が少ないと感じたので、自分が調べた範囲の事を書きたいと思います。内容としては初中級レベルの内容となっています。
（使用バージョン : TouchDesigner 2019.20140）

「TouchDesigner　プロジェクションマッピング」で検索すると、松山周平さん、松波直秀さん、そしてナカジさん等の大先輩方の記事が見つかると思います。

松山さんの記事
松波さんの記事
ナカジさんの記事1
ナカジさんの記事2

kantanMapper に関する使い方についてとても参考になる情報が書かれているのですが、内容がやや古くなっていたり、もう少し情報があったらなと感じたところもあったので、この記事はそれらのアップデート&追加情報的な感じと思って頂けたらと思います。

準備

Windows でも Mac でも、マルチ画面出力を行う場合は画面をミラーリング（複製）として使うのではなく、拡張として使うのが便利です。
以下のリンクを参考に画面を拡張モードに設定してみてください。
Windowsの設定
Macの設定

マッピングツール

TouchDesigner では、kantanMapper が有名です。その他にシンプルなツールとして stoner というものもあります。今回はこの2つのツールについて解説します。

kantanMapper

Step 1: 起動

下の図を参考に Palette -> Tools から kantanMapper をワークスペースにドラグ&ドロップしてください。

ワークスペースにContainer が１つ現れるので、パラメータウインドウから Kantan -> Open Kantan Window の Pulse ボタンを押し設定画面を開いて下さい。

いかがですか？ 以下のような画面が現れたでしょうか？

この画面を閉じる時は、パラメータウインドウの Close Kantan Window の Pulse を押すか、設定画面にマウスポインタを置いて ESC ボタンを押してください。

設定画面	操作
Open	Open Kantan Window: Pulse クリック
Close	Close Kantan Window: Pulse クリック or ESC

Step 2: 基本設定

さて、ここからが本番です。
マッピングするための TOP は何を使ってもいいのですが、今回は Movie File In TOP を使います。
邪魔になるので、一旦 kantanMapper の設定画面をクローズしておきます。
次に、kantanMapper の Container と同じレベルのところに Movie File In TOP を作ります。
(サンプルでは、ファイルを JellyBeans.jpg に変えています）
再び kantanMapper のパラメータウインドウから Open Kantan Window の Pulse をクリックして設定画面を立ち上げます。

設定画面では Resolution が 1280 x 720 になっていますが、HD や 4K を扱う人はここの値を 1980 x 1080, 3840 x 2160 などに変えておくといいでしょう。

それでは画像を配置するエリアを作成します。
1. Shapes セクションの Group を選択
2. Tools セクションの Create Quad (上段左から3つ目の白い四角いアイコン)を選択
3. 右側のキャンバス上でマウスを左クリックしながらドラグし矩形を描画

これで投影するエリアをザックリと設定しました。（矩形の色はその時々で変わるので気にしないでください）

次に、先ほど kantanMapper の Container の傍においた Movie File In TOP を Rentangle というセクションの Texture というところにドラグ & ドロップします。Texture のところに Movie File In TOP のパスが表示されますが、まだ画像はでてませんね。
では次に、このパスが書いてあるところの横にある "X" マークをおもむろにクリックしてみてください。

はい、画がでましたね！

これで画像（映像）をプロジェクションする準備は整いました。

Step 3: 出力

ここまできたら、あとはプロジェクターに出力して形を整えるだけです。
まずは出力からいきましょう！

セカンドモニターやプロジェクターがつながっている人は、設定画面の左上 Project セクションの Window Options を押すと、パラメータウインドウが立ち上がります。Window タブのパラメータを以下のように設定します。

パラメータ名	設定値
Justify and Offset To...	Specify Monitor
Monitor	1

　

Window 設定画面をそっと閉じ、kantanMapper の設定画面に戻ります。
Project セクションの Toggle Output をクリックすると、先ほど指定したプロジェクターに画像が表示されます。

Step 4: シェイプの調整

ここまで来たら最後の仕上げ、シェイプの調整です。
平面に1画面だけマッピングする場合は、kantanMapper 設定画面の４つのアンカーポイントを調整するだけです。

ここでやや問題になる（と感じている）のは、この画面の操作です。細かい調整が必要な場合には、アンカーポイントを細かく操作したいですよね。その時の画面操作が TouchDesigner の画面操作と違うのでアレアレ？ってなっちゃうかと思うので、以下の操作を参考にして細かく調整してみてください。

やりたいこと	操作
Pan	マウス右ボタンをホールドしながらドラグ
Zoom	マウス中ボタンをホールドしながら左右にドラグ

Step 5: さらに微調整

矩形ではない形状にプロジェクションしたり、複数台のプロジェクターを使ったりする場合、4点のアンカーポイントだけでは調整しきれませんよね。

そんな時は、Tools Section の Grid Warp をやさしく押してみてください。グリッドが現れましたか？

右側のキャンバス画面と同じものがプロジェクター側にも表示されていると思います。
デフォルトでは 3 x 3 のアンカーポイントが表示されていますが、より細かく調整するには Shape Tools セクションの Rows / Cols でお好みの数を指定してみてくだい。

均等に分割するんじゃなくて、好きなように分割したい場合は、Tools セクションにある、Add Row, Add Column を使って好きな所に分割を作ってください。

アンカーポイントはマウスで直感的に操作できます。また矢印キーを使っても操作できるので、お好みで使い分けて下さい。

やりたいこと	操作
アンカーポイントの移動	マウス左クリック + ドラグ
	矢印キー or Shift + 矢印キー

さて、ここまででシンプルな使い方はできたと思いますので、これから少しだけ応用的な使い方をしてみたいと思います。

分割表示

画像の一部を切り出してマッピングする方法です。
簡単に言うと、サイコロの上、左、右の3つの面を表示させるように、マッピングする領域を切り出して割り当てる方法です。Resolume でいうと slice です。
サンプルとして以下のような TOP（layout1） を作ってみました。

先ほどやったように、Tools の Create Quad を使って3つの矩形を適当に作り、先ほど作った TOP (例では layout1）を各シェイプ(Rectangle1, 2, 3)の texture に割り当て、表示を ON にしてください。

では、Rectangle1 に赤、Rectangle2 に緑、Rentangle3 に青を割り当てていきます。
まずは Shapes セクションから Rentangle1 を選び Rectangle セクションの Edit Texture をクリックします。
するとまたもや新しいウインドウが立ち上がってきます。
黄色、ピンク、センターマーカーのコントロールポイントを操作して、赤い所だけをくりぬいて下さい。

やりたいこと	操作ハンドル
移動	センターマーカー
スケール	ピンクのポイント
回転	黄色のポイント

kantanMapper の設定画面に戻るとこんな感じになっているはずです。

同様に、Rectagle2 は緑、Rectangle3 は青をくり抜きましょう。
最終的に以下のようなまります。

仕上げです。先ほどと同じようにプロジェクターの結果を見ながらマッピングしていくと、最終的に以下のような感じになると思います。

いかがでしょうか？
これでプロジェクター1台を使ってマッピングする基本はできたのではないでしょうか？

複数台のプロジェクターを使う

より広い空間をマッピングしたり、光量を稼ぐためにプロジェクターを2台、3台と増やして使うこともありますよね。
前者の場合、隣り合ったプロジェクター映像のエッジを揃える方法とブレンドする方法があります。
その場合、kantanMapper の Container を複数個作って、Monitor : 2, Monitor : 3 と割り当てて行けばよいのですが、kantanMapper の処理が重く、PC によっては 60fps がキープできないような状況に陥ります。

ちなみに今使っているノート PC で kantanMapper のノードをみてみると、なんと処理に 12msec もかかっているばかりか、静止画なのに毎フレーム Cook しています。Σ(￣ロ￣lll)ｶﾞｰﾝ

これでは3枚出力したら 60fps どころか 30fps もキープできません。。。
kantanMapper の Container をよく見るとアウトレットから2つの TOP が出ています。何が出ているか確認すると、プロジェクターに送っている画像が、2つ目からはUVマップが出力されているのが分かります。

これは、入力画像（layout1）に、出力2（null2）のUVマップを使って変形してあげると、出力1（null1）の画像ができるよ。ってことを示しています。
では、本当にそうなのか Remap TOP を使って確認してみましょう。
静止画だと Cook されないので時間が計測できないため、動画と合成させたものを remap に突っ込んで計測してみます。

予想通りの結果になりましたね！　CPU, GPU あわせて 0.15msec 程になっています。
処理が超軽くなったので、複数台のプロジェクタに出力しても 60fps キープできます。

厳密にいうと TOP のフィルタがかかっているので多少の差は発生していますが、そこは一旦無視しておきます。
Window Compo を作りパラメータウインドウの値を以下の通り設定します。

パラメータ名	設定値
Windows Operator	remap1
Justify and Offset To...	Specify Monitor
Monitor	1
Borders	OFF
Opening Size	Fill
Set as Perform Window	Set ボタンをクリック

Open as Separate Window　の Open からマッピング画面を起動します。

無事にプロジェクターに表示されましたか？
いよいよラストです。

ここで再び kantanMapper の設定画面を起動し、いま作った window1 の出力結果をみながら微調整を加えていきます。

調整が終わったら null の Lock を ON にするか、Movie File Out TOP を使って UV マップを保存します。
保存する場合は、ファイルは OpenEXR で 32bit RGB(RGBA) または PNG, dds などの 16bit RGB(RGBA)で保存しておくことをお勧めします。

パラメーター名	設定値
Type	Image
Image File Type	OpenEXR

保存できたら Movie File In TOP でファイルをロードし、Remap TOP の2つ目の入力と置き換えます。
このようにしておけば、kantanMapper は不要になるので削除しても構わないのですが、修正があった時に元の状態から作業したいものです。
kantanMapper には設定を保存／ロードする機能があるので、これを使っていつでも設定を呼び出せるようにしておきましょう。

kantanMapper まとめ

こんな感じで kantanMapper ではプロジェクションが簡単に行えますが、CPU コストがかかるのが弱点です。
Remap TOP と組み合わせて使うことでこれらの弱点をカバーしてみました。

それと、kantanMapper はよく落ちます（苦笑）。
アンドゥをしようと Ctrl-Z を連打してると直ぐにフリーズしたり落ちたりします。
作業は一方行で、間違っても後戻りせず前に突き進む強い心が必要なツールです。

stoner

じつは一枚の画像をワープするだけのプロジェクションマッピングだったら、こっちの方がおススメです。
kantanMapper の時と同じように下図を参考に Palette -> Tools から stoner をワークスペースにドラグ&ドロップしてください。

今回もサンプルとして JelleyBeans.jpg を使った Movie File In TOP を使います。
Movie File In TOP と stoner 繋ぎ、stoner Container のパラメータウインドウから Open Stoner Window の Pulse ボタンをクリックしてください。

以下のような設定画面が立ち上がってくるのが確認できたでしょうか？

設定メニューが下の方にあるので、Mode から作業モードを切り替えてみたり、Rows and Columns セクションからグリッドサイズを変更してみたりしてみてください。
図は下の表の通り設定した時の画面です。

セクション	値
Mode	Grid Warp
Rows and Columns	8 x 8

4点のアンカーポイントだけでよければ、Mode : Keystone にしていい感じに調整するだけです。より細かな調整が必要な場合は Grid Warp を使い以下の表を参考に調整してください。

やりたいこと	操作
Zoom	マウスホイルの上げ下げ
Pan	マウスの中ボタンをホールドしながらドラグ
アンカーポイントの移動	マウス左ボタンホールドしながらドラグ
	矢印キー or Ctrl + 矢印キー

比較のため、stoner の出力とパフォーマンスをみると、処理速度は CPU, GPU あわせても 0.6 msec 程度です。
これなら Remap TOP を使わずとも stoner だけで 60fps をキープしたまま複数出力することができますね。

kantanMapper の時と同様 window Comp を使い、以下の通り設定します。

パラメータ名	設定値
Window Operator	任意のTOP（例ではstoner1の出力null1）
Justify and Offset To...	Specify Monitor
Monitor	1
Opening Size	Fill
Borders	Off
Set as Perform Window	Setをクリック

あとは Open as ～ Window をクリックしてプロジェクターに表示させてください。
調整の時は Open as Separate Window、本番は Open as Perform Window が良いんじゃないかなと思います。

まとめ

マスクを切らずに１つのTOPを変形させるだけでよければ、stoner の方が簡単かつ軽量でおススメです。
１つの TOP からマスクで切り出してマッピングする場合は kantanMapper を使いましょう。ただし、処理が重いので、Remap TOP と併用するのが良いんじゃないかなぁと思います。

既に 3D モデルが用意されている場合は CamShnappr を使うと便利です。その辺また次回にでも。