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

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

概要 📖 – 画像の輪郭をなぞって形状化

Trace SOPは、入力された TOP 画像の明暗境界をしきい値でなぞり、その輪郭を 2 次元のジオメトリ (曲線またはポリゴン) として出力する SOPです。TOP Name で対象画像を指定し、Threshold でなぞる明るさレベルを決め、Fit to Curves / Resample Shapes / Smooth Shapes で輪郭の滑らかさと点数を調整します。

主な用途 🎯

画像 (TOP) の輪郭抽出で、ロゴ・シルエット・白黒イラストの明暗境界をなぞって 2 次元のジオメトリ (曲線・ポリゴン) に変換する
しきい値による形状の切り出しで、Threshold (しきい値) を調整して画像のどの明るさレベルで輪郭を生成するかを制御する
滑らかな曲線への変換で、Fit to Curves (曲線フィッティング) を使って画素的なギザギザ輪郭を Bezier 曲線に整え、拡大しても綺麗な形状を得る
輪郭点数の調整で、Resample Shapes (形状の再サンプル) と Smooth Shapes (形状の平滑化) で生成される点の密度と滑らかさを最適化する
テキスト・マスクからの押し出し素材生成で、トレースした 2D 形状を後段の押し出しや掃引のベースに使い立体ロゴ・看板を作る

データフロー 🔄

入力: TOP の画像 (ロゴ・シルエット・白黒マスク等)
 ↓
Threshold で明暗境界を決定し、Fit to Curves / Resample Shapes / Smooth Shapes 等で輪郭を精製
 ↓
出力: なぞった輪郭の 2 次元ジオメトリ (曲線またはポリゴン)

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Trace Page 📁

トレース元と境界設定 🎯

TOP Name .top 🖼️
– TOP Name (トレース対象画像) — なぞる元となる TOP 画像のパスを指定する
– ロゴ・シルエット・白黒マスクなど、明暗の差がはっきりした画像ほど綺麗に輪郭が取れる

Threshold .thresh 🔆
– Threshold (しきい値) — 画像のどの明るさレベルで輪郭を生成するかを決める基準値
– この値を上下させることで、なぞられる明暗境界の位置 (どこまでを形状とみなすか) が変化する

Add Point Texture .addtexture 🧷
– Add Point Texture (点テクスチャ座標の付与) — 点ごとのテクスチャ座標 (UV) を生成するオプション
– Convert to Poly (ポリゴン変換) を有効にしている場合に必要となることがある

Remove Borders .delborder 🧹
– Remove Borders (境界の除去) — 元画像の端にある余分なデータをトレース対象から除外する
– 元画像の縁に「汚れ」があり、それをなぞりたくない場合に有効

Compute Normals .normals 🧭
– Compute Normals (法線の計算) — 生成されたジオメトリに法線 (面の向きを表すベクトル) を作成する
– 後段でライティングやマテリアルを適用する際に必要になる

Filters Page 🎚️

輪郭の精製と曲線化 🎚️

Border Width .bordwidth 📏
– Border Width (境界の幅) — 除去する境界の幅をピクセル数で指定する
– Remove Borders (境界の除去) で取り除く縁の厚みを決める

Resample Shapes .doresample 🔁
– Resample Shapes (形状の再サンプル) — トレース輪郭を生成する際の精度 (点の数) を調整する
– 有効にすると輪郭点の密度をコントロールでき、後続の Step Size (ステップ幅) が効くようになる

Step Size .step 👣
– Step Size (ステップ幅) — Resample Shapes (形状の再サンプル) が有効なときに輪郭の精製度合いを制御する値
– 値を小さくするほど点が密になり、細かい輪郭まで拾える

Smooth Shapes .dosmooth 〰️
– Smooth Shapes (形状の平滑化) — ジオメトリをフィルタして鋭い角を取り除く
– 有効にすると、画素由来のギザギザした角が滑らかになる

Corner Delta .corner 📐
– Corner Delta (角の平滑度) — Smooth Shapes (形状の平滑化) が有効なときの角の平滑化の強さを制御する値
– どの程度の角度までを「角」として残すかの基準になる

Fit to Curves .fitcurve ✏️
– Fit to Curves (曲線フィッティング) — この点でジオメトリを 2 次元の Bezier 曲線に変換する
– ポリゴンの平らな辺は保持されるため、直線と曲線が混在する形状を綺麗に整えられる

Fitting Error .error 🎯
– Fitting Error (フィッティング誤差) — 上記の曲線フィッティングの精度を制御する値
– 良い結果を得るには入力点をできるだけ多く残す (Smooth Shapes や Resample Shapes を選ばない) のが望ましい

Convert to Poly .convpoly 🔷
– Convert to Poly (ポリゴンへ再変換) — 上記の曲線を再びポリゴンに変換するオプション
– 曲線化したあと、改めてポリゴンメッシュとして扱いたい場合に使う

Level of Detail .lod 🔍
– Level of Detail (詳細度) — ポリゴンへ再変換する際の精度を制御する値
– 値が大きいほど密で滑らかなポリゴン輪郭になる

Hole Faces .hole 🕳️
– Hole Faces (穴あけ処理) — 出力にある穴を正しくレンダリングできるよう橋渡し処理する
– Bezier 曲線・ポリゴンともに穴あけ可能だが、ポリゴンの穴あけは Convert to Poly (ポリゴンへ再変換) を先に使うと良い結果になることがある

実践アイデア 💡

Example 1: ロゴ画像を立体化 🔠

Movie File In TOP (白黒ロゴ) → Trace SOP (TOP Name 指定, Threshold 調整, Fit to Curves=ON) → Extrude SOP → Material SOP → Render TOP

白黒のロゴ画像を Movie File In TOP で読み込み、Trace SOP でその明暗境界をなぞって 2 次元の形状に変換する基本フローです。Threshold (しきい値) で輪郭が取れる明るさレベルを合わせ、Fit to Curves (曲線フィッティング) を有効にすると画素的なギザギザが Bezier 曲線に整えられます。生成した平面形状を後段の Extrude SOP で押し出すと、ロゴをそのまま立体看板やタイトル素材にできます。

Movie File In TOP で白黒ロゴ画像を読み込む (明暗差がはっきりした画像が望ましい)
Trace SOP を配置し、TOP Name に読み込んだ TOP のパスを指定
Threshold を上下させて、ロゴの輪郭が綺麗に取れる明るさレベルに合わせる
Fit to Curves を有効にして輪郭を滑らかな Bezier 曲線に整える
下流に Extrude SOP を接続して 2D 形状を押し出し、立体ロゴとして仕上げる

Example 2: シルエット輪郭抽出 👤

Movie File In TOP → Edge TOP (輪郭強調) → Trace SOP (Threshold + Resample Shapes) → Wireframe SOP → Render TOP

人物や物体のシルエット映像を Edge TOP で明暗の境界を強調してから Trace SOP に渡すと、フレームごとに輪郭線がジオメトリとして生成されます。Resample Shapes (形状の再サンプル) と Step Size (ステップ幅) で輪郭点の密度を調整し、後段の Wireframe SOP で線として描画すると、動く輪郭をなぞるラインアートのような演出になります。

Movie File In TOP で映像を読み込み、Edge TOP で輪郭を白黒で強調する
Trace SOP の TOP Name に Edge TOP を指定し、Threshold で輪郭が取れる明るさに合わせる
Resample Shapes を有効にし、Step Size で輪郭点の細かさを調整する
下流に Wireframe SOP を接続して輪郭を線として描画
Render TOP で映像に追従して輪郭が動くことを確認する

Info CHOP情報 📊

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

ジオメトリ統計 📐

num_points: この SOP に含まれるポイント数
num_prims: この SOP に含まれるプリミティブ数
num_particles: この SOP に含まれるパーティクル数

GPU 転送タイミング 🎮

last_vbo_update_time: 別スレッドで SOP の CPU データを GPU 上のジオメトリデータに更新するのにかかった時間 (フレーム時間外)
last_meta_vbo_update_time: 別スレッドで metaball や NURBS のようなメタサーフェスジオメトリデータを GPU に更新するのにかかった時間 (フレーム時間外)

汎用オペレータ情報 🔄

total_cooks: プロセス開始以降にこのオペレータがクックされた合計回数
cook_time: 直近のクック所要時間 (ミリ秒)
cook_frame: このオペレータが最後にクックされたフレーム番号
warnings: このオペレータの警告数
errors: このオペレータのエラー数

クック統計 ⏱️

total_cooks: total_cooks — プロセス開始以降にこのオペレータがクックされた合計回数
cook_time: cook_time — 直近のクック所要時間 (ミリ秒)。画像トレースは重い処理になりやすいため監視に有用
cook_frame: cook_frame — このオペレータが最後にクックされたフレーム番号
cooked_this_frame: cooked_this_frame — 当該フレームでクックされた場合は 1

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

よくある問題と解決策 🔧

❌ Problem: 輪郭が全く生成されない / ジオメトリが空になる
✅ Solution:

TOP Name (トレース対象画像) に正しい TOP のパスが指定されているか確認する
Threshold (しきい値) が画像の明暗に合っていない可能性がある — 値を上下させて輪郭が現れる位置を探す
明暗差が乏しい画像の場合は前段に Edge TOP を挟んで境界を白黒で強調する

❌ Problem: 輪郭がギザギザで滑らかにならない
✅ Solution:

Smooth Shapes (形状の平滑化) を有効にして鋭い角を取り除く
Fit to Curves (曲線フィッティング) を有効にして輪郭を Bezier 曲線に変換する
Corner Delta (角の平滑度) を調整してどの程度の角を残すか制御する

❌ Problem: 穴のある形状 (ドーナツ状・文字の中抜き) が正しく描画されない
✅ Solution:

Hole Faces (穴あけ処理) を有効にして穴の橋渡し処理を行う
ポリゴンの穴あけが粗い場合は Convert to Poly (ポリゴンへ再変換) を先に使ってから穴あけ処理を行う
後段で Convert SOP を使って型を揃えると描画が安定することがある

❌ Problem: 処理が重くフレームレートが落ちる
✅ Solution:

毎フレームのトレースが不要なら、変化のないフレームではクックを抑える構成にする
Resample Shapes (形状の再サンプル) と Step Size (ステップ幅) で輪郭点の密度を下げる
入力画像の解像度を前段の TOP で落として処理負荷を減らす

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0