Trace POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

※当サイトにはプロモーションリンクが含まれます。

Trace POP の輪郭抽出機能を示す図

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – 画像から輪郭線を抽出

Trace POPは、入力された画像のピクセル値をしきい値で判定し、内側と外側の境界を輪郭線や三角形サーフェスとして出力する POPです。出力形式は輪郭線・線ストリップ・サーフェスから選択でき、画像のシルエットをそのままジオメトリに変換します。

主な用途 🎯

  • 画像の明暗から輪郭線（コンター）を抽出してジオメトリ化
  • しきい値を境にした内側・外側の境界線を線分として生成
  • 閉じた領域を三角形のサーフェスに変換
  • ロゴやシルエット画像をベクター形状のラインに変換
  • 音声スペクトルや高さマップを等高線として可視化

データフロー 🔄

入力: TOP 画像または 2 次元 POP
 ↓
しきい値判定で境界を検出
 ↓
出力: 輪郭線・線ストリップ・三角形サーフェスのジオメトリ

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

まる。
まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

Trace Page 📁

入力ソース .input 🎛️

輪郭抽出の元となる画像ソースとサンプリング設定

Input Attribute Scope .inputattrscope 🎛️
– Input Attribute Scope (入力属性の対象) — 次元 2 の POP を入力に使う場合に、サンプリングする属性を指定します。

Use Position Attribute .posattrib ✅
– Use Position Attribute (位置属性を使用) — 次元 2 の POP を入力に使う場合に、しきい値の境界線の配置に P (位置) 属性を使うかどうかを指定します。

TOP .top 🖼️
– TOP (入力 TOP) — 輪郭抽出の元となる画像 TOP を指定します。

Resolution Multiplier .resmult 📐
– Resolution Multiplier (解像度倍率) — 入力に適用する解像度の倍率です。

Channel .channel 🎚️

Channel (サンプルする色チャンネル) — TOP 入力を使う場合に、しきい値判定に使う色チャンネルを選択します。

項目 内部名 説明
Luminance .luminance 輝度 (明るさ) を使用
Red .red 赤チャンネルを使用
Green .green 緑チャンネルを使用
Blue .blue 青チャンネルを使用
Alpha .alpha アルファ (透明度) を使用
RGB Average .rgbaverage RGB の平均値を使用
RGBA Average .average RGBA の平均値を使用
RGB Maximum .rgbmax RGB の最大値を使用
RGBA Maximum .max RGBA の最大値を使用

しきい値判定 .threshold 📏

内側と外側を分けるしきい値と、その判定方向・境界外の扱い

Threshold .threshold 📏
– Threshold (しきい値) — どこからがサーフェスの内側で、どこからが外側 (空白) かを決めるしきい値です。

Inside .inside 🎚️

Inside (内側の判定方向) — しきい値より上の値を内側とみなすか、下または同値を内側とみなすかを選びます。輪郭の場合は線分の向きも決まります。

項目 内部名 説明
Below/Equal to Threshold .below しきい値以下を内側とみなす
Above Threshold .above しきい値より上を内側とみなす

Extend .extend 🎚️

Extend (境界外のサンプリング) — 画像の端の外側をどう扱うかを指定します。境界での輪郭の挙動を決めるために必要です。

項目 内部名 説明
Hold .hold 境界の値をそのまま保持する
Zero .zero 境界の外側は 0 を返す

Output .twodimensions 📤

Output (出力形式) — 輪郭線・線ストリップ・三角形サーフェスのどれを出力するかを選択します。

項目 内部名 説明
Contour (Lines) .contour 輪郭を独立した線分として出力
Contour (Line Strips) .contourls 輪郭を連続した線ストリップとして出力
Surface (Triangles) .surface 三角形で構成したサーフェスとして出力

線出力オプション .lineoptions 📏

線・線ストリップを出力する際の点の共有・巻き方向・平滑化の設定

Unique Points .uniquepoints ✅
– Unique Points (点を個別に持つ) — 線を出力する際に、点を線どうしで共有するか、各線ごとに個別に持つかを指定します。

Winding .winding 🔄

Winding (巻き方向) — 線ストリップを出力する際の点の並び順 (時計回り / 反時計回り) を指定します。

項目 内部名 説明
Natural .natural サーフェスは反時計回り、穴は時計回りの自然な向き
Counter ClockWise .ccw 穴も含めてすべて反時計回りに統一

平滑化と座標 .smoothpage ✨

線ストリップの平滑化と P 座標の再マッピングに関する設定

Smooth Edge Distance .smooth ✨
– Smooth Edge Distance (エッジ平滑化距離) — 線ストリップ出力時に、指定した距離で隣接する点の位置を平均し、線をなめらかにします。

ReRange P .rerangep 📐
– ReRange P (P 座標の再マッピング) — P (位置) 属性の値域を作り直すかどうかを指定します。

Map to Low .tolow 📉
– Map to Low (再マッピングの最小値) — X と Y それぞれにおける新しい値域の下限です。

Map to High .tohigh 📈
– Map to High (再マッピングの最大値) — X と Y それぞれにおける新しい値域の上限です。

Normal .normal 🎚️

Normal (法線属性の出力) — N (法線) 属性を出力するかどうかを指定します。

項目 内部名 説明
None .none 法線属性を出力しない

Normal Direction .normaldirection 🎚️

Normal Direction (法線の向き) — 法線を出力する際の向きを選びます。

項目 内部名 説明
Default .default 標準の向き
+Z .z +Z 方向に固定

出力属性とメモリ .outputattr 📤

テクスチャ座標の出力と GPU メモリ割り当て・トポロジー転送の設定

Texture Coordinates .texture 🎨
– Texture Coordinates (テクスチャ座標) — 点のテクスチャ座標属性 (Tex) を出力するかどうかを指定します。

Fraction of Max Allocation .allocfract 💾
– Fraction of Max Allocation (最大割り当ての割合) — この POP は必要な GPU メモリ量を事前に把握できないため、最大割り当てより少ない量で済ませて節約します。点やプリミティブが欠ける場合は割合が低すぎます。

Max Num Line Strips .setmaxnumls 📏
– Max Num Line Strips (線ストリップ最大数) — 任意のトグルで、正しく設定すると GPU メモリを節約します。

Max Num Verts per Line Strip .setmaxnumvertsperls 📏
– Max Num Verts per Line Strip (線ストリップあたり最大頂点数) — 任意のトグルで、GPU が無限ループに陥るのを防ぎます。メモリ節約にはなりません。

Copy Topology Info Back to CPU .cpureadback 🔄
– Copy Topology Info Back to CPU (トポロジー情報を CPU へ転送) — GPU 上の点数・トポロジー情報を CPU へコピーします。専用 GPU では処理の一時停止が発生します。

Common Page 🔧

Bypass .bypass 🔧

Bypass (バイパス): 最初の入力をそのまま出力へ通します。

  • Bypass: 最初の入力を変更せずそのまま出力へ通過させる

Free Extra GPU Memory .freeextragpumem 💾

Free Extra GPU Memory (余剰 GPU メモリ解放): 出力メモリの増減で溜まったメモリを解放します。

  • Free Extra GPU Memory: 出力メモリの増減で蓄積したメモリを解放する

Delete Input Attributes .delinputattrs 🗂️

Delete Input Attributes (入力属性の削除): 指定した属性のみを出力し、属性の分離に役立てます。

  • Delete Input Attributes: この POP で指定した属性のみ出力し、属性を別ブランチへ分離しやすくする

実践アイデア 💡

Example 1: ロゴをラインに変換 🖋️

Movie File In TOP → Trace POP (Contour Line Strips) → Line MAT → Render

白黒のロゴ画像を Movie File In TOP で読み込み、Trace POP の線ストリップ出力でシルエットの輪郭をなぞったラインジオメトリに変換し、ベクター風の描画に使う基本フローです。

  1. Movie File In TOP でロゴ画像を読み込む
  2. Trace POP の Channel を「Luminance」にして明暗で境界を判定
  3. Output を「Contour (Line Strips)」に設定して連続した線を生成
  4. 出力ラインをレンダリングして輪郭描画として表示

Example 2: 音声波形を等高線化 🎶

Audio Spectrum CHOP → CHOP to TOP → Trace POP (Contour) → Geometry COMP

音声スペクトルを CHOP to TOP で画像化し、Trace POP の輪郭出力でしきい値ごとの等高線として可視化することで、サウンドリアクティブなジオメトリ表現を作る用途です。

  • Audio Spectrum CHOP を CHOP to TOP で画像に変換
  • Trace POP の Threshold を調整してエネルギーの境界を抽出
  • Output を「Contour (Lines)」にして等高線状の線分を生成

Example 3: シルエットを面に変換 🟦

Trace POP (Surface Triangles) → Transform POP → Render

しきい値で切り出したシルエットの内側を Trace POP の三角形サーフェス出力で塗りつぶしのジオメトリに変換し、Transform POP で配置してそのまま立体的に扱うフローです。

  • Trace POP の Output を「Surface (Triangles)」に設定
  • Threshold で塗りつぶす領域の範囲を調整
  • Transform POP で位置やスケールを整えてレンダリング

関連オペレータ 🔗

類似機能OP 🔍

  • Trace SOP — CPU 側で画像から輪郭ジオメトリを生成する同名 SOP

組み合わせ推奨OP 🔄

  • TOP to POP — TOP を POP に取り込む前段の変換
  • Convert POP — 出力ジオメトリの種類を変換
  • Line Smooth POP — 抽出した輪郭線をさらになめらかに整える
  • Transform POP — 出力ジオメトリを移動・回転・スケール

前処理・後処理POP 🎯

Info情報 📊

Trace POP は Info CHOP による詳細情報の取得に対応しています。

POP固有情報 ✨

  • num_verts: POP に含まれる頂点 (vertex) 数
  • num_points: POP に含まれるポイント数
  • num_prims: POP に含まれるプリミティブ数

汎用オペレータ情報 🔄

  • total_cooks: プロセス開始からのクック回数
  • cook_time: 最後のクック時間 (ミリ秒)
  • cook_frame: 最後にクックされたフレーム番号
  • cook_abs_frame: 最後にクックされた絶対フレーム番号 (アプリケーション起動からの累積)
  • cook_start_time: 最後のクック開始時刻 (ミリ秒)
  • cook_end_time: 最後のクック終了時刻 (ミリ秒)
  • cooked_this_frame: 現フレームでクックされたか (0 / 1)
  • warnings: 警告数
  • errors: エラー数

POP共通情報 📡

  • num_points: 出力ジオメトリの総点数
  • num_prims: 出力プリミティブ (線・三角形) の総数
  • total_cooks: このオペレータがクックされた累計回数
  • cook_time: 直近クックの処理時間 (ミリ秒)

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: 輪郭が抽出されない
✅ Solution:

  • Threshold の値が画像の明暗範囲に合っているか確認
  • Channel が意図した色チャンネル (Luminance 等) を指しているか確認
  • TOP 入力に十分なコントラストがあるか、前段で Info CHOP で点数を確認

❌ Problem: 点やプリミティブが欠ける
✅ Solution:

  • Fraction of Max Allocation の割合を上げて GPU メモリ割り当てを増やす
  • Max Num Line Strips のトグルが低すぎないか確認
  • 入力解像度を Resolution Multiplier で調整して点数を抑える

❌ Problem: 線がギザギザになる
✅ Solution:

  • Output を「Contour (Line Strips)」にして Smooth Edge Distance を有効化
  • 後段の Line Smooth POP で平滑化
  • Resolution Multiplier を上げて入力解像度を高める

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎


まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング＆インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram：＠malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

タイトルとURLをコピーしました