TouchDesignerでNew Realityを生み出す


![Aurora.43.jpg](https://qiita-image-store.s3.amazonaws.com/0/151752/423b3de5-119c-d15a-2496-462f81f5c4b3.jpeg)

この記事はUT-virtual Advent Calendar 2018の14日目の記事です。
もうすぐクリスマスですね。人生一度は本場フィンランドでオーロラに包まれてクリスマスを迎えたい皆さんも多いのではないでしょうか？そんな夢をバーチャルに叶えるシステムのご紹介です。お友達も一緒に連れていくことができますよ！

というのは置いておいて、今回紹介するのは

1. ある時点から動いたものだけを表示する仕組み

2. 1.をVRで一人称視点で体験することでのSubstitutonal Reality的な隠遁現実感やテレプレゼンス体験の制作

これらをTouchDesigner上で実装しようと思います。(素敵な360画像はこちらより拝借しました:　https://unsplash.com/photos/IuyhXAia8EA )


###作例
作例も載せておきます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">1. 自分を現在を客観視する体験、2. その場所で少し前に起きた過去の事象を視聴覚で追体験する体験、3.2の体験を現在と重ね合わせた体験　で構成しました。 <a href="https://t.co/r0MMgASlV2">pic.twitter.com/r0MMgASlV2</a></p>&mdash; Kota Isobe (Kotton) (@theruleisobeyed) <a href="https://twitter.com/theruleisobeyed/status/1071433000150274048?ref_src=twsrc%5Etfw">2018年12月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

![2018-12-14_16h31_07.png](https://qiita-image-store.s3.amazonaws.com/0/151752/14336291-11f3-5e3b-d669-92b7abfcda9d.png)


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">RCAのIEDコースでの1日目、自己紹介がてらV&amp;A美術館で得たインスピレーションを表現して下さいってお題が出ていたので、館内の収蔵物の持つ時間性に着目した疑似テレプレゼンス体験を展示。 <a href="https://t.co/Lw3AjSZNGv">pic.twitter.com/Lw3AjSZNGv</a></p>&mdash; Kota Isobe (Kotton) (@theruleisobeyed) <a href="https://twitter.com/theruleisobeyed/status/1047110852254543874?ref_src=twsrc%5Etfw">2018年10月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

https://www.youtube.com/embed/6wBD_OYcfL8




###1. ある時点から動いたものだけを表示する仕組み
ここで使用しているファイルはこちらからダウンロードできます。
https://goo.gl/83YsDa

#####環境
windows10
TouchDesigner099 Noncommercial(最新版にアップデートを推奨)


![Explanation.43.png](https://qiita-image-store.s3.amazonaws.com/0/151752/18971311-4a8d-2522-e096-c5c5dbc80eb7.png)

VideoDeviceInTOPでWebCamからの映像を取得します。部屋に誰もいない状態でMovieFileOutTOPで初期状態を記録し、その画像を二つ目のVideoDeviceInTOPで取得します。その後カメラを動かさずに自分をカメラの視界に納めます。
 
![2018-12-14_15h22_12.png](https://qiita-image-store.s3.amazonaws.com/0/151752/d3f6d5d2-c163-b14c-2abd-c22fb4d6a6f6.png)

DifferenceTOPを用いて初期状態とライブストリーミングの状態との差分を取得しMonochromeTOPとLevelTOPを介して（いい感じに人があぶり出てくるようにパラメータを多少調整して）マスクを取得します。初期状態から動いたもの、ライティングが変わったものが浮き出てきます。
![2018-12-14_15h37_04.png](https://qiita-image-store.s3.amazonaws.com/0/151752/9e8c4bad-a35d-7639-f6db-dba7158f589b.png)

取得したマスクを利用してChromaKeyTOPやChannelMixTOPでアルファ付きマスクを取得しCompositeTOPでカメラからの映像をうまくマスキング出来たらあとは任意の背景にOverTOPで重ねる事で合成が完了です。

![2018-12-14_15h50_19.png](https://qiita-image-store.s3.amazonaws.com/0/151752/be053066-ff00-dcdf-6a9c-ee61ed6ae8f0.png)


###2.VRで一人称視点で体験することでの隠遁現実感やテレプレゼンス体験

先で実装した機能をImmersiveにすることで体験者のプレゼンスを上げ、体験価値をアップデートしていきます。

#####環境
ここから先は機材等の要求が多いので万人向けではありませんが悪しからず（書籍+Vive環境+ThetaV+TouchDesigner Educational or higher)。


こちらの

Visual Thinking with TouchDesigner　プロが選ぶリアルタイムレンダリング＆プロトタイピングの極意

https://amzn.to/2SepBVA

の購入者向けサンプル3-11 VR_sample.toeではEquirectangularの映像を入力にopenVRでの二眼表示に用いることができます。HTCViveが使える状態であれば、ファイルを起動すると自動でSteamVRが立ち上がりViveに二眼表示されているのが確認できると思います。

ライブストリーミングに対応している360カメラでPCに接続することでUSBカメラとして認識できるRicoh Theta Vを使用すると、Double FishEyeからEquirectangularへのスティッチング処理後の映像がストリーミングされて出てきます。（元の解像度を生かしたい場合はTouchDesignerのEducationalやCommercial版を購入する必要があります）

![2018-12-14_16h08_01.png](https://qiita-image-store.s3.amazonaws.com/0/151752/7f683338-8495-b8a6-b15f-74c6f02c2350.png)
VideoDeviceInTOPで取得した360ライブストリーミング映像を1．で組んだ仕組みと統合し、NullTOP(environment)に繋ぎ、カメラを回転させて正面を現実と揃えれば代替現実感SRの提示の準備完了です。

背景を変更したり、比較対象とする360写真の撮影頻度を調整したり、レンダリング対象のSphereの位置や大きさを自在に調整したりして、隠遁現実感やテレプレゼンスを始めとする様々なNew Realityを体験してみましょう。

####やってみたいこと
現在Shifted-Realityの続編でZED miniを組み合わせた作品の制作を続けており、人体マスクの取得にステレオカメラの利を生かした負荷の少ない方法を模索しています。ZED cameraとoF向けに書かれたこちらの人体検出のシステムのZED mini + python環境での移植にトライしてみたいです。
https://github.com/kuflex/ofxKuZed