【Notch】Optical Flowノードでカメラエフェクトやってみた話

#Optical Flowとは
視覚表現（通常、時間的に連続するデジタル画像）の中で物体の動きをベクトルで表したものである。

オプティカルフローは、パターン認識、コンピュータビジョンあるいは他の画像処理技術において利用されている。その抽出にはブロックマッチング法、勾配法などが用いられる。

by　Wikipedia
https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%97%E3%83%86%E3%82%A3%E3%82%AB%E3%83%AB%E3%83%95%E3%83%AD%E3%83%BC

要は映像の動きからベクトルを推定してパーティクルやエフェクトへ参照させることができる感じです。
Optical Flowについてググるともっと難しい解説がたくさん出てきますがNotchにノードがあるのでサクッと使っちゃいましょう。
FB公式グループに落ちている**「人が炎やパーティクルを纏うような表現」**のdfxファイルはだいたいOptical flowが使われています。
↓こんな感じのことができます。
![Realtime Visual Effect  Optical Flow MESH #Notch2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/6e150f88-3996-6473-8504-3ffcf4dc0d2b.gif)
![Realtime Visual Effect  Optical Flow MESH #Notch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/9f62455e-9dd4-35c6-91ea-a50f828297b4.gif)

#ワークフロー
記事用に作ったテストファイルで解説します。Dfx https://my.pcloud.com/publink/show?code=XZsS2hkZzSewGIibUp0AJ9ONFCGnDRARb0Ik

###＜人の輪郭からベクトルをもってパーティクルやFieldが発生する表現＞
###①カメラ入力デバイス設定
[Device]→[Video In/Camera/Kinect Setting]を開きます。
![OF2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/c018969c-5190-449e-785f-ac154301924f.png)

「Video In Enabled」をオンにする
Modeタブからカメラの解像度を選択
![OF1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/670f190f-eb88-7f47-90e5-6976a895523b.png)
###②カメラ映像を読み込む
「Video In Source」ノードを置き、「Image 2D」もしくは「Image Plane」に繋ぐ
「Image2D」は最前面に描画するノード
「Image Plane」は3Dの平面　カメラの動きに影響を受けます。

※実際の現場ではNDIなどを経由してカメラ信号入れる形になります。

###③Opticl Flowへつなぐ
「Video In Source」→「Downsample」→**「Opticl Flow」**とつなぎます。
![OF3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/a1667a85-9417-380a-9e9a-34cec8004c53.png)

「Opticl Flow」ノードの設定はこんな感じにしています。
※あくまでもこの記事用のテストでテキトーに作ったものです。現場環境のものではないのであしからず
![OF7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/67deec3b-d74b-1bc5-ea47-669bce4064b4.png)



###④パーティクルエミッターに繋ぐ映像の調整
カメラ映像に輪郭検出をかけたいと思います。
「Video In Source」→「Video null」→「Edge Detect」
![OF4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/5d77bdd5-b82c-fc70-f362-77f9a3a0b8d7.png)

###⑤パーティクルのImage Emitterの設定
パーティクル組み方は#03　パーティクル編で解説しています。
見た目はお好みなので詳細は省きます。
参考では「Line Connect Renderer」や「Geometry Connect Renderer」を使用しています。

それぞれ
・輪郭検出かけた「Video null」を「Image Emitter」の**「Video Node」**へ繋ぎます
・「Opticl Flow」を「Image Emitter」の**「Motion Video Node」**へ繋ぎます
![OF５.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/e89de08b-7364-3e34-8fc2-2e2dde273742.png)

###⑥Fieldにも繋いでみる
せっかくなのでついでにFieldも連動させてみる。Fieldは煙のような流体シミュレーションノードです。
パーティクルの設定をそのまま持っていくとスムーズです。

**「Particle Root」**からFieldの**「Perticle Emitter」**へ繋ぐ
![OF6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/60b7b919-cda5-9d57-f021-0730ae37e222.png)

dfxダウンロード
https://my.pcloud.com/publink/show?code=XZsS2hkZzSewGIibUp0AJ9ONFCGnDRARb0Ik

#注意点
実際やるときはかなり調整が必要になると思います。
明るいところでは基本うまくいきません。
現場前の作業ではPCのカメラ入力ではなくライブの録画映像で調整するのをオススメ勧めします。
照明やカメラワークの影響により、PC上で組んだ想定より実際は見えづらかったり逆に見えすぎたりします。

#最後に
情報共有はこちらのグループで行っているのでぜひ参加してみてください。
Facebookグループ : https://www.facebook.com/groups/notchusergroupjapan/
Line オープンチャット : https://line.me/ti/g2/kJYmLLsvS2zNfR9PEiknMg

質問等あればお答えしますのでお気軽に
Twitter : https://twitter.com/shu1053
FB : https://www.facebook.com/profile.php?id=100009103327410