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

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

概要 📖 – 傾きから輪郭を抽出

Slope TOPは、入力画像の各ピクセルで隣り合うピクセルとの傾き (勾配) を計算し、その値をテクスチャとして出力する TOPです。出力の各チャンネルには水平方向・垂直方向・Z 方向のいずれかの傾きを割り当てられ、高さマップから法線情報 (ノーマルマップ) を作る用途に多用されます。Zero Point で傾きが 0 のときの出力値、Strength で傾きの強調量を調整します。

主な用途 🎯

高さマップ (ハイトマップ) からのノーマルマップ生成 (ライティング用の法線情報)
画像の明るさ勾配を使ったエッジ・輪郭の検出 (微分フィルタ的な用途)
変位マップ (Displacement) と組み合わせた擬似立体・凹凸表現の作成
水面・地形などの傾斜情報を使ったシェーディング・反射計算
GLSL シェーダへ傾き成分を渡す前段処理 (法線・微分の事前計算)

データフロー 🔄

入力 TOP (画像 / 高さマップ)
 ↓
R/G/B/A 各チャンネルで傾きの計算方法を選択 (水平 / 垂直 / Z 方向)
 ↓
Method で参照する隣接ピクセルを決定
 ↓
Sample Step で参照距離を調整
 ↓
Zero Point / Strength で出力範囲を補正
 ↓
出力: 各方向の傾き (勾配) を格納したテクスチャ

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Slope Page 📋

Red `.red` 🟥

赤チャンネルの傾き計算方法

項目	内部名	説明
Horizontal Luminance	`.hluminance`	輝度値の水平方向の傾きを計算
Horizontal Red	`.hred`	赤チャンネルの水平方向の傾きを計算
Horizontal Green	`.hgreen`	緑チャンネルの水平方向の傾きを計算
Horizontal Blue	`.hblue`	青チャンネルの水平方向の傾きを計算
Horizontal Alpha	`.halpha`	アルファチャンネルの水平方向の傾きを計算
Horizontal RGB Average	`.hrgbaverage`	RGB 平均の水平方向の傾きを計算
Horizontal RGBA Average	`.haverage`	RGBA 平均の水平方向の傾きを計算
Vertical Luminance	`.vluminance`	輝度値の垂直方向の傾きを計算
Vertical Red	`.vred`	赤チャンネルの垂直方向の傾きを計算
Vertical Green	`.vgreen`	緑チャンネルの垂直方向の傾きを計算
Vertical Blue	`.vblue`	青チャンネルの垂直方向の傾きを計算
Vertical Alpha	`.valpha`	アルファチャンネルの垂直方向の傾きを計算
Vertical RGB Average	`.vrgbaverage`	RGB 平均の垂直方向の傾きを計算
Vertical RGBA Average	`.vaverage`	RGBA 平均の垂直方向の傾きを計算
Z Luminance	`.zluminance`	輝度値の Z 方向の傾きを計算
Z Red	`.zred`	赤チャンネルの Z 方向の傾きを計算
Z Green	`.zgreen`	緑チャンネルの Z 方向の傾きを計算
Z Blue	`.zblue`	青チャンネルの Z 方向の傾きを計算
Z Alpha	`.zalpha`	アルファチャンネルの Z 方向の傾きを計算
Z RGB Average	`.zrgbaverage`	RGB 平均の Z 方向の傾きを計算
Z RGBA Average	`.zaverage`	RGBA 平均の Z 方向の傾きを計算
Neutral	`.neutral`	このチャンネルを Zero Point の値に固定 (傾きを計算しない)
One	`.one`	このチャンネルを 1 に固定
Zero	`.zero`	このチャンネルを 0 に固定

Green `.green` 🟩

緑チャンネルの傾き計算方法

項目	内部名	説明
Horizontal Luminance	`.hluminance`	輝度値の水平方向の傾きを計算
Horizontal Red	`.hred`	赤チャンネルの水平方向の傾きを計算
Horizontal Green	`.hgreen`	緑チャンネルの水平方向の傾きを計算
Horizontal Blue	`.hblue`	青チャンネルの水平方向の傾きを計算
Horizontal Alpha	`.halpha`	アルファチャンネルの水平方向の傾きを計算
Horizontal RGB Average	`.hrgbaverage`	RGB 平均の水平方向の傾きを計算
Horizontal RGBA Average	`.haverage`	RGBA 平均の水平方向の傾きを計算
Vertical Luminance	`.vluminance`	輝度値の垂直方向の傾きを計算
Vertical Red	`.vred`	赤チャンネルの垂直方向の傾きを計算
Vertical Green	`.vgreen`	緑チャンネルの垂直方向の傾きを計算
Vertical Blue	`.vblue`	青チャンネルの垂直方向の傾きを計算
Vertical Alpha	`.valpha`	アルファチャンネルの垂直方向の傾きを計算
Vertical RGB Average	`.vrgbaverage`	RGB 平均の垂直方向の傾きを計算
Vertical RGBA Average	`.vaverage`	RGBA 平均の垂直方向の傾きを計算
Z Luminance	`.zluminance`	輝度値の Z 方向の傾きを計算
Z Red	`.zred`	赤チャンネルの Z 方向の傾きを計算
Z Green	`.zgreen`	緑チャンネルの Z 方向の傾きを計算
Z Blue	`.zblue`	青チャンネルの Z 方向の傾きを計算
Z Alpha	`.zalpha`	アルファチャンネルの Z 方向の傾きを計算
Z RGB Average	`.zrgbaverage`	RGB 平均の Z 方向の傾きを計算
Z RGBA Average	`.zaverage`	RGBA 平均の Z 方向の傾きを計算
Neutral	`.neutral`	このチャンネルを Zero Point の値に固定 (傾きを計算しない)
One	`.one`	このチャンネルを 1 に固定
Zero	`.zero`	このチャンネルを 0 に固定

Blue `.blue` 🟦

青チャンネルの傾き計算方法

項目	内部名	説明
Horizontal Luminance	`.hluminance`	輝度値の水平方向の傾きを計算
Horizontal Red	`.hred`	赤チャンネルの水平方向の傾きを計算
Horizontal Green	`.hgreen`	緑チャンネルの水平方向の傾きを計算
Horizontal Blue	`.hblue`	青チャンネルの水平方向の傾きを計算
Horizontal Alpha	`.halpha`	アルファチャンネルの水平方向の傾きを計算
Horizontal RGB Average	`.hrgbaverage`	RGB 平均の水平方向の傾きを計算
Horizontal RGBA Average	`.haverage`	RGBA 平均の水平方向の傾きを計算
Vertical Luminance	`.vluminance`	輝度値の垂直方向の傾きを計算
Vertical Red	`.vred`	赤チャンネルの垂直方向の傾きを計算
Vertical Green	`.vgreen`	緑チャンネルの垂直方向の傾きを計算
Vertical Blue	`.vblue`	青チャンネルの垂直方向の傾きを計算
Vertical Alpha	`.valpha`	アルファチャンネルの垂直方向の傾きを計算
Vertical RGB Average	`.vrgbaverage`	RGB 平均の垂直方向の傾きを計算
Vertical RGBA Average	`.vaverage`	RGBA 平均の垂直方向の傾きを計算
Z Luminance	`.zluminance`	輝度値の Z 方向の傾きを計算
Z Red	`.zred`	赤チャンネルの Z 方向の傾きを計算
Z Green	`.zgreen`	緑チャンネルの Z 方向の傾きを計算
Z Blue	`.zblue`	青チャンネルの Z 方向の傾きを計算
Z Alpha	`.zalpha`	アルファチャンネルの Z 方向の傾きを計算
Z RGB Average	`.zrgbaverage`	RGB 平均の Z 方向の傾きを計算
Z RGBA Average	`.zaverage`	RGBA 平均の Z 方向の傾きを計算
Neutral	`.neutral`	このチャンネルを Zero Point の値に固定 (傾きを計算しない)
One	`.one`	このチャンネルを 1 に固定
Zero	`.zero`	このチャンネルを 0 に固定

Alpha `.alpha` 🔅

アルファチャンネルの傾き計算方法

項目	内部名	説明
Horizontal Luminance	`.hluminance`	輝度値の水平方向の傾きを計算
Horizontal Red	`.hred`	赤チャンネルの水平方向の傾きを計算
Horizontal Green	`.hgreen`	緑チャンネルの水平方向の傾きを計算
Horizontal Blue	`.hblue`	青チャンネルの水平方向の傾きを計算
Horizontal Alpha	`.halpha`	アルファチャンネルの水平方向の傾きを計算
Horizontal RGB Average	`.hrgbaverage`	RGB 平均の水平方向の傾きを計算
Horizontal RGBA Average	`.haverage`	RGBA 平均の水平方向の傾きを計算
Vertical Luminance	`.vluminance`	輝度値の垂直方向の傾きを計算
Vertical Red	`.vred`	赤チャンネルの垂直方向の傾きを計算
Vertical Green	`.vgreen`	緑チャンネルの垂直方向の傾きを計算
Vertical Blue	`.vblue`	青チャンネルの垂直方向の傾きを計算
Vertical Alpha	`.valpha`	アルファチャンネルの垂直方向の傾きを計算
Vertical RGB Average	`.vrgbaverage`	RGB 平均の垂直方向の傾きを計算
Vertical RGBA Average	`.vaverage`	RGBA 平均の垂直方向の傾きを計算
Z Luminance	`.zluminance`	輝度値の Z 方向の傾きを計算
Z Red	`.zred`	赤チャンネルの Z 方向の傾きを計算
Z Green	`.zgreen`	緑チャンネルの Z 方向の傾きを計算
Z Blue	`.zblue`	青チャンネルの Z 方向の傾きを計算
Z Alpha	`.zalpha`	アルファチャンネルの Z 方向の傾きを計算
Z RGB Average	`.zrgbaverage`	RGB 平均の Z 方向の傾きを計算
Z RGBA Average	`.zaverage`	RGBA 平均の Z 方向の傾きを計算
Neutral	`.neutral`	このチャンネルを Zero Point の値に固定 (傾きを計算しない)
One	`.one`	このチャンネルを 1 に固定
Zero	`.zero`	このチャンネルを 0 に固定

Method `.method` 🧮

傾き計算に使う隣接ピクセルの選び方

項目	内部名	説明
Use Previous And Current	`.prevcur`	前のピクセルと現在のピクセルを使って傾きを計算 (後退差分)
Use Current And Next	`.curnext`	現在のピクセルと次のピクセルを使って傾きを計算 (前進差分)
Use Previous And Next	`.prevnext`	前のピクセルと次のピクセルを使って傾きを計算 (中心差分、最も対称的)

Zero Point `.zeropoint` 🎯

傾きが 0 のときに出力する基準値 (8-bit はデフォルト 0.5、32-bit Float は 0):

Zero Point: Zero Point (傾きゼロの基準値) — 傾きが 0 のときに出力する値で、中点のように働きます。8 ビット画像 (0 から 1) の傾きには正負があるため、デフォルトは 0.5 (中央) です。Pixel Format を 32-bit Float に設定する場合は 0 にし、ビューアを Normalized Split モードで確認します。

Strength `.strength` 💪

傾きを強調する倍率 (高くするほど傾きが強調される):

Strength: Strength (強度倍率) — 出力の傾き値に掛ける倍率です。値を大きくするほど傾きが強調され、弱い勾配まで現れやすくなります。ノーマルマップの凹凸の深さ調整にも使います。

Sample Step `.offset` 📏

傾きを評価するサンプル参照距離 (大きくするほど滑らかな傾き):

Sample Step: Sample Step (サンプル参照距離) — 各ピクセルから何ピクセル離れた点を比較して傾きを評価するか。単位がピクセルのとき、値 3 なら 3 ピクセル離れた点を参照してエッジ (傾き) を探します。大きくすると太く滑らかな傾き、小さくすると細かい傾きが得られます。

Sample Step Unit `.offsetunit` 📐

サンプル距離の単位:

Sample Step Unit: Sample Step Unit (距離単位) — Sample Step で指定した距離の単位を設定します。ピクセル単位なら解像度依存、画像比率の単位なら解像度に依存しない見た目に保てます。

Extend `.extend` 🔄

画像端での傾きの扱い

項目	内部名	説明
Hold	`.hold`	端では傾きをクランプ (端のピクセル値を保持)
Zero	`.zero`	端では傾きを 0 にする
Repeat	`.repeat`	画像が繰り返し (タイル状) になっているものとして傾きを計算 (下端からはみ出す傾きが上端に現れる)
Mirror	`.mirror`	画像が鏡像で繰り返しているものとして傾きを計算

実践アイデア 💡

Example 1: 高さマップから法線生成 🗺️

Noise TOP → Slope TOP → Phong MAT (Bump/Normal Map) → Geometry COMP

Noise TOP で作った高さマップ (ハイトマップ) を Slope TOP に通し、水平・垂直方向の傾きから法線情報を持つノーマルマップを生成するフロー。Phong MAT のバンプ / ノーマルマップ入力に渡すことで、ポリゴンを増やさずに表面の凹凸をライティングで表現できます。地形・水面・布の質感作りで頻出のパターンです。

Noise TOP で凹凸の元となる高さマップを作成し Slope TOP に接続
Red = Horizontal Luminance、Green = Vertical Luminance に設定 (水平・垂直の傾きを RG に格納)
Blue = One、Alpha = One に設定 (Z 成分とアルファを固定)
Strength で凹凸の深さを調整、Pixel Format を 16-bit float 以上にして精度を確保
出力を Phong MAT のノーマルマップ入力に接続してライティング

Example 2: 明るさ勾配でエッジを検出 ✏️

Movie File In TOP → Monochrome TOP → Slope TOP → Level TOP → Out TOP

実写映像の明るさの勾配 (傾き) を使って輪郭を取り出すフロー。Monochrome TOP で輝度に変換した後、Slope TOP で水平・垂直の傾きを計算すると、明るさが急に変化する場所 = エッジが強い値として現れます。微分フィルタ的なエッジ検出で、Edge TOP とは違う質感の線が得られます。

Movie File In TOP に映像を読み込み Monochrome TOP で輝度に変換
Slope TOP に接続し Red = Horizontal Luminance、Green = Vertical Luminance に設定
Method = Use Previous And Next (中心差分) で対称的なエッジに
Strength を上げて弱い輪郭まで強調、Zero Point は 0.5 のまま
後段の Level TOP でコントラストを締めて Out TOP に渡す

Info情報 📊

Slope 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 を上げて弱い傾きを強調する (傾きが小さいと Zero Point 付近に潰れて見えない)
Pixel Format を 32-bit float に変更し、Zero Point を 0 にしてビューアを Normalized Split モードで確認
入力が平坦すぎる場合は前段に Noise TOP 等で凹凸のある高さマップを用意
Sample Step を上げて参照距離を広げ、緩やかな傾きを拾えるようにする

❌ Problem: ノーマルマップとして使うと凹凸の向きが逆になる
✅ Solution:

Red / Green の Horizontal / Vertical の割り当てを入れ替える (法線の XY が反転している)
Method を Use Previous And Current と Use Current And Next で切り替えて傾きの符号を反転させる
後段の Level TOP で該当チャンネルを反転させる
シェーダ側でノーマルの Y 成分の符号を反転 (DirectX 系と OpenGL 系で Y の向きが異なるため)

❌ Problem: 傾きにノイズや細かいギザギザが乗る
✅ Solution:

前段に Blur TOP を挟んで入力を軽くぼかしてから傾きを計算
Sample Step を上げて細かいノイズより大きな傾きを優先
Strength を下げる (上げすぎると入力ノイズの傾きまで増幅される)
入力を高ビット (16-bit / 32-bit float) フォーマットにして量子化由来の段差を減らす

❌ Problem: 画像の端だけ不自然な傾きが出る
✅ Solution:

Extend を Hold に設定して端の傾きをクランプ
タイル状に繰り返す素材なら Extend = Repeat、左右対称素材なら Mirror を選択
端の影響を出したくない場合は Extend = Zero で端の傾きを 0 にする
後段の Crop TOP で端を切り落とす

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

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

概要 📖 – 傾きから輪郭を抽出

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Slope Page 📋

Red `.red` 🟥

Green `.green` 🟩

Blue `.blue` 🟦

Alpha `.alpha` 🔅

Method `.method` 🧮

Zero Point `.zeropoint` 🎯

Strength `.strength` 💪

Sample Step `.offset` 📏

Sample Step Unit `.offsetunit` 📐

Extend `.extend` 🔄

実践アイデア 💡

Example 1: 高さマップから法線生成 🗺️

Example 2: 明るさ勾配でエッジを検出 ✏️

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

テクスチャ情報 🖼️

クック情報 ⚙️

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

概要 📖 – 傾きから輪郭を抽出

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Slope Page 📋

Red .red 🟥

Green .green 🟩

Blue .blue 🟦

Alpha .alpha 🔅

Method .method 🧮

Zero Point .zeropoint 🎯

Strength .strength 💪

Sample Step .offset 📏

Sample Step Unit .offsetunit 📐

Extend .extend 🔄

実践アイデア 💡

Example 1: 高さマップから法線生成 🗺️

Example 2: 明るさ勾配でエッジを検出 ✏️

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

テクスチャ情報 🖼️

クック情報 ⚙️

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

Red `.red` 🟥

Green `.green` 🟩

Blue `.blue` 🟦

Alpha `.alpha` 🔅

Method `.method` 🧮

Zero Point `.zeropoint` 🎯

Strength `.strength` 💪

Sample Step `.offset` 📏

Sample Step Unit `.offsetunit` 📐

Extend `.extend` 🔄