Optical Flow and ParticlesGPU

hr.icon

1. はじめに

TouchDesignerのToolsに実装されているOpticalFlowとParticlesGPUを利用したInteractive Particlesの実装方法を解説する。

基本的な部分は下記YouTubeチュートリアルを参考としている。

演習の後半では、正面（床面応用可能）に静止パーティクルの手法も解説する。

https://www.youtube.com/watch?v=xODS0pZ6CEo&t=938s

ここで紹介している方法を用いれば、下映像のようなインタラクティブ映像を比較的容易に実現できる。

https://www.youtube.com/watch?v=ADtM2_awSj8

hr.icon

2. TouchDesignerの起動と準備

TouchDesignerを起動後、スタートアップオペレータは削除して、Paletteを閉じる。

https://gyazo.com/8849f702f97ceda9588109fc1ef6ce9f

hr.icon

3. Video Device In TOP

Video Device In TOPを追加する。

Commonタブの以下を設定する。

Output Resolution: Custom Resolution

Resolution: 1280, 720

https://gyazo.com/8bd0c50075860477a1273926f671cb4d

hr.icon

4. Flip TOP

Flip TOPを追加してVideo Device In TOPと接続する。

Flip TOPパラメータのFlip XをONにする（左右反転）。

https://gyazo.com/e8672df29800544543e587f3f2bba8bc

hr.icon

5. opticalFlow Container

5.1 Optical Flowとは？

下図のように入力画像の特徴点がどの方向に移動しているかを解析する手法。

解析結果は角度値を色で表現することが多い。

https://gyazo.com/f4471e08275dcc68c126cb4e68ec61c7

参考）

5.2 opticalFlow Containerの追加

Paletteを開いて、Tools > opticalFlow Containerをドラック＆ドロップして追加して、Flip TOPと接続する。

https://gyazo.com/4df87d72dabb0fb2815723bf93002e4e

opticalFlow Containerのプレビューでは、X方向をRチャネル、Y方向をGチャネルの色で表現されている。

https://gyazo.com/561f0269d64a4eff3fb6a79a72486680

hr.icon

6. particlesGpu Container

6.1 particlesGpu Containerの追加

Palette > particleGpu Containerをドラック＆ドロップで追加する。

まだopticalFlow Containerとは接続しない。

https://gyazo.com/42f5c7108292802fc350d47c853368d5

6.2 RGB Key TOP（透明を黒表示）

RGB Key TOPを追加する。

paerticlesGpu ContainerのOutput 0 (TOP) renderとRGB Key TOPを接続する。

RGB Key TOPのBackdropを表示する。

https://gyazo.com/444119fd9b26daf96caf6cf9849bb53f

6.3 paerticlesGpu Containerのビュー操作

paerticlesGpu Containerをアクティブにする。

以下のように、Viewer上でマウスでビューを操作する。

左ドラッグ：ビューの回転

右ドラッグ：ビューの移動

真ん中ボタンドラッグ：ズーム

Hキー：正面ビュー

https://gyazo.com/edfe89e0908bfcb2a6c971b794921db6

6.4 opticalFlow ContainerとparticlesGpu Containerの接続

opticalFlow ContainerのOutから、particlesGpuの上から4番目のInput 3 (TOP) optical flowに接続する。

https://gyazo.com/5f6045c8b3a06f1776491fd1d58d822f

身体を動かして、パーティクルが反応することを確認する。

particlesGpuのVewer ActiveでHキーを押して正面ビューにするとわかりやすい。

パーティクルは3D矩形に広がっているが、カメラ画像は2D平面である。このような場合でもカメラの2D平面を奥行き方法に延長した状態でパーティクルは反応する。

https://gyazo.com/557ee894b7ad9904a509e6af77093641

6.5 パーティクルへの影響度合いの調整

初期値では身体動作に対する影響度合いを調整するには以下の２つの方法がある。

方法① opticalFlow Container

Optical Flowタブ

Force: 5〜10　※試したあとは1に戻しておく

プレビューのエッジも太くなる

https://gyazo.com/74c420c29c8914c9a6dfc200464e53e4

（操作上の注意）

両Containerは操作を誤る（ENTERキー）と下階層に入るので、その場合Uキー（UP）を押してもとの階層に戻る。ENTERキーとIキー（IN, 下階層）は同じ動作。

方法② particlesGpu Container

Forcesタブ

Oprical Flow Magnitude: 5〜10

https://gyazo.com/1686f61ba424c23ae75cee0603aa2bea

6.6 パーティクルの発生領域

パーティクルの発生領域を確認する。

下図のようにZX平面。

https://gyazo.com/d0d70eb2ffc17381ae745c8d66919780

y76

下図のように、パーティクルの発生源はPartcle Sourceタブで平面の選択、サイズ、移動ができる。

青いラインのBouding Boxのサイズは別途ParticlesGPUタブのPos Limit PlaneとNeg Limit Planeで指定されている。

https://gyazo.com/8303c00e886d036acbdf5ff78df6a141

以下のように設定を変更する。

Particle Sourceタブ

Shape: Rectangle→Lineに変更

PointA: -4 0 0（X Y Z）

PontB: 4 0 0

Translateの解説

デフォルト3

0だと垂直方向中心位置

4だとBounding Box（領域矩形、境界ボックス）の境界上になるのでパーティクルが消えてしまう

この挙動はParticleGPUタブのHit Behaviourの影響される

Noneにすると落下はするが、下平面で消えない

Bounding BoxのサイズはParticleGPUタブの下記で変更可能

Pos Limit Plane

Neg Limit Plane

hr.icon

7. カメラ画像との合成

7.1 RGB Keyの削除

RGB Keyを削除しておく。

7.2 Select TOP（Flip TOPのインスタンス作成）

Select TOPを追加して、Flip TOPをドラック＆ドロップする。

https://gyazo.com/aee85db0fca2ba8028c2c0a1cd93076e

7.3 Composite TOP

Composite TOPを追加

particles Gpu ContainerからComposite TOPへ接続

Select TOPからComposite TOPへ接続

Composite TOPのOperation: Overへ変更

https://gyazo.com/745568b2424d21e09a16ba12590a74af

7.4 パーティクルの位置調整

particlesGPU ContainerのParticle Sourceタブ

Shape: Lineのままで進める

particlesGPU ContainerのViewer Activeでマウスで手動で位置調整

一度Hキー押してから

マウス真ん中ドラッグでスケール

マウス右ドラッグで位置調整

https://gyazo.com/761a3527b651680e7cc6b609bfb1a4a9

常設システムで運用する場合は、下記7.5 Bouding Boxのサイズ調整や7.6 発生領域のサイズ調整を数値入力したほうがよいだろう。

7.5 Bounding Boxのサイズ調整

カメラ映像の16:9と比較してパーティクル発生の横幅が狭いので、以下でまずBounding Boxのサイズを変更する。

ParticlesGPUタブ

Pos Limit Plane: 7 4 4

Neg Limit Plane: -7 -4 -4

https://gyazo.com/897565a2aa2cba5d1665a4a64509b1ce

パーティクルの発生領域とBouding Boxの関係は、ParticlesGPUタブのHit Behaviourにより異なるが、デフォルトのFade OutではBounding Boxの外側はフェードアウトする。Hit BehaviourをNoneにするとBounding Boxの影響はなくなる。

7.6 発生領域のサイズ調整

Particle Sourceタブ

Point A: -7 0 0

PointB: 7 0 0

※Shape: LineでないとPointA, Bは変更できない

https://gyazo.com/d791e3a0b3a1f939f224f3bf2cac225e

7.4 Bounding Boxの表示/非表示

ParticleGPUタブ > Display Boundsで切り替えることができる。

https://gyazo.com/c92098db8273985fa4c1983201612390

Forcesタブ

Optical Flow SIze Remap: 1.77 1

これを合わせないと、例えば腕の上下のときに予期しないRipple Effectが起こるらしい（Leafだと荒すぎて確認が難しい）。

カメラ画像のスペクト比はVideo Device In TOPをマウス中ボタンで押して表示される情報から確認できる。

https://gyazo.com/dc149bfc55a17b0ad0d15a557a444363

hr.icon

8.1 パーティクル画像の変更

Materialタブ > Texuture

Square

Circle

Snow

Leaf　デフォルト

Character

https://gyazo.com/ce8b65a2180fdf45e0c0fdb577433e6e

Movie File In TOP

Fit TOP（Texture画像の1:1比率に合わせる）

Fit TOPをparticlesGpu ContainerのMaterialタブ（Texture: Custom）のParticle Texture Mapへドラック＆ドロップ

https://gyazo.com/2ceb616897b7c72075e06a31512d3fee

下図（都立大ロゴ）でも試してみよう。

https://gyazo.com/3c82e916bc1677a6a549a621439e9063

https://gyazo.com/c7dafa7e8c72285eed764ee6c0872636

https://gyazo.com/026ace1ac95c42e97cc91f240095dcb3

8.3 画像の色バリエーション（チュートリアルにはない）

8.2のMovie File In TOPとFit TOPはそのまま使う

HSV Adjust TOPを２つ追加して、Hue Offsetで色を変更

Switch TOPにHSC Adjust TOP２つとFit TOPの合わせて３つを接続

Switch TOPのIndexにコード「me.time.frame%3」を入力

Texture 3D TOP

Type: 2D Texture Array

Pre Fill: ON

Texture 3D TOPをparticlesGpu ContainerのMaterialタブ（Texture: Custom）のParticle Texture Mapへドラック＆ドロップ

https://gyazo.com/45049235016fc41dda9776f56f2768f7

8.4 パーティクルの発生数とサイズの変更（Snow）

TextureはSnowに変更する。

ParticlesGPUタブの以下を変更する。

Birth: 20

Particle Size Min: 0.3

Particle Size Max: 2

https://gyazo.com/e467d1df70780607e919a488eac92af0

Composite TOPの先にOut TOPを接続して、Performモードにすれば軽い動作で体験できる。

hr.icon

9. 静止パーティクルバージョン（オリジナル）

9.1 はじめに

ここからは、ParticleGPUを利用した新たなバージョンの演習を紹介する。基本的には前述のオペレータの構成とほぼ同じだが、上から落ちてくるパーティクルではなく、画面上に留まった状態のインタラクティブなパーティクルの設定を行う。

https://gyazo.com/9647515758bfd4bafdd01c794bd11838

9.2 TouchDesignerの起動と準備

TouchDesignerを起動後、スタートアップオペレータは削除して、Paletteを閉じる。

https://gyazo.com/8849f702f97ceda9588109fc1ef6ce9f

9.3 オペレータの構成

下図のようにオペレータを追加する。

https://gyazo.com/06f5a9e95975ad80ad72dbc2f124d2e1

9.4 particleGpu Containerのパラメータ設定

Materialタブ

Texture: Square（処理が軽い）

https://gyazo.com/ae8bcff1fb83827468c03e8708bc57e1

Forcesタブ

External: 0 0 0（引力）

Turbulence: 0 0 0（乱流）

Optical Flow Magnitude: 5（インタラクティブ強度）

Rotaion Type: None（パーティクルの回転）

https://gyazo.com/01d1effdcaaec2f4912611e3ee65e2b0

ParticlesGPUタブ

Birth: 5000

Particle Size Min: 0.05

Particle Size Max: 0.09

https://gyazo.com/e570a0d60bac0c14100922d370bf361c

Resetボタンを押すことで溜まったパーティクルをリセットできる。設定変更しても、パーティクルのlife時間の間は前に発生したパーティクルが残っているので、強制的にゼロから再描画させることができる。

https://gyazo.com/27a03a6c0b55b27841b6d0a68e288773

Particle Sourceタブ

Orientation: XY Plane

Translate 0 0 0

https://gyazo.com/6215c4c61c658889d05f7ac7bc290d70

座標方向は下図参照。

https://gyazo.com/58c27972e420d2f17027d2d5af3d2c9a

particleGpu ContainerのVewer ActiveでHキーを押して正面に向けたり、スケールを調整する。

https://gyazo.com/21f8833db28b5a20bd2bec6b5e34f3dc