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

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

概要 📖 – グラデーション生成 TOP

Ramp TOPは、縦・横・放射・円のグラデーションテクスチャを生成し、色のキーフレーム補間でなめらかな色の帯を作り出す TOPです。Type で Vertical / Horizontal / Radial / Circular を選択でき、DAT に書いたカラーキーを Step / Linear / Ease-in,Ease-out / Hermite で補間してグラデーションを生成します。

主な用途 🎯

背景・空・水面用のなめらかなグラデーションテクスチャの生成
マスク・ビネット・フェード用のグレースケールグラデーション作成
DAT テーブルから多色グラデーション (カラーキー) を定義した色見本テクスチャ
放射状・円状グラデーションによるスポットライト・ハイライト表現
UV ルックアップ用カラーランプ (他 TOP のカラーマッピング元) の作成

データフロー 🔄

入力: なし / 任意の TOP (合成元)
 ↓
DAT のカラーキーで色を定義
 ↓
Type・Phase・Period でグラデーション形状を決定
 ↓
Output ページで入力 TOP との合成方式を選択
 ↓
出力: グラデーションテクスチャ

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Ramp Page 📋

DAT `.dat` 🗒️

グラデーションの色を定義する参照 DAT:

DAT: DAT (参照テーブル) — グラデーションのカラーキー (位置・色) を定義した DAT のパスを指定します。各行が 1 つの色キーフレームに対応します

Type `.type` 🎛️

グラデーションの方向・形状の種類

項目	内部名	説明
Vertical	`.vertical`	縦方向のグラデーション (下から上へ色が変化)
Horizontal	`.horizontal`	横方向のグラデーション (左から右へ色が変化)
Radial	`.radial`	中心点から放射状に広がるグラデーション
Circular	`.circular`	中心点を回るように円周方向へ変化するグラデーション

形状・位相パラメータ 📐

Position .position 📍
Position (中心位置) — Radial / Circular タイプの中心点を設定します。縦・横タイプには影響しません

Phase .phase 🔀
Phase (位相オフセット) — グラデーションの開始位置をずらします。色の帯全体をスライドさせる用途に使います

Period .period 📏
Period (周期) — グラデーションの長さを調整します。UV のスケーリングに似ており、値を小さくすると色の帯が圧縮されて繰り返しが密になります

Curve Tension .tension 〰️
Curve Tension (曲線の張り) — Hermite 補間使用時のみ有効で、補間に使う Hermite 曲線の張りバイアスを調整します

Anti-Alias .antialias 🪄
Anti-Alias (アンチエイリアス) — Radial / Circular タイプのエッジのジャギー (ギザギザ) を抑える平滑化レベルを設定します

Dither .dither ✨
Dither (ディザリング) — 精度限界によるバンディング (色の段差) やアーティファクトを抑えるため、グラデーションにディザを加えます

Multiply RGB by Alpha .multrgbbyalpha 🔢
Multiply RGB by Alpha (アルファ乗算) — 画像をプリマルチプライ (RGB にアルファを乗算) します

Extend Left `.extendleft` ⬅️

Extend Left (左端の延長) — 定義範囲を超えた左側のピクセル値の扱いを設定します

項目	内部名	説明
Hold	`.hold`	端の値をそのまま保持して延長
Black	`.blockclamptoblack`	端より外を黒にする (RGBA = 0,0,0,1)
Zero	`.zero`	端より外をゼロにする (RGBA = 0,0,0,0)
Repeat	`.repeat`	端より外で画像を繰り返す
Mirror	`.mirror`	端より外で画像を鏡像反転して繰り返す

Extend Right `.extendright` ➡️

Extend Right (右端の延長) — 定義範囲を超えた右側のピクセル値の扱いを設定します

項目	内部名	説明
Same as Left	`.sameasleft`	Extend Left と同じ設定を使う
Hold	`.hold`	端の値をそのまま保持して延長
Black	`.black`	端より外を黒にする (RGBA = 0,0,0,1)
Zero	`.zero`	端より外をゼロにする (RGBA = 0,0,0,0)
Repeat	`.repeat`	端より外で画像を繰り返す
Mirror	`.mirror`	端より外で画像を鏡像反転して繰り返す

Interpolate Notches `.interp` 📈

Interpolate Notches (色キー間の補間) — グラデーションの色キーフレーム間をどう補間するかを選択します

項目	内部名	説明
Step	`.step`	補間なし。値から値へ階段状に切り替わる
Linear	`.linear`	キーフレーム間を直線で補間
Ease-in, Ease-out	`.easeineaseout`	キーフレーム間を緩急 (イーズ) を付けて補間
Hermite	`.hermite`	Hermite 曲線で補間 (Curve Tension で張りを調整)

Fit Aspect `.fitaspect` 🖼️

Fit Aspect (アスペクト合わせ) — Radial / Circular タイプをアスペクト比に応じてどう収めるかを設定します

項目	内部名	説明
Fill	`.fill`	テクスチャ全体を埋めるように引き伸ばす
Fit Horizontal	`.fithorz`	横幅に合わせて収める
Fit Vertical	`.fitvert`	縦幅に合わせて収める
Fit Best	`.fitbest`	アスペクト保持で最も収まりの良いサイズに合わせる

Output Page 📤

Comp Over Input `.compoverinput` 🧩

入力 TOP との合成の有効化と順序:

Comp Over Input: Comp Over Input (入力に合成) — On にすると入力画像とグラデーションを合成します。Off ではグラデーションのみを出力します
Swap Order: Swap Order (合成順序の入替) — 入力とグラデーションの合成順序を入れ替えます

Operation `.operand` 🎨

Operation (合成演算) — 入力画像とグラデーションをどの合成方式 (ブレンドモード) で重ねるかを選択します

項目	内部名	説明
Add	`.add`	input1.rgba + input2.rgba (加算)
Atop	`.atop`	(input1.rgba * input2.a) + (input2.rgba * (1.0 – input1.a))
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)。アルファは常に 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.0, 1.0)
Inside Luminance	`.insideluminance`	輝度を使った Inside 合成
Inverse	`.inverse`	反転合成
Lighter Color	`.lightercolor`	明るい方のカラーを採用
Luminance Difference	`.luminancedifference`	輝度差分
Maximum	`.maximum`	各チャンネルで大きい方の値を採用
Minimum	`.minimum`	各チャンネルで小さい方の値を採用
Multiply	`.multiply`	乗算
Negate	`.negate`	ネゲート
Outside	`.outside`	input1.rgba * (1.0 – input2.a)
Outside Luminance	`.outsideluminance`	輝度を使った Outside 合成
Over	`.over`	(input2.rgba * (1.0 – input1.a)) + input1.rgba
Overlay	`.overlay`	オーバーレイ
Pinlight	`.pinlight`	ピンライト
Reflect	`.reflect`	リフレクト
Screen	`.screen`	1.0 – ((1.0 – input1.rgba) * (1.0 – input2.rgba)) (スクリーン)
Soft Light	`.softlight`	ソフトライト
Linear Light	`.linearlight`	リニアライト
Stencil Luminance	`.stencilluminance`	輝度を使ったステンシル合成
Subtract	`.subtract`	input1.rgba – input2.rgba (減算)
Subtractive	`.subtractive`	サブトラクティブ
Under	`.under`	(input1.rgba * (1.0 – input2.a)) + input2.rgba
Vivid Light	`.vividlight`	ビビッドライト
Xor	`.xor`	(input1.rgba * (1.0 – input2.a)) + (input2.rgba * (1.0 – input1.a))
Y Film	`.yfilm`	Y フィルム
Z Film	`.zfilm`	Z フィルム

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 倍

Resolution `.resolution` 📐

カスタム解像度の幅・高さ指定 (生成系 TOP はこの値でサイズが決まる):

Resolution W: 出力幅 (ピクセル単位)。Ramp のような生成系 TOP は入力を持たないため、この値でテクスチャの大きさを決めます
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: Edit>Preferences>TOPs の Global Resolution Multiplier をこの TOP に適用するかどうか。プロトタイプを低解像度で動かしつつ最終出力で一括フル解像度化する運用に便利

Output Aspect `.outputaspect` 📏

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

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のアスペクトを継承 (伝播事故の元、非推奨)
Custom Aspect	`.custom`	`Aspect` パラメータで手動指定

Aspect `.aspect` 📐

カスタムアスペクト比の指定

項目	内部名	説明
Aspect1	`.aspect1`	横方向アスペクト値 (`Output Aspect` = Custom Aspect の時のみ有効)
Aspect2	`.aspect2`	縦方向アスペクト値 (同上)

Aspect Menu `.armenu` 📋

よく使うアスペクト比プリセットのドロップダウン:

Aspect Menu: 16:9 / 4:3 等のよく使うアスペクト比プリセットから選択できるドロップダウンメニュー

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`	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)

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)	`.rgba11float`	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: 背景グラデーションの作成 🌅

Ramp TOP (Type=Vertical, Table DAT で 2 色定義) → Composite TOP → 背景レイヤ

Ramp TOP の縦方向グラデーションで空のような背景を作り、Table DAT に上部と下部の 2 色のカラーキーを定義して Composite TOP で他レイヤの背景として合成する基本フロー。

Ramp TOP を作成し Type を Vertical に設定
Table DAT を作り上端・下端の色キーを記述して DAT パラメータに接続
Interpolate Notches を Linear または Ease-in, Ease-out にしてなめらかな色変化に
Composite TOP の背景レイヤとして Ramp TOP を接続

Example 2: ビネットマスク 🎯

Ramp TOP (Type=Radial, Mono) → Multiply TOP (映像 × マスク)

Ramp TOP の放射状グラデーションを白黒マスクとして使い、映像の中心を明るく周辺を暗く落とすビネット効果を Multiply TOP で乗算合成する用途。

Ramp TOP を作成し Type を Radial に設定
Position で中心点を画面中央に合わせ、Period で減光の広がりを調整
Anti-Alias を上げて円形エッジのジャギーを抑制
Multiply TOP で入力映像にこのマスクを乗算して周辺を減光

Example 3: UV カラーランプ 🎨

Ramp TOP (Type=Horizontal, 多色 DAT) → Lookup TOP (グレースケール → カラー)

Ramp TOP に多色のカラーキーを定義した横方向グラデーションを作り、Lookup TOP のカラーランプ入力として使うことでグレースケール画像をサーモグラフィ風の多色マッピングに変換する手法。

Ramp TOP を作成し Type を Horizontal に設定
Table DAT に複数のカラーキー (例: 青→緑→黄→赤) を定義して DAT に接続
Lookup TOP の 2 番目の入力 (ルックアップ用ランプ) にこの Ramp TOP を接続
1 番目の入力にグレースケール画像を渡してカラーマッピングを実行

Info CHOP情報 📊

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

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: エラー数

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

よくある問題と解決策 🔧

❌ Problem: グラデーションに色の段差 (バンディング) が出る
✅ Solution:

Dither を On にして段差を視覚的にぼかす
Common Page の Pixel Format を 16-bit float (RGBA) 等の高ビット深度に上げる
10-bit RGB with 2-bit Alpha フォーマットを使うと 8 ビットより段差が目立ちにくい

❌ Problem: DAT のカラーキーがグラデーションに反映されない
✅ Solution:

DAT パラメータに正しい DAT のパスが指定されているか確認
DAT の各行が位置・色の正しい列構成になっているか確認 (Table DAT で編集)
Interpolate Notches が Step だと色が階段状になるため Linear 等に切替

❌ Problem: Radial / Circular の円が縦横に潰れて楕円になる
✅ Solution:

Fit Aspect を Fit Best に設定してアスペクト比を保持
Common Page の Output Aspect を Custom Aspect にして比率を明示
正方形の解像度 (例: 1024×1024) で出力してから後段でリサイズ

❌ Problem: Radial / Circular のエッジがギザギザになる
✅ Solution:

Anti-Alias の値を上げてエッジを平滑化
Common Page の Output Resolution を上げてから後段で縮小
Common Page の Viewer Smoothness を Interpolate Pixels に設定

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – グラデーション生成 TOP

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Ramp Page 📋

DAT .dat 🗒️

Type .type 🎛️

形状・位相パラメータ 📐

Extend Left .extendleft ⬅️

Extend Right .extendright ➡️

Interpolate Notches .interp 📈

Fit Aspect .fitaspect 🖼️

Output Page 📤

Comp Over Input .compoverinput 🧩

Operation .operand 🎨

Common Page 🔧

Output Resolution .outputresolution 🖼️

Resolution .resolution 📐

Resolution Menu .resmenu 📋

Use Global Res Multiplier .resmult 🔢

Output Aspect .outputaspect 📏

Aspect .aspect 📐

Aspect Menu .armenu 📋

Input Smoothness .inputfiltertype 🎚️

Fill Viewer .fillmode 🖥️

Viewer Smoothness .filtertype 🎛️

Passes .npasses 🔁

Channel Mask .chanmask 🎨

Pixel Format .format 🎨