ドローンのFPV映像をTouchDesignerに取り込む方法

# ドローンのFPV映像をTouchDesignerに取り込む方法

TouchDesigner初心者です！TouchDesignerのノウハウ情報はほぼないです！すみません！

## はじめに

TinyWhoopという、30g以下で、FPV（FirstPersonView）で飛ばせるトイドローンがあります。
このドローンは、VTX(映像送信機）を使いアナログ映像を、VRゴーグルのようなもので見ることが出来て、飛ばすのがとても楽しいドローンです。
このドローンを利用すれば、遠隔操作可能の小さいカメラとして、離れた場所の映像を写したり狭い場所に入り込んだりした映像を取得することができるので、TouchDesignerと連動して面白いことが出来ないかな！？と思いました。

本記事では、以下の事項を試した結果を記載します。

* TinyWhoopのFPV映像をTouchDesigner上に表示する
* FPV映像をOpenCVで解析した結果をOSCでTouchDesigner上に表示する



※TinyWhoopの詳細とFPVの映像は以下をご覧ください。
[ドローンレースの第一人者の視点から見た Tiny Whoopの今とその魅力](https://videosalon.jp/report/tiny-whoop/)

　TinyWhoopに搭載したカメラのFPV映像

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E3%81%BE%E3%81%A0%E3%81%BE%E3%81%A0%E3%83%88%E3%83%83%E3%83%97%E3%81%A8%E3%81%AF1%E5%91%A810%E7%A7%92%E5%B7%AE?src=hash&amp;ref_src=twsrc%5Etfw"></a><a href="https://t.co/w9vJGiJ6yD">pic.twitter.com/w9vJGiJ6yD</a></p>&mdash; マッドX ⌘ MAD X ⌘ (@f__umi_) <a href="https://twitter.com/f__umi_/status/1068883608847376384?ref_src=twsrc%5Etfw">2018年12月1日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 開発環境
PC:Macbook Pro 2016
TouchDesigner:Build2018.25850

## 注意点
TinyWhoopで利用されているFPVの映像の伝搬は、5.8GHzのアマチュア無線の周波数帯域を利用して送信されるので、現状、日本でFPV映像を送信する場合は、アマチュア無線4級以上の資格に加え、VTXを無線局として開局する必要がありますのでご注意ください。ただし、送信される電波を受信して利用する事は免許がなくても可能です。（ドローンを操縦する人だけが免許と開局を行っていれば大丈夫です）


## TinyWhoopのFPV映像をTouchDesigner上に表示する
非常に簡単す、以下の製品を使って映像をアナログからデジタルに変換できます。（リンク先では売り切れていますが、「ROTG02」で検索すると在庫有りの中国ECサイトが引っかかりますので、抵抗が無ければそちらからでも購入できます。）

[Eachine ROTG02 UVC OTG 5.8G 150CH ダイバーシティ オーディオ FPV受信機 Androidタブレット スマートフォン用](http://www.helimonster.jp/?pid=132988545)

ROTG02をPC（WinでもMacでも）に接続するとUSBカメラとして認識されますので、` Video Device In TOP ` のDeviceから選択します。（以下画像だと、USB2.0 PC CAMERA #2)

 <img width="764" alt="スクリーンショット 2018-12-05 13.56.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/200419/9211e077-c8ea-adc4-e530-e3a9fd1624d5.png">

選択すると砂嵐が表示されます。こうなればとりあえずは成功です。VTX側から電波が発信されるとここに映像が表示されます。

<img width="647" alt="スクリーンショット 2018-12-05 14.09.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/200419/0b310202-1d44-9f08-16e7-6c8acb958e8c.png">


## OpenCVで解析したFPV映像のデータをOSCでTouchDesigner上に表示する

本記事では別プロセスでOpenCVを動作させ、OSC経由でTouchDesigner上にデータを渡しますが、これは他の方の記事がとても参考になります。

* TouchDesigner上でOSC受信をする方法は、@kodai100 さんの [[Touch Designer] OSC通信を使う。CHOPとDAT](https://qiita.com/kodai100/items/5b614fed5f3e17b7f8f6)が参考になります。
* PythonでOSCを扱う方法は[こちら](https://techracho.bpsinc.jp/katayama-yuuki/2017_07_13/42884)の記事が参考になります。

1. Python側では円を認識したらX座標とY座標、円の大きさを送信します。
2. TouchDesigner側で、OCSを受信して、X座標、Y座標の位置に円を表示します。

受信したOSCはこんな感じで、扱い安い形に変換します。

<img width="1507" alt="スクリーンショット 2018-12-06 1.29.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/200419/b6206a6e-146c-2dd2-892a-52b10ab1314c.png">

あとは、変換した値を使って、FPV映像で認識した場所と同じ位置にパーティクルなどを表示すれば、FPV映像と連動してパーティクルが動きます。

<img width="889" alt="スクリーンショット 2018-12-06 1.32.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/200419/890f612d-79c6-51de-fb68-75e32a2606c0.png">


## 完成品

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">FPV映像をToucjDesignerでエフェクトかけてみる <a href="https://t.co/0wNiTU6ifE">pic.twitter.com/0wNiTU6ifE</a></p>&mdash; マッドX ⌘ MAD X ⌘ (@f__umi_) <a href="https://twitter.com/f__umi_/status/1070353135158288384?ref_src=twsrc%5Etfw">2018年12月5日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

FPV映像で認識した円が、TouchDesigner上でパーティクルとして表示されています。
PCのスペックが足りないのか、滑らかさがないのでどうにかしたい所。

## これから
* TinywhoopのFPV映像を使って、TouchDesignerでエフェクトをかけられたので、単調なレース映像をもっと魅力的に演出できそう。
* 今回はOSCを使ったが、@satoruhiga さんの [OpenCVサンプル](http://satoruhiga.com/post/extending-touchdesigner/)を参考にすれば、TouchDesignerだけで完結できそう。

以上です。