Touch Designer 有料版を使わずにSPOUT&NDIで映像共有

[TouchDesigner Advent Calendar 2018](https://qiita.com/advent-calendar/2018/touchdesigner) 12/4の記事です。

## これはなに
複数PC間で映像のやり取りを**低レイテンシ**で（ほとんど）**お金を掛けず**にやる方法を紹介します。
<font color="Silver">*windows間での共有を想定しています。*</span>

最終的にはこんな感じです。2台のPCでバナナが回る映像を共有しています。
![banana.gif](https://qiita-image-store.s3.amazonaws.com/0/65723/21d062a6-484a-358d-cfc4-f55c8d1f2fa6.gif)

## 記事を読んでできるようになること
内容としてはNDIを用いるためのローカルエリアネットワーク（以下LAN）の構築です。
LAN構築やファイアーウォールの設定でハマりやすいポイントなどの紹介し、読み終わればとりあえず映像共有ができるようになることを目指します。

## そもそもなんでそんな事するの？
例えば
- 一台のPCでTouch Designerでビジュアルを作り、もう一台のPCでそれにエフェクト
- 一台のPCでテクスチャーをリアルタイムで生成しながら、もう一台でマッピング

とか、高負荷でリッチな表現を複数台のPCに分散させることができれば、あんなことやこんなこと夢のある無茶ができる気がしませんか！！

しかしながら、夢を叶えるには乗り越えなくてはいけない壁がつきものです…。

## 立ちふさがる壁
**それは、お金です。**
こういったことも以下とか使えば簡単です。

- [キャプチャーカードorキャプチャーボックス](https://www.blackmagicdesign.com/jp/store/record-capture-playback)
- [Touch Designer COMMERCIAL版](https://www.derivative.ca/shop/shopdisplayproducts.asp?id=1)

はい。素敵なお値段ですね。ただでさえ高価なPCを複数台使うのに、更に出費は嫌ですね。。。
ならば、壁を登らずに迂回しましょう。

## 迂回ルート
複数台のPCを繋いだLANを作り、**SPOUTやSyphonを経由して**NDIでの映像の転送を行います。
**NDIとは**
[NDI（Network Device Interface）](https://jp.newtek.com/ndi/)の略で、IPで映像転送を行うための規格です。
LAN内で利用することで低レイテンシな映像の転送を実現しています。
特に何かを購入する必要はありません。

### 準備するもの
**ルーター**
NDIの利用にはLAN構築が必要なので、ルーターは必須です。持ってなければ買ってください。
LANといっても難しいことは考えずルーターにケーブルを刺すだけで大丈夫です。

私はUSB給電でコンパクトな[coregaのsw-05gtxu](http://corega.jp/prod/sw05gtxu/)を利用しています。
ギガビットイーサネットに対応してるものなら問題なく利用できると思います。

<font color="Silver">*※Touch DesignerのCOMMERCIAL版使っている場合は[NDI In TOPやNDI Out TOP](https://docs.derivative.ca/NDI)があるので、ルーターがあれば複数PC間での映像共有ができると思います。*</font>


**SPOUT（Syphon）**
今回の要です。COMMERCIAL版が使えない私達はこれを利用します。

[SPOUT](http://spout.zeal.co/)は異なるアプリケーション間での描画をやり取りするオープンソースのソフトウェアです。
このSPOUTには映像をNDIに送り出してくれる[SPOUT TO NDI](http://spout.zeal.co/download-spout-to-ndi/)があります。
これを使うことで映像の転送を行っていきます。

<font color="Silver">*※Macユーザならそれぞれ[Syphon](http://syphon.v002.info/)と[ScreenCaptureSyphon（有料）](http://techlife.sg/ScreenCaptureSyphon/index_jp.html)が相当します。*</font>

## ネットワークの構築
<font color="Silver">**※ネットワークについては全く詳しくないです。とりあえず動くように私の設定を載せておきます。なにかおかしなことを記述をしている場合はコメントを頂けると助かります。「ネットに繋がらなくなったー！」とかなっても自己責任で。**</span>

映像転送したいPC1とPC2をルーターに接続してください。
次にIPアドレスを固定します。OSCを利用するなど、NDI以外にもPC間の通信を行う際はやっていおいたほうが良いかも。
手順としては以下のようになります。

設定→ネットワークとインターネット→アダプターのオプションを変更する→イーサネット（を右クリックしてプロパティ）→インターネット プロトコル バージョン4（をクリックして、プロパティ）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/65723/ed06689b-9ff5-7dd6-9df7-d982acede853.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/65723/d2b37355-4398-e884-4038-e1c0fa39db7d.png)
固定のIPアドレスはとりあえず以下のようにしています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/65723/20c50ca2-6169-5caa-230d-e5a614214137.png)

これでLANの構築は完了です。

## SPOUTのセットアップ
[SPOUT](http://spout.zeal.co/)と[SPOUT TO NDI](http://spout.zeal.co/download-spout-to-ndi/)をダウンロードしてPC1とPC2にインストールしてください。

### ファイアウォールの設定
PC1とPC2両方にファイアウォールの設定を行います。
コントロールパネル→システムとセキュリティ→Windowsファイアウォールによるアプリケーションの許可（をクリック）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/65723/2422586e-ca20-b641-3078-1013f4917ae8.png)
設定の変更(をクリック)→`NDI to Spout`と`Spout to NDI`の`プライベート`と`パブリック`両方にチェックをつけます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/65723/7f415ab6-9947-b149-10dc-cdde7398a450.png)
PC1とPC2が同じようになれば完了です。
<font color="Silver">私の環境だと`NDI to Spout`と`Spout to NDI`がそれぞれ4個ずつありますが、多分人によります。</span>

### 疎通チェック
実際にSPOUTとSPOUT TO NDIを利用して映像の転送を行います。

PC1で以下を開き、
`C:\Program Files (x86)\Spout2\DEMO`の`SpoutSender.exe`と
`C:\Program Files (x86)\SpoutToNDI\bin`の`Spout to NDI.exe`
PC2で以下を開きます。
`C:\Program Files (x86)\SpoutToNDI\bin`の`NDI to Spout`
これで画像のように映像が写っていれば完了です🎉
![image.png](https://qiita-image-store.s3.amazonaws.com/0/65723/907ffa9a-c373-e5a6-c056-d8c146e2fdb9.png)
送信側と受信側を入れ替えて試しておくと良いです。

## Touch Designerで使う
先ほど開いたSPOUT類はすべて閉じてしましましょう。
準備が完了したのでようやくTouch Designerを利用します。PC1でTouch Designerを開きます。
適当に送りたい絵を作り。`Syphon Spout Out`OPを後ろに繋ぎます。
![キャプチャ12.PNG](https://qiita-image-store.s3.amazonaws.com/0/65723/579fa55f-8fb0-c007-12e4-17b01dca4837.png)
PC1で`SpoutToNDI`を開きウィンドウに映像が出ていれば成功です。
![キャプチャ13.PNG](https://qiita-image-store.s3.amazonaws.com/0/65723/679457ca-ee56-1b5c-b2d9-43a8701d3bad.png)

次に、PC2で`NDIToSpout`を開いて映像が来ていれば完了です。
![キャプチャ14.PNG](https://qiita-image-store.s3.amazonaws.com/0/65723/32756a9b-c9e2-ecdc-cc5e-cc03d4b4b375.png)
同じ要領でセッティングすることで様々なアプリケーションの映像をLAN越しに共有できるようになりました🎉

## resolumeで受け取る
受け取る側の一例として[resolume](https://resolume.com/)を使ってみます。
resolumeはデフォルトでNDIを利用できるため、何もする必要はありません。
![キャプチャ15.PNG](https://qiita-image-store.s3.amazonaws.com/0/65723/69f75fd0-9584-6a80-0019-7a6b540dc06c.png)
この`NOTE(TDSyphonSpoutOut)`をクリップに持っていくとこんな感じです。
![banana.gif](https://qiita-image-store.s3.amazonaws.com/0/65723/21d062a6-484a-358d-cfc4-f55c8d1f2fa6.gif)
無事にresolumeにTouchDesignerで作った映像を渡すことができました🎉🎉🎉


## 最後に
Spoutを利用して比較的かんたんにPC間の映像転送ができました！
いろいろ利用価値のあるものだと思うので皆様も遊んでみてください！！
次はPC間のサウンド共有やマウス&キーボード共有についても書こうかなと思います。

最後に、定期的にVJをさせていただいていて、12/16に[中目黒solfa](http://www.nakameguro-solfa.com/)でVJをやるので、興味があれば遊びに来てください〜。
[twitter](https://twitter.com/7auto)か[facebook](https://www.facebook.com/naoto.bando)で連絡をもらえれば、ディスカウントできるかもしれません。


12/4のアドベントカレンダーはここまでになります。
文字ばっかり&TouchDesignerはほとんどど出てきませんでしたね。ごめんなさい。
12/3深夜に書くことが決まったので、マッハで作ったので色々説明足りてない部分が多いです。
なにか不明点あればコメントを頂ければ対応できるかもしれません。

それでは、より良い映像制作ライフを！