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

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

概要 📖 – ピクセル置換ベースのテクスチャ歪み TOP

Displace TOPは、Source Image のピクセルを Displace Image の色値に応じて XY (および Z) 方向にずらして再配置することでテクスチャを歪ませる TOPです。Source の Red / Green / Blue / Alpha チャンネルを Horizontal / Vertical / Z 方向の変位ソースとして個別に割当て、Source Midpoint・Displace Weight・Offset で歪みの強さや基準点を制御できます。

主な用途 🎯

ノイズマップ駆動の水面・煙・布のような有機的歪みエフェクトの生成
ヒート歪み (陽炎) や水面屈折のリアルタイムシミュレーション
グリッチ風ピクセルシャッフル・データモッシュ風表現
Feedback TOP と組み合わせたフラクタル的歪みアニメーション
UV マップ駆動の任意テクスチャ再サンプリング (ジオメトリ歪曲・歪んだミラー等)

データフロー 🔄

入力1: Source Image (歪ませたい元テクスチャ) / 入力2: Displace Image (変位マップ)
 ↓
Horizontal / Vertical / Z Source でチャンネル割当 (デフォルト: R→X, G→Y, B→Z)
 ↓
Source Midpoint で基準点・Displace Weight でスケール
 ↓
Offset / Offset Weight で最終サンプリング座標を補正
 ↓
出力: 歪ませた画像

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Displace Page 📋

Resolution Source `.resolutionsource` 🖼️

出力画像の解像度をどちらの入力から決定するか (Common Page で上書き可能)

項目	内部名	説明
Source Image	`.source`	Source Image (入力1) と同じ解像度を出力解像度とする
Displace Image	`.displace`	Displace Image (入力2) と同じ解像度を出力解像度とする

Horizontal Source `.horzsource` ↔️

Displace Image のどのチャンネルを水平方向 (X) の変位ソースに使うか (デフォルト: Red)

項目	内部名	説明
Red	`.red`	Displace Image の R チャンネル値を水平変位に使用 (デフォルト)
Green	`.green`	Displace Image の G チャンネル値を水平変位に使用
Blue	`.blue`	Displace Image の B チャンネル値を水平変位に使用
Alpha	`.alpha`	Displace Image の A チャンネル値を水平変位に使用
None	`.none`	水平方向の変位を無効化

Vertical Source `.vertsource` ↕️

Displace Image のどのチャンネルを垂直方向 (Y) の変位ソースに使うか (デフォルト: Green)

項目	内部名	説明
Red	`.red`	Displace Image の R チャンネル値を垂直変位に使用
Green	`.green`	Displace Image の G チャンネル値を垂直変位に使用 (デフォルト)
Blue	`.blue`	Displace Image の B チャンネル値を垂直変位に使用
Alpha	`.alpha`	Displace Image の A チャンネル値を垂直変位に使用
None	`.none`	垂直方向の変位を無効化

Z Source `.zsource` 🌐

Displace Image のどのチャンネルを Z 方向の変位ソースに使うか (デフォルト: Blue)

項目	内部名	説明
Red	`.red`	Displace Image の R チャンネル値を Z 方向変位に使用
Green	`.green`	Displace Image の G チャンネル値を Z 方向変位に使用
Blue	`.blue`	Displace Image の B チャンネル値を Z 方向変位に使用 (デフォルト)
Alpha	`.alpha`	Displace Image の A チャンネル値を Z 方向変位に使用
None	`.none`	Z 方向の変位を無効化 (純 2D 歪み)

Displacement Tuning 🎚️

Source Midpoint .midpoint 🎯
「変位ゼロ」とみなす色値。この値より下のピクセルは左/下/前方向へ、上のピクセルは右/上/後方向へオフセットされる。8 ビット系の中間グレー 0.5 がデフォルト

Displace Weight .displaceweight ⚖️
Displace Image による変位ベクトルのスケーリング係数。値を大きくするほど Horizontal / Vertical / Z Source で作られたサンプル方向に沿ってより遠くから Source Image のピクセルを取得する

Aspect Correct .aspectcorrect 📐
オンにすると Source Image の元アスペクト比に基づいて変位オフセットをアスペクト補正する。ウルトラワイドテクスチャで歪みが縦横で伸びてしまうのを防ぐ際に有用

UV Weight .uvweight 🧭
ピクセル自身の位置の影響度を 0 に近づけるほど弱める。デフォルトの 1 では Displace Image にズームインせず通常動作。0 にすると Offset / Offset Weight で定義された Source Image の単一ピクセルに対して変位がアンカーされる

Offset .offset 📍
Displace Image を参照した後に得られる座標へ加算される最終座標オフセット。先に Offset Weight で乗算されてから加算される。Source Image をサンプリングする最終 UV 座標になる

X (offsetx)
Y (offsety)

Offset Weight .offsetweight 🔢
Offset パラメータ値のスケーリング係数。0 のとき Offset は全く効かない

Extend `.extend` 🧱

サンプリング座標がタイル (画像) の端を超えた場合の処理方法

項目	内部名	説明
Hold	`.hold`	端のピクセル値をそのまま外側に延長 (デフォルト的挙動)
Zero	`.zero`	端を超えた領域は黒 (0) として扱う
Repeat	`.repeat`	端を超えると画像をタイリングで繰り返す
Mirror	`.mirror`	端で画像を鏡像反転して繰り返す

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 の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。Displace を多段適用してフラクタル的な歪みを蓄積する用途に有用

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 (背景画像) + Noise TOP (Translate アニメ) → Displace TOP → Out TOP

背景となる画像や映像を Source Image に、Noise TOP を Displace Image に渡し、Noise の Translate を時間で動かすことで水面屈折のようにリアルタイムで揺らぐ歪みエフェクトを得る基本フロー。

Movie File In TOP (または背景の Source) を Displace TOP の第 1 入力に接続
Noise TOP を作成し Type を Sparse・Monochrome を On に設定
Noise TOP の Translate に absTime.seconds * 0.2 等を Export してノイズを時間で流す
Noise TOP を Displace TOP の第 2 入力 (Displace Image) に接続
Displace Weight を小さめ (例: 0.05〜0.1) に絞って屈折感を調整

Example 2: ヒート歪み (陽炎) エフェクト 🔥

Source Movie + Noise TOP (Mono, 縦伸ばし) → Displace TOP (Vertical Source 強調) → Composite

映像入力に対し縦方向に細長く伸ばした Noise を Displace Image として与え、Vertical Source の効きを残しつつ全体オフセットを微小に保つことで地面から立ち上る陽炎風の歪みを表現する。

Source 映像を Displace TOP の第 1 入力に接続
Noise TOP を作成し Transform の Scale を sy = 0.2 程度にして縦方向に細長いノイズパターンを生成
Noise TOP の Translate ty に時間を入れて上方向に流す
Displace TOP で Horizontal Source を None または弱める、Vertical Source を Red などに固定
Displace Weight を 0.02〜0.05 程度に抑制して微弱な歪みに調整

Example 3: UV マップ駆動の任意テクスチャ再サンプリング 🗺️

Source Texture + 事前計算 UV マップ TOP → Displace TOP (UV Weight = 0) → Out

歪んだミラーや屈折ガラスのように決定論的な UV マップを Displace Image として与え、UV Weight を 0 に近づけてピクセル位置の影響を消すことで、UV マップが指示する座標から Source Image を直接サンプリングする再マッピング表現。

歪み形状を表す UV マップ (RG = X/Y 座標) を別 TOP チェーンで生成
Source Image を Displace TOP の第 1 入力、UV マップを第 2 入力に接続
UV Weight を 0 に近づけて Displace Image の絶対座標サンプリングを強める
Offset / Offset Weight でサンプリング基準位置を微調整

Info CHOP情報 📊

Displace 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:

Source Midpoint の値を確認 (デフォルト 0.5 から外れていると左右/上下の方向が反転)
Displace Image の色値範囲をチェックし、必要なら前段で Level TOP でリマップ
Horizontal Source / Vertical Source のチャンネル割当が想定通りか確認

❌ Problem: テクスチャの端で不自然な切れ目・繰り返しパターンが出る
✅ Solution:

Extend を Hold から Mirror や Repeat に切替えて端の挙動を変更
Displace Weight を小さく絞って端まで届かない範囲に変位を抑制
Source Image に余白を追加し、歪みでサンプリングされる領域を確保
Displace Image を前段で Blur TOP でぼかしエッジの不連続を緩和

❌ Problem: 歪みが弱すぎる / 強すぎる
✅ Solution:

Displace Weight を主スケール調整に使用 (一次的な強度コントロール)
Offset Weight が 0 になっていないか確認 (0 だと Offset が全く効かない)
Displace Image のコントラストを Level TOP で先に調整して歪みのダイナミックレンジを変更
ウルトラワイド素材で歪みが縦横で不均衡になる場合は Aspect Correct を On に

❌ Problem: パフォーマンスが重くフレームレートが落ちる
✅ Solution:

Common Page の Output Resolution を Half / Quarter に下げて後段で拡大
Displace Image 側の解像度を Noise TOP 等で先に下げてから渡す
Pixel Format を 8-bit fixed (RGBA) まで下げる (HDR 不要なら)
Passes を増やしすぎていないか確認 (多段 Displace は指数的にコスト増)

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – ピクセル置換ベースのテクスチャ歪み TOP

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Displace Page 📋

Resolution Source .resolutionsource 🖼️

Horizontal Source .horzsource ↔️

Vertical Source .vertsource ↕️

Z Source .zsource 🌐

Displacement Tuning 🎚️

Extend .extend 🧱

Common Page 🔧

Output Resolution .outputresolution 🖼️

Resolution .resolution 📐

Resolution Menu .resmenu 📋

Use Global Res Multiplier .resmult 🔢

Output Aspect .outputaspect 📏

Aspect .aspect 📐

Input Smoothness .inputfiltertype 🎚️

Fill Viewer .fillmode 🖥️

Viewer Smoothness .filtertype 🎛️

Passes .npasses 🔁

Channel Mask .chanmask 🎨

Pixel Format .format 🎨