概要 📖 – 二枚目の画像で歪ませる
Remap TOPは、二枚目の入力の色を座標として一枚目の入力の画素を引き直し、画像を歪ませる TOPです。二枚目の入力の各チャンネル（赤・緑など）を横方向・縦方向・奥行きのワープ量として使い、対応する一枚目の画素を取得します。
主な用途 🎯
- 二枚目の画像の色を座標として一枚目の画素を引き直す画像ワープ
- レンズ歪み・魚眼補正など事前計算したマップによる画像補正
- プロジェクションマッピングでの投影面に合わせた幾何補正
- 波紋・ガラス越し・水面などの屈折表現
- 事前生成したマップでの高速なテクスチャ座標変換
データフロー 🔄
入力1: ワープ対象の画像
入力2: 座標マップ画像（色＝座標）
↓
各画素で入力2の色を読み取り対応する入力1の画素を取得
↓
出力: 歪んだ画像
初心者の方は、以下日本語書籍も手元にあると安心です。
実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！
パラメータ解説 ⚙️
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
カメラ映像のレンズ歪みを、事前に生成した補正用座標マップを二枚目の入力に与えて打ち消す基本フロー。毎フレーム計算するのではなくマップを引くだけなので高速に動作します。
- Movie File In TOP で歪んだカメラ映像を読み込み一枚目の入力に接続
- 補正用の座標マップ画像を二枚目の入力に接続
- Horizontal Source と Vertical Source を赤・緑チャンネルに割り当て
- 出力で歪みが補正された映像を確認
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 🎯
- 前処理: Noise TOP、GLSL TOP、Cross TOP
- 後処理: Composite TOP、Blur TOP、Feedback TOP
Info情報 📊
Remap TOP は Info CHOP / Info DAT による詳細情報取得に対応しています。
TOP固有情報 🖼️
resx: TOP の出力解像度 X (ピクセル単位)resy: TOP の出力解像度 Y (ピクセル単位)aspectx: アスペクト比 Xaspecty: アスペクト比 Ydepth: 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 をかけて継ぎ目をぼかす
参考資料 📚
その他 🔗
- TouchDesigner Wiki — Category:TOPs
- TouchDesigner Wiki — Pixel Formats 解説
- TouchDesigner Wiki ホーム
- TouchDesigner 公式 Forum
- Facebook — TouchDesigner Help Group
公式リソース 📖
関連オペレータ 🔗
