
Touchで画像出力出来るエフェクターを作れ①
リハビリを兼ねて制作スタート
ちょこちょこ前からnoteでも書いていて、今週月曜に正式に発表したのですが、学生時代に一緒にメディアアートの作品を制作していた仲間と再び組んで「WONDEMENT」というクリエイティブチームを立ち上げました。
そういった背景もあり、再び作品を制作するにあたってリハビリを兼ねてTouchDesignerで作ったものを、その過程と共に紹介してきます。
ちなみに前回TouchDesignerを触ったのは2月に会社の同期たちと開催したイベントでVJをやるためにシステムを作った以来です。
その時はそこまで複雑なものを作ったりしなかったので、色々と弄るのはそれこそ学生の時以来になります。
イベントに向けて作ったTouchDesignerやVJのシステムについては下記noteを筆頭に4本くらいに分けて紹介しているので、興味があれぜひ読んでみてください
作るものを考える
色々と考えて出てきたイメージはざっとこんな感じ
①「webカメラからの映像入力」→
②「web会議システムの様に人物のみが抜き出される」→
③「人物にエフェクトがかかる(漫画風、絵画風など)」→
④「エフェクトがかかった映像から任意のタイミングで画像を抽出する
①はTouchDesigner上にwebカメラの映像をインポートするだけなので、なんの難しいこともありません。
ただ②からは過去やったことのない処理なので、最初の段階では方法が浮かびませんでした。
実際に作っていく
①webカメラからの映像入力
ここは先程も書いたようにwebカメラの映像をインポートするだけで何も難しくはありません。
画像赤枠の「Video device in」を追加します

追加したらノードのパラメーターの「Device」から任意のカメラを設定します。(今回は画像の様に「FHD Camera」を選択)

これでTouchDesignerにwebカメラの映像をインポートする事ができました。
ちなみにこのままだとインポートされた映像が左右が反転して見えるので、ミラー効果を付与するための加工を加えます。
(当たり前ですが、反転させるとTシャツに書かれた文字とかが読めなくなります)
反転する方法は簡単で、「Flip」TOPを使います。
先程作った「Video device in」の出力につなげてパラメーターの「Flip X」をONにすることでX軸方向つまり左右が反転します。


ここまで出来たら①のステップは完成です。
②web会議システムの様に人物のみを抜き出す
ここが今回の制作における1つ目の関門です。
通常はクロマキーで抜き出すことを考えるのですが、仮に作品として考えた場合、バックのクロマキーと同じ色の服を着た人が来ると成立しなくなってしまいます。
そこでクロマキーを使わずに方法が必要になります。
Kinectの様に深度センサーを持っているカメラであれば出来そうな気もしますが、普通のwebカメラではどうにもなりません。
そんな中、Bing AIでそういった方法はないか聞いてみると(今回のように単語で調べられないものはBing AIなどで調べると結構教えてくれます)あるノードの存在を教えてくれました。
それは「Nvidia Background TOP」というもの
学生時代は聞いたことがなかったので、比較的最近になって搭載されたノードかもしれないのですが、自分がよくお世話になっているTouchDesigner 日本語ドキュメントによると以下のことが書いてあります。
Nvidia Background TOPは、AIによる画像分割を行い、与えられた画像の背景から人物を分離します。
上記のようにこれを使うことで人物と背景をクロマキーなどを使うことなく分離できる様になります。
ただこのノードには一つだけ弱点があります。
それは「どのPCでも使えるわけではない」ということです。
この機能は「Nvidia製RTX GPUを搭載したWindowsPC」のみ利用でき、
Macや統合型グラフィックまたはAMD製GPUを搭載したPCでは使うことが出来ません。
また。Nvidia製であってもGTXシリーズでは使うことが出来ないと思われます。
そのため未対応のPCでは従来のクロマキーや別の方法で処理を行う必要があります。

使い方は簡単で先程の「Video device in」の出力をつなげるだけで下記画像の様に人物だけを抜き出すことが出来ます。

ただこれだけでは白黒で分離されただけなので、RGBの情報を載せる必要があります。
そこで乗算処理で合成する「Multiply」TOPで合成することできれいに人物だけ抜き出した映像を作ることができます

Multiply TOPで合成することできれいに抜き出すことが出来ます。
ここまでできれば②も完了です。
人物だけ抜き出すことが出来たので、あとはそれに対してエフェクトを掛けたり色々といじっていくだけです。
次回に続く
少し長くなってしまったので今回はここまでにします。
次回はエフェクト編として実際に作ったエフェクトなどを書いていきます。