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

2026/6/19

※当サイトにはプロモーションリンクが含まれます。

Remap TOP の画像ワープ機能を示す図

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

概要 📖 – 二枚目の画像で歪ませる

Remap TOPは、二枚目の入力の色を座標として一枚目の入力の画素を引き直し、画像を歪ませる TOPです。二枚目の入力の各チャンネル（赤・緑など）を横方向・縦方向・奥行きのワープ量として使い、対応する一枚目の画素を取得します。

主な用途 🎯

  • 二枚目の画像の色を座標として一枚目の画素を引き直す画像ワープ
  • レンズ歪み・魚眼補正など事前計算したマップによる画像補正
  • プロジェクションマッピングでの投影面に合わせた幾何補正
  • 波紋・ガラス越し・水面などの屈折表現
  • 事前生成したマップでの高速なテクスチャ座標変換

データフロー 🔄

入力1: ワープ対象の画像
入力2: 座標マップ画像（色＝座標）
 ↓
各画素で入力2の色を読み取り対応する入力1の画素を取得
 ↓
出力: 歪んだ画像
CHECK

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

まる。
まる。

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

パラメータ解説 ⚙️

Remap Page 📁

解像度の基準 .resolutionsource 📐

出力の解像度・奥行きをどちらの入力に合わせるか指定するメニューパラメータ

項目 内部名 説明
Input 1 .input1 一枚目の入力（ワープ対象）の解像度を使用
Input2 .input2 二枚目の入力（座標マップ）の解像度を使用

ワープ元チャンネル .horzsource 🎛️

二枚目の入力のどの色チャンネルを横・縦・奥行きのワープ量として使うか選ぶメニューパラメータ

項目 内部名 説明
Red .red 二枚目の入力の赤チャンネルを横ワープ元に使用
Green .green 二枚目の入力の緑チャンネルを横ワープ元に使用
Blue .blue 二枚目の入力の青チャンネルを横ワープ元に使用
Alpha .alpha 二枚目の入力のアルファチャンネルを横ワープ元に使用
None .none 横方向のワープを適用しない

ワープ方向と補間 🔄

Flip Horizontal Direction .fliphorz ↔️
– Flip Horizontal Direction (横方向の反転) — 横ワープの向きを逆にします。
– 横ワープ値が 0 のとき、一枚目の入力の最も右の列の画素を取得します。

Flip Vertical Direction .flipvert ↕️
– Flip Vertical Direction (縦方向の反転) — 縦ワープの向きを逆にします。
– 縦ワープ値が 0 のとき、一枚目の入力の最も上の行の画素を取得します。

Flip Z Direction .flipz 🔁
– Flip Z Direction (奥行きの反転) — 奥行きワープの向きを逆にします。
– 奥行きワープ値が 0 のとき、一枚目の入力の最も奥のスライスの画素を取得します。

範囲外の扱い .extend 📏

二枚目の入力の値が 0〜1 の範囲外になったとき、一枚目の入力から何を返すか決めるメニューパラメータ

項目 内部名 説明
Hold .hold 最も近い端の画素値を返す
Zero .zero ゼロを返す
Repeat .repeat テクスチャを繰り返す
Mirror .mirror テクスチャを反転して繰り返す

補間方法 .interp ✨

一枚目の入力をサンプリングする際の補間方法を選ぶメニューパラメータ

項目 内部名 説明
Linear .linear テクスチャのサンプリングに線形補間を行う
Cubic .cubic 2D テクスチャは双三次補間、3D テクスチャは三次元三次補間を行う

実践アイデア 💡

Example 1: レンズ歪みの補正 🎯

Movie File In TOP → Remap TOP (補正マップを入力2) → Out TOP

カメラ映像のレンズ歪みを、事前に生成した補正用座標マップを二枚目の入力に与えて打ち消す基本フロー。毎フレーム計算するのではなくマップを引くだけなので高速に動作します。

  1. Movie File In TOP で歪んだカメラ映像を読み込み一枚目の入力に接続
  2. 補正用の座標マップ画像を二枚目の入力に接続
  3. Horizontal Source と Vertical Source を赤・緑チャンネルに割り当て
  4. 出力で歪みが補正された映像を確認

Example 2: 波紋による屈折表現 🌊

Noise TOP → Remap TOP (一枚目の入力をワープ) → Composite TOP

Noise TOP で生成した滑らかな揺らぎマップを二枚目の入力に与え、背景画像を水面のように屈折させる演出。揺らぎマップを時間で動かすと、ガラス越しや水中の表現になります。

  • ワープ対象の背景画像を一枚目の入力に接続
  • Noise TOP の揺らぎマップを二枚目の入力に接続
  • Extend を Mirror にして端の繰り返しを目立たなくする

Example 3: 投影面への幾何補正 📽️

Render TOP → Remap TOP (ワープマップで補正) → Out TOP

プロジェクションマッピングで、投影対象の形状に合わせた座標マップを二枚目の入力に与え、映像を投影面にフィットさせる用途。キャリブレーションで作ったマップを引くだけで毎フレーム適用します。

  • 投影したい映像を一枚目の入力に接続
  • キャリブレーション済みの座標マップを二枚目の入力に接続
  • Interpolation を Cubic にして補間品質を高める

関連オペレータ 🔗

類似機能OP 🔍

  • Displace TOP — 二枚目の入力でオフセット量を与えて画素をずらす近縁のワープ
  • Lookup TOP — 画素値を索引として別画像の色を引く色変換系

組み合わせ推奨OP 🔄

  • Noise TOP — 前段で揺らぎマップを生成しワープ源にする
  • GLSL TOP — 任意の座標マップをシェーダで生成してワープ源にする
  • Cross TOP — 二つの座標マップを混ぜて滑らかにワープを切り替え
  • Feedback TOP — 前フレームへフィードバックして連続的な歪み蓄積
  • Composite TOP — 後段でワープ結果を背景と合成

前処理・後処理TOP 🎯

Info情報 📊

Remap 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: 出力テクスチャの縦横比

GPU メモリ情報 💾

  • depth: 3D テクスチャの場合のスライス数（奥行き）
  • gpu_memory: このテクスチャが占有する GPU メモリ量

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

よくある問題と解決策 🔧

❌ Problem: 歪まない・結果が真っ黒になる
✅ Solution:

  • 二枚目の入力（座標マップ）が接続されているか確認
  • Horizontal Source / Vertical Source が None 以外のチャンネルに設定されているか確認
  • 座標マップの値が 0〜1 の範囲に収まっているか、前段の Level TOP で確認

❌ Problem: 歪みの向きが逆になる
✅ Solution:

  • Flip Horizontal Direction / Flip Vertical Direction の設定を切り替える
  • 座標マップ側のチャンネル割り当て（赤＝横・緑＝縦）が想定と合っているか確認

❌ Problem: 端にノイズや繰り返しの継ぎ目が出る
✅ Solution:

  • Extend を Hold または Mirror に変更して端の扱いを調整
  • Interpolation を Cubic にしてサンプリングを滑らかにする
  • 後段で Blur TOP をかけて継ぎ目をぼかす

参考資料 📚

その他 🔗

公式リソース 📖

関連オペレータ 🔗

関連まとめ 🔗

ファミリー別一覧 📑

厳選オペレータ ⭐

逆引き 🔎


この記事はLLMと共に内容を執筆、更新しています。
なるべく正確な情報を心掛けていますが、最新バージョンとの項目差異など情報の不一致を見つけたらXもしくはInsta、メールなどから管理者までご連絡いただけると嬉しいです🫠


まる。

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

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

日常を垂れ流すだけのアカウント
Instagram：＠malmal0v0

発信を今後がんばる予定のアカウント
Youtube:https://www.youtube.com/@malmal0v0

まる。をフォローする
その他の記事はこちら
今流行りのクリエイティブツール、Touchdesignerとは？業界の現役ちいかわエンジニアができることを解説ッ
トカゲのポーズ（ウッターナ・プリシュターサナ）のやり方｜効果・コツ・注意点【ヨガ】
針の糸通しのポーズ（パールシュヴァ・バーラーサナ）のやり方｜効果・コツ・注意点【ヨガ】
ウサギのポーズ（ササンガーサナ）のやり方｜効果・コツ・注意点【ヨガ】
スフィンクスのポーズ（サーランバ・ブジャンガーサナ）のやり方｜効果・コツ・注意点【ヨガ】

タイトルとURLをコピーしました