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

概要 📖 – 画像のエッジを抽出

Edge TOPは、入力画像から輝度や色チャンネルの変化を検出し、エッジ部分だけを取り出したテクスチャを出力する TOPです。Select で検出元のチャンネル (Luminance / RGB / Alpha 等) を切替え、Strength と Sample Step で感度と検出幅を調整します。Combine with Input と Operation を使えば元画像と各種ブレンドモードで合成可能です。

主な用途 🎯

• 写真・映像からのライン画 / 輪郭線抽出 (アニメ調・スケッチ風表現)
• しきい値処理と組み合わせた二値化マスクの生成 (被写体抽出の前段)
• プロジェクションマッピング・インタラクティブ映像での被写体形状検出
• Difference TOP との併用による運動成分・動きの輪郭の可視化
• Render TOP 出力に重畳する NPR (非写実) シェーディング表現

データフロー 🔄

入力 TOP (画像)
 ↓
Select で評価チャンネル (Luminance / RGB / Alpha) を抽出
 ↓
周辺ピクセルとの差分から Sobel 系アルゴリズムでエッジを検出
 ↓
Black Level / Strength で感度を補正
 ↓
Edge Color で着色
 ↓
出力: エッジ画像 (元画像との合成も可)

---

パラメータ解説 ⚙️

Edge Page 📋

Select .select 🎯

エッジを評価するチャンネルの選択

項目	内部名	説明
Luminance	.luminance	RGB を合成した輝度 (Luminance) からエッジを検出。汎用デフォルト、色の差より明るさの差で輪郭を取りたいとき
Red	.red	赤チャンネルのみを評価してエッジ抽出 (赤主体の被写体や、3チャンネル別々に解析したい用途)
Green	.green	緑チャンネルのみを評価。グリーンスクリーン抽出の前処理にも
Blue	.blue	青チャンネルのみを評価。青系被写体や夜景解析に
Alpha	.alpha	アルファチャンネルを評価。マスクや切り抜き形状の輪郭抽出に最適
RGB Average	.rgbaverage	RGB の単純平均からエッジ検出 (Luminance より色被りの影響を受けにくい)
RGBA Average	.average	RGBA 全チャンネル平均からエッジ検出。アルファ含む全成分を均等に評価

Black Level .blacklevel ⚫

エッジ検出前の黒レベル調整 (暗部ノイズの誤検出を抑制):

• Black Level: Black Level (黒つぶし量) — 入力画像から指定値を引いてから検出することで、暗部のノイズによる誤検出を抑制します。値を上げると弱いエッジが消え、強いエッジだけが残ります。

Strength .strength 💪

エッジ強調のゲイン (高くするほど細部のエッジまで現れる):

• Strength: Strength (強度ゲイン) — 検出結果に掛ける倍率。値を上げるほど弱いエッジまで増幅され、細部の輪郭が現れやすくなります。上げすぎるとノイズ成分も同時に増幅される点に注意。

Sample Step .offset 📏

サンプル参照距離 (大きくするほど太いエッジが得られる):

• Sample Step: Sample Step (サンプル参照距離) — 各ピクセルから何ピクセル離れた点を比較してエッジを評価するか。値 1 で隣接ピクセル比較 (細いエッジ)、値 3 なら 3 ピクセル離れた点を参照 (太く・滑らかなエッジ)。Sample Step Unit で単位を変更可。

Sample Step Unit .offsetunit 📐

サンプル距離の単位 (Pixels / Fraction 系から選択):

• Sample Step Unit: Sample Step Unit (距離単位) — Sample Step の単位を Pixels / Fraction (画像比) / Fraction Aspect (アスペクト比補正付き) から選択。解像度非依存な見た目に保ちたいときは Fraction 系を使います。

Edge Color .edgecolor 🎨

出力されるエッジの色 (RGBA) — 検出強度に掛け算される色:

• Red (edgecolorr): エッジ色の赤成分 (0.0 – 1.0)
• Green (edgecolorg): エッジ色の緑成分 (0.0 – 1.0)
• Blue (edgecolorb): エッジ色の青成分 (0.0 – 1.0)
• Alpha (edgecolora): エッジ色のアルファ成分 (0.0 – 1.0)。透明度や合成時のブレンドに影響

Pre-Multiply RGB by Alpha .premultrgbbyalpha ✖️

RGB を Alpha で前乗算 (後段が Pre-multiplied 前提のとき有効):

• Pre-Multiply RGB by Alpha: Pre-Multiply RGB by Alpha (RGB のアルファ前乗算) — オンにすると出力テクスチャの RGB を Alpha で乗算した状態で書き出します。後段の合成 OP が Pre-multiplied アルファを前提とする場合 (Over 合成等) に整合性が取れます。

Alpha .alphaoutputmenu 🔅

アルファチャンネルの出力方式

項目	内部名	説明
Edge	.edge	アルファに検出したエッジ強度を出力 (エッジをマスクとして後段に渡したいとき)
One	.one	アルファを常に 1 (不透明) として出力
Zero	.zero	アルファを常に 0 (透明) として出力

---

Output Page 📤

Combine with Input .combineinput 🔀

入力画像との合成方式

項目	内部名	説明
Output Edge Only	.edgeonly	エッジ画像のみを出力 (元画像と合成しない)
Composite Edge with Input	.compedge	元画像とエッジを Operation で指定したブレンドモードで合成して出力

Operation .operand 🧮

合成時のブレンドモード

項目	内部名	説明
Add	.add	input1.rgba + input2.rgba (加算合成、明るくなる)
Atop	.atop	(input1.rgba × input2.a) + (input2.rgba × (1 – input1.a)) — input2 のアルファ範囲内に input1 を重ねる
Average	.average	(input1.rgba + input2.rgba) / 2 (平均合成)
Brightest	.brightest	輝度の高い方を採用
Burn Color	.burncolor	焼き込みカラー (色を保持しつつ暗く)
Burn Linear	.burnlinear	焼き込みリニア (線形に暗く)
Chroma Difference	.chromadifference	色差成分の差分
Color	.color	色相と彩度のみを採用 (輝度は維持)
Darker Color	.darkercolor	ピクセル単位で暗い方の色を採用
Difference	.difference	absoluteValue(input1.rgb − input2.rgb)、Alpha は常に 1.0
Dimmest	.dimmest	輝度の低い方を採用
Divide	.divide	input1.rgba ÷ input2.rgba (除算合成)
Dodge	.dodge	覆い焼き (明るく持ち上げる)
Exclude	.exclude	除外合成 (反転差の柔らかい版)
Freeze	.freeze	凍結合成 (彩度を下げて固める)
Glow	.glow	発光合成 (周囲に光を付加)
Hard Light	.hardlight	ハードライト (強コントラスト)
Hard Mix	.hardmix	ハードミックス (極端な二値化的混合)
Heat	.heat	ヒート合成 (高温色を持ち上げ)
Hue	.hue	色相のみを採用 (輝度・彩度は維持)
Inside	.inside	input1.rgba × clamp(input2.a, 0, 1) — input2 のアルファ範囲内のみ表示
Inside Luminance	.insideluminance	input2 の輝度をマスクとして input1 を抜く
Inverse	.inverse	反転合成
Lighter Color	.lightercolor	ピクセル単位で明るい方の色を採用
Luminance Difference	.luminancedifference	輝度成分の差分
Maximum	.maximum	max(input1.r, input2.r), max(input1.g, input2.g), max(input1.b, input2.b), max(input1.a, input2.a)
Minimum	.minimum	min(input1.r, input2.r), min(input1.g, input2.g), min(input1.b, input2.b), min(input1.a, input2.a)
Multiply	.multiply	乗算合成 (暗くなる、影付け)
Negate	.negate	反転
Outside	.outside	input1.rgba × (1 − input2.a) — input2 のアルファ外側のみ表示
Outside Luminance	.outsideluminance	input2 の輝度の外側を採用
Over	.over	(input2.rgba × (1 − input1.a)) + input1.rgba — 標準のアルファ重畳
Overlay	.overlay	オーバーレイ (中間色を基準にコントラスト強化)
Pinlight	.pinlight	ピンライト合成
Reflect	.reflect	リフレクト合成
Screen	.screen	1 − ((1 − input1.rgba) × (1 − input2.rgba)) — スクリーン合成 (明るくなる)
Soft Light	.softlight	ソフトライト (柔らかいコントラスト調整)
Linear Light	.linearlight	リニアライト (線形強コントラスト)
Stencil Luminance	.stencilluminance	輝度ステンシル合成
Subtract	.subtract	input1.rgba − input2.rgba (減算合成)
Subtractive	.subtractive	減色合成
Under	.under	(input1.rgba × (1 − input2.a)) + input2.rgba — Over の逆順
Vivid Light	.vividlight	ビビッドライト (強コントラスト系)
Xor	.xor	(input1.rgba × (1 − input2.a)) + (input2.rgba × (1 − input1.a)) — 排他的論理和
Y Film	.yfilm	Y フィルム (フィルム風合成)
Z Film	.zfilm	Z フィルム (フィルム風合成)

※ 注意: Combine with Input が Output Edge Only の場合、Operation の選択結果は出力に反映されません。Composite Edge with Input を選んだときのみ各ブレンドモードが有効になります。

引用元: 公式 docs

Swap Order .swaporder 🔁

合成順序の入替 (Over / Under 等で前景と背景を交換):

• Swap Order: Swap Order (合成順序の入替) — Over / Under など順序に依存するブレンドモードで input1 と input2 の役割を入れ替えます。前景と背景を反転させたいときに使用。

---

Common Page 🔧

Output Resolution .outputresolution 🖼️

出力解像度の決定方式

項目	内部名	説明
Use Input	.useinput	入力 TOP の解像度をそのまま継承
Eighth	.eighth	入力解像度の 1/8
Quarter	.quarter	入力解像度の 1/4
Half	.half	入力解像度の 1/2
2X	.2x	入力解像度の 2 倍
4X	.4x	入力解像度の 4 倍
8X	.8x	入力解像度の 8 倍
Fit Resolution	.fit	指定解像度に縦横比を保持して収める
Limit Resolution	.limit	指定解像度を上限としてクランプ
Custom Resolution	.custom	Resolution パラメータで任意指定

Resolution .resolution 📐

カスタム解像度の幅・高さ指定 (Output Resolution = Custom 等の時のみ有効):

• Resolution W: 出力幅 (ピクセル単位)。Output Resolution が Custom Resolution / Fit Resolution / Limit Resolution の時に有効
• Resolution H: 出力高 (ピクセル単位)。同上

Resolution Menu .resmenu 📋

よく使う解像度プリセットのドロップダウン:

• Resolution Menu: NTSC / PAL / HDTV 720 / HDTV 1080 / 4K UHD 等のプリセットから選択すると Resolution W / Resolution H が自動セットされる

Use Global Res Multiplier .resmult 🔢

プロジェクト全体の解像度倍率の適用:

• Use Global Res Multiplier: Project Settings の Global Resolution Multiplier をこの TOP に適用するかどうか。プロトタイプを低解像度で動かしつつ最終出力で一括フル解像度化する運用に便利

Output Aspect .outputaspect 📏

出力アスペクト比の決定方式

項目	内部名	説明
Use Input	.useinput	入力 TOP のアスペクトを継承 (伝播事故の元、非推奨)
Resolution	.resolution	解像度から自動導出 (推奨デフォルト)
Custom Aspect	.custom	Aspect1 / Aspect2 で手動指定

Aspect .aspect 📐

カスタムアスペクト比の指定 (Output Aspect = Custom Aspect の時のみ有効):

• Aspect1: 横方向アスペクト値 (Output Aspect = Custom Aspect の時のみ有効)
• Aspect2: 縦方向アスペクト値 (同上)

Input Smoothness .inputfiltertype 🎚️

入力テクスチャのサンプリング方式

項目	内部名	説明
Nearest Pixel	.nearest	最近傍ピクセルサンプリング (ピクセルアート向け、ジャギーが残る)
Interpolate Pixels	.linear	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	.mipmap	ミップマップ補間 (縮小時のモアレ抑制、わずかにコスト高)

Fill Viewer .fillmode 🖥️

ビューア内でのテクスチャの収め方

項目	内部名	説明
Use Input	.useinput	入力 TOP の Fill Viewer 設定を継承
Fill	.fill	ビューアいっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal	.width	横幅に合わせて収める (上下に余白)
Fit Vertical	.height	縦幅に合わせて収める (左右に余白)
Fit Best	.best	アスペクト保持で内側に収まる最大サイズ
Fit Outside	.outside	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)
Native Resolution	.nativeres	テクスチャのネイティブ解像度のまま等倍表示

Viewer Smoothness .filtertype 🎛️

ビューア表示時のサンプリング方式

項目	内部名	説明
Nearest Pixel	.nearest	最近傍ピクセルサンプリング (ピクセル単位での確認向け)
Interpolate Pixels	.linear	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	.mipmap	ミップマップ補間 (縮小ビュー時のモアレ抑制)

Passes .npasses 🔁

オペレータの反復実行回数:

• Passes: TOP の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。ブラー反復やフィードバック処理に利用

Channel Mask .chanmask 🎨

処理対象のチャンネルマスク (R/G/B/A 個別トグル):

• Channel Mask: R / G / B / A 各チャンネルのオン/オフトグル。オフのチャンネルは TOP の処理を受けず入力値がそのまま通過

Pixel Format .format 🎨

出力テクスチャのピクセルフォーマット (ビット深度・チャンネル構成)

項目	内部名	説明
Use Input	.useinput	入力 TOP のフォーマットを継承
8-bit fixed (RGBA)	.rgba8fixed	標準 8 ビット固定小数 RGBA (デフォルト、軽量)
sRGB 8-bit fixed (RGBA)	.srgba8fixed	sRGB ガンマ補正済 8 ビット RGBA
16-bit float (RGBA)	.rgba16float	16 ビット浮動小数 RGBA (HDR・中間処理向け)
32-bit float (RGBA)	.rgba32float	32 ビット浮動小数 RGBA (最高精度、メモリ大)
10-bit RGB with 2-bit Alpha	.rgb10a2fixed	10-10-10-2 ビット固定小数 (バンディング抑制)
16-bit fixed (RGBA)	.rgba16fixed	16 ビット固定小数 RGBA
11-bit float (RGB)	.rgb11float	11-11-10 ビット浮動小数 RGB (アルファなし、HDR 軽量)
16-bit float (RGB)	.rgb16float	16 ビット浮動小数 RGB (アルファなし)
32-bit float (RGB)	.rgb32float	32 ビット浮動小数 RGB (アルファなし)
8-bit fixed (Mono)	.mono8fixed	8 ビット固定小数モノクロ
16-bit fixed (Mono)	.mono16fixed	16 ビット固定小数モノクロ
16-bit float (Mono)	.mono16float	16 ビット浮動小数モノクロ
32-bit float (Mono)	.mono32float	32 ビット浮動小数モノクロ
8-bit fixed (RG)	.rg8fixed	8 ビット固定小数 R+G 2 チャンネル
16-bit fixed (RG)	.rg16fixed	16 ビット固定小数 R+G
16-bit float (RG)	.rg16float	16 ビット浮動小数 R+G
32-bit float (RG)	.rg32float	32 ビット浮動小数 R+G
8-bit fixed (A)	.a8fixed	8 ビット固定小数アルファ単体
16-bit fixed (A)	.a16fixed	16 ビット固定小数アルファ単体
16-bit float (A)	.a16float	16 ビット浮動小数アルファ単体
32-bit float (A)	.a32float	32 ビット浮動小数アルファ単体
8-bit fixed (Mono+Alpha)	.monoalpha8fixed	8 ビット固定小数モノクロ+アルファ
16-bit fixed (Mono+Alpha)	.monoalpha16fixed	16 ビット固定小数モノクロ+アルファ
16-bit float (Mono+Alpha)	.monoalpha16float	16 ビット浮動小数モノクロ+アルファ
32-bit float (Mono+Alpha)	.monoalpha32float	32 ビット浮動小数モノクロ+アルファ

---

実践アイデア 💡

Example 1: 写真をアニメ調ライン画化 ✏️

Movie File In TOP → Edge TOP → Threshold TOP → Out TOP

実写の写真や動画からアニメ調のライン画 (輪郭線のみの画像) を作る基本フロー。Edge TOP で輝度差から輪郭を抽出し、Threshold TOP で二値化して線の太さ・濃さを整えます。SNS 用のスタイル変換や、配信オーバーレイの装飾線として使えます。

1. Movie File In TOP に元画像 / 動画を読み込み Edge TOP に接続
2. Select = Luminance に設定 (明暗差ベースで輪郭を取る)
3. Strength を 2.0 前後に上げて細部の輪郭まで現れるよう調整
4. Sample Step = 2 に設定 (線をわずかに太く)、必要に応じて 1 まで戻す
5. 出力を Threshold TOP に接続して二値化し、Out TOP に渡す

Example 2: 動く輪郭をマスク抽出 🎬

Video Device In TOP → Difference TOP → Edge TOP → Level TOP → Composite TOP → Out TOP

Web カメラや Kinect 映像から「動いている部分の輪郭」だけを取り出し、後段の合成のマスクとして利用するフロー。Difference TOP で前フレームとの差分を取り、Edge TOP でその差分の輪郭を強調、Level TOP で黒レベルを締めてから Composite TOP に渡します。インタラクティブインスタレーションで来場者のシルエットを使う基礎パターン。

1. Video Device In TOP の出力を Difference TOP に接続して動き成分を取り出す
2. Difference TOP の出力を Edge TOP に接続し、Select = Luminance、Strength = 3.0 程度に設定
3. Black Level を 0.05 – 0.1 に上げて静止部分のノイズを除去
4. Combine with Input = Output Edge Only でエッジだけを出力
5. 後段の Level TOP で黒レベルを締め、Composite TOP の第 2 入力 (マスク) として渡す

---

関連オペレータ 🔗

類似機能OP 🔍

• Emboss TOP — 輝度差から立体的なエンボス効果を生成 (Edge と同じ差分原理だが結果がレリーフ風)
• Convolve TOP — 任意のカーネル行列で畳み込み演算 (Sobel / Laplacian 等を自前で組んでエッジ検出可能、Edge より柔軟)

組み合わせ推奨OP 🔄

• Threshold TOP — Edge の出力を二値化してくっきりとした線画に整形 (ライン画生成の標準後段)
• Level TOP — 黒レベル・ガンマでエッジ強度を整える後段補正
• Composite TOP — 抽出したエッジを別レイヤと合成・重畳 (NPR 表現の最終合成段)
• Difference TOP — 前フレームとの差分を Edge に渡すことで動き輪郭を抽出する前段
• GLSL TOP — 独自シェーダで Canny / Sobel-X / Sobel-Y 等の派生エッジ検出を実装したい場合の代替

前処理・後処理TOP 🎯

• 前処理: Blur TOP、Luma Blur TOP、Difference TOP
• 後処理: Threshold TOP、Level TOP、Composite TOP、Out TOP

---

Info情報 📊

Edge TOP は Info CHOP / Info DAT に接続することで出力テクスチャの解像度・ピクセルフォーマット・クック情報を取得できます。動的にエッジ検出パラメータを切り替える際の同期確認や、後段のシェーダで参照する解像度情報の取得に使います。

TOP固有情報 🖼️

• resx: TOP の出力解像度 X (ピクセル単位)
• resy: TOP の出力解像度 Y (ピクセル単位)
• aspectx: アスペクト比 X
• aspecty: アスペクト比 Y
• depth: 3D テクスチャ / テクスチャ配列の深度 (2D テクスチャでは 1)
• gpu_memory_used: TOP が消費している GPU メモリ量 (MB 単位)

汎用オペレータ情報 🔄

• total_cooks: プロセス開始からのクック回数
• cook_time: 最後のクック時間 (ミリ秒)
• cook_frame: 最後にクックされたフレーム番号
• warnings: 警告数
• errors: エラー数

テクスチャ情報 🖼️

• resx: 出力テクスチャの横幅 (ピクセル単位)
• resy: 出力テクスチャの縦幅 (ピクセル単位)
• aspectx: アスペクト比の横成分
• aspecty: アスペクト比の縦成分
• depth: ピクセルフォーマットのビット深度
• gpu_memory_used: この TOP が消費している GPU メモリ量 (バイト)

クック情報 ⚙️

• total_cooks: ノードがクックされた累積回数
• cook_time: 直近フレームのクック時間 (ミリ秒)
• cook_frame: 直近にクックされたフレーム番号
• cooked_this_frame: 現フレームでクック済かどうか (0/1)

---

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

よくある問題と解決策 🔧

❌ Problem: エッジがほとんど検出されない / 線が薄い
✅ Solution:

• Strength を 2.0 以上に上げて検出強度を増幅
• Black Level を 0 に戻す (上げすぎていると弱いエッジが消える)
• Select を Luminance から RGB Average / 個別チャンネルに切り替えて評価対象を変更
• 入力画像のコントラストが低い場合は前段に Level TOP を挟んでコントラスト強調してから渡す

❌ Problem: ノイズ部分まで過剰にエッジ化されて汚い
✅ Solution:

• Black Level を 0.05 – 0.1 程度に上げて暗部のノイズによる誤検出を抑制
• 前段に Blur TOP を挟んで入力を軽くぼかしてから Edge TOP に渡す
• Sample Step を上げて細かいノイズより大きな輪郭を優先
• Strength を下げる (上げすぎがノイズ増幅の主因)

❌ Problem: エッジが太すぎる / 細すぎる
✅ Solution:

• Sample Step を上げると太く、下げると細く (1 が最も細い)
• Sample Step Unit = Fraction に切り替えると解像度に依存しない太さに統一できる
• 細さを保ったままアンチエイリアシングしたい場合は後段に Anti Alias TOP を接続

❌ Problem: 元画像と合成したのにエッジだけしか見えない / 元画像だけしか見えない
✅ Solution:

• Combine with Input = Composite Edge with Input になっているか確認 (Output Edge Only ではエッジのみ)
• Operation を Add や Screen に変更してエッジを上に乗せる (Over だとエッジが暗いとき沈む)
• Edge Color の Alpha 成分が 0 になっていないか確認 (Alpha = 0 だと合成で消える)
• Swap Order を切り替えて入力 1 / 入力 2 の役割を反転させてみる

---

参考資料 📚

その他 🔗

• TouchDesigner Wiki — Category:TOPs
• TouchDesigner Wiki — Pixel Formats 解説
• TouchDesigner Wiki ホーム
• TouchDesigner 公式 Forum
• Facebook — TouchDesigner Help Group

公式リソース 📖

• TouchDesigner公式ドキュメント – Edge TOP
• TouchDesigner公式ドキュメント – Convolve TOP (カーネル畳み込みでエッジを自前実装)
• TouchDesigner公式ドキュメント – Threshold TOP (Edge の典型的な後段)

その他の記事はこちら

---