Optical Flow + ParticlesGPU

Updated: 2026-05*

1. はじめに

TouchDesigner の Tools パレットに実装されている opticalFlow Container と particlesGpu Container を利用した インタラクティブパーティクル の実装方法を解説する。

ベースとなる YouTube チュートリアル:

完成イメージ:

演習の構成: 前半はチュートリアル準拠の落下パーティクル、後半は オリジナルの「静止パーティクル」版（床面投影に応用可能）。

2. TouchDesigner の起動と準備

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

3. Video Device In TOP

Video Device In TOP を追加。Common タブで:

Output Resolution: Custom Resolution
Resolution: 1280, 720

4. Flip TOP

Flip TOP を追加して Video Device In TOP と接続。Flip X を ON（左右反転）:

5. opticalFlow Container

5.1 Optical Flow とは

入力画像の 特徴点がどの方向に移動しているかを解析 する手法。解析結果は角度値を 色で表現 することが多い:

参考:

5.2 opticalFlow Container の追加

Palette を開いて、Tools > opticalFlow Container をドラッグ＆ドロップで追加。Flip TOP と接続:

opticalFlow Container のプレビューでは、X 方向を R チャネル、Y 方向を G チャネル の色で表現:

参考: Optical Flow TOP - TouchDesigner Documentation

6. particlesGpu Container

6.1 particlesGpu Container の追加

Palette > particlesGpu Container をドラッグ＆ドロップで追加（まだ opticalFlow Container とは接続しない）:

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

RGB Key TOP を追加。particlesGpu Container の Output 0 (TOP) render と RGB Key TOP を接続:

6.3 particlesGpu Container のビュー操作

操作	動作
左ドラッグ	ビューの回転
右ドラッグ	ビューの移動
真ん中ボタンドラッグ	ズーム
`H` キー	正面ビュー

6.4 opticalFlow Container と particlesGpu Container の接続

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

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

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

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

方法① opticalFlow Container — Optical Flow タブ:

Force: 5〜10（プレビューのエッジも太くなる、試したあとは 1 に戻す）

操作上の注意: 両 Container は ENTER キーで下階層に入る。戻るには U キー（UP）。

方法② particlesGpu Container — Forces タブ:

Optical Flow Magnitude: 5〜10

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

パーティクルの発生領域は ZX 平面:

Particle Source タブで平面の選択、サイズ、移動が可能:

設定例:

Particle Source タブ
- Shape: Rectangle → Line に変更
- PointA: -4 0 0（X Y Z）
- PointB: 4 0 0

Bounding Box のサイズは ParticlesGPU タブの Pos Limit Plane / Neg Limit Plane で指定される。

Translate のメモ: 4 だと Bounding Box の境界上になり、Particle が消える（Hit Behaviour に影響）。None にすると落下はするが下平面で消えない。

7. カメラ画像との合成

7.1 RGB Key の削除

RGB Key を削除する。

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

Select TOP を追加して Flip TOP をドラッグ＆ドロップ:

7.3 Composite TOP

Composite TOP を追加
particlesGpu Container → Composite TOP
Select TOP → Composite TOP
Composite TOP の Operation: Over に変更

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

particlesGpu Container の Particle Source タブ: Shape Line のまま
Viewer Active で H キー押下後、マウス操作で位置調整
- 真ん中ドラッグでスケール
- 右ドラッグで位置調整

常設システムで運用する場合は、Bounding Box サイズや発生領域を数値入力で固定するのがおすすめ。

7.5 Bounding Box のサイズ調整

カメラ映像 16:9 に合わせて:

ParticlesGPU タブ
- Pos Limit Plane: 7 4 4
- Neg Limit Plane: -7 -4 -4

Hit Behaviour の Fade Out（デフォルト）では Bounding Box の外側でパーティクルがフェードアウト。None にすると Bounding Box の影響がなくなる。

7.6 発生領域のサイズ調整

Particle Source タブ
- PointA: -7 0 0
- PointB: 7 0 0

Shape: Line でないと PointA / B は変更できない。

7.7 Bounding Box の表示 / 非表示

ParticlesGPU タブ > Display Bounds で切替:

7.8 カメラ画像のアスペクト比を反映（参考動画 16:50〜）

Forces タブ
- Optical Flow Size Remap: 1.77 1

これを合わせないと腕の上下のときに予期しない Ripple Effect が起こる:

8. パーティクル画像、サイズの変更

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

Material タブ > Texture で選択可能:

プリセット
Square
Circle
Snow
Leaf（デフォルト）
Character

8.2 Custom（バナナ画像）

Movie File In TOP で画像読み込み
Fit TOP（Texture 画像の 1:1 比率に合わせる）
Fit TOP を particlesGpu Container の Material タブ（Texture: Custom）の Particle Texture Map へドラッグ＆ドロップ

ロゴ画像でも実験できる:

8.3 画像の色バリエーション（オリジナル）

8.2 の Movie File In TOP と Fit TOP はそのまま
HSV Adjust TOP を 2 つ追加 して Hue Offset で色を変更
Switch TOP に HSV Adjust TOP × 2 と Fit TOP の合計 3 つを接続
Switch TOP の Index にコード me.time.frame%3 を入力
Texture 3D TOP:
- Type: 2D Texture Array
- Pre Fill: ON
Texture 3D TOP を particlesGpu の Particle Texture Map へドラッグ＆ドロップ

参考: Interactive Particles – TouchDesigner + Kinect Tutorial 1

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

Texture を Snow に変更。ParticlesGPU タブで:

Birth: 20
Particle Size Min: 0.3
Particle Size Max: 2

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

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

9.1 はじめに

ここからは ParticlesGPU を利用した新バージョン。上から落ちるパーティクルではなく、画面上に留まる インタラクティブなパーティクルを設定する。床面投影にも応用可能:

9.2 TouchDesigner の起動と準備

スタートアップオペレータを削除して Palette を閉じる:

9.3 オペレータの構成

下図のように追加:

9.4 particlesGpu Container のパラメータ設定

Material タブ:

Texture: Square（処理が軽い）

Forces タブ:

External: 0 0 0（引力）
Turbulence: 0 0 0（乱流）
Optical Flow Magnitude: 5（インタラクティブ強度）
Rotation Type: None

ParticlesGPU タブ:

Birth: 5000
Particle Size Min: 0.05
Particle Size Max: 0.09

Reset ボタン を押すと溜まったパーティクルをリセットできる。パーティクルには寿命があるため、設定変更は既存パーティクルが消えるまで反映されない。すぐに確認したいときは Reset:

Particle Source タブ:

Orientation: XY Plane
Translate: 0 0 0

座標方向の参照:

Viewer Active で H キーを押して正面、スケール調整:

10. 推奨機材

このセットアップで効くスペック:

GPU: パーティクル数を増やすほど効く。VRAM 12GB 以上(RTX 4070 SUPER / RTX 5070 など)を目安に
ウェブカメラ: Optical Flow の解析精度はカメラ画質に直結。1080p 以上、できれば 4K(Logicool Brio 系など)
プロジェクター(床面投影向け): 短焦点 + 4K が映像演出向け(EPSON EB シリーズ、BenQ 短焦点系など)

3D City Visualization with PLATEAU Face Tracking + TouchDesigner