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

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

概要 📖 – 四隅指定による画像の透視変換ワープ

Corner Pin TOPは、入力画像の任意の四角形領域 (Extract) を別の四角形 (Pin) へマッピングし、透視変換 (パースペクティブワープ) を行う TOPです。Extract 側 4 点で「入力のどこを取り出すか」、Pin 側 4 点で「それを出力のどこに置くか」を指定し、Mapping (Bilinear / Perspective) や Grid Refinement で歪み品質を調整できます。

主な用途 🎯

プロジェクター投影時のキーストン補正 (台形歪みの補正)
プロジェクションマッピングにおける投影面の事前ワープ
映像内の四角形領域 (壁面・看板・スクリーン) への画像差し替え合成
仮想 LED ウォール・バーチャルプロダクションでの視点補正
四隅 UV による疑似 3D 透視変換エフェクト

データフロー 🔄

入力: 元画像
 ↓
Extract で入力側の抽出四隅領域を定義
 ↓
Pin で出力先の四隅配置位置を指定
 ↓
Mapping (Bilinear / Perspective) と Grid Refinement で補間
 ↓
出力: 四点変換された画像

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Extract Page 📋

Extract 四隅座標 📐

Top Left .extractp1 ↖️
入力画像から抽出する領域の左上隅の (x, y) 位置。Top Left Unit で単位を切り替えられる

Top Right .extractp2 ↗️
入力画像から抽出する領域の右上隅の (x, y) 位置。Top Right Unit で単位を切り替えられる

Bottom Left .extractp3 ↙️
入力画像から抽出する領域の左下隅の (x, y) 位置。Bottom Left Unit で単位を切り替えられる

Bottom Right .extractp4 ↘️
入力画像から抽出する領域の右下隅の (x, y) 位置。Bottom Right Unit で単位を切り替えられる

Top Left / Top Right / Bottom Left / Bottom Right Unit .extractp1unit 📏
各四隅座標値の単位を切り替えるメニューパラメータ (Fraction / Pixels / Fraction Aspect)。デフォルトでは (0, 0) が左下、(1, 1) が右上の Fraction

Extend `.extend` 🔄

抽出領域が入力画像の外にはみ出した場合の端の扱い

項目	内部名	説明
Hold	`.hold`	抽出領域の端のピクセル値をそのまま外側まで延長する
Repeat	`.repeat`	抽出領域の端で画像をタイル状に繰り返す
Mirror	`.mirror`	抽出領域の端で画像を反転させて繰り返す

Mapping `.extractmapping` 🗺️

四隅マッピング時の補間方式

項目	内部名	説明
Bilinear	`.bilinear`	四隅をバイリニア補間で結ぶ。軽量で奥行きが大きくない歪みに向く
Perspective	`.perspective`	四隅を透視変換 (パースペクティブ) で結ぶ。プロジェクションマッピング・キーストン補正など奥行きを含む変形に向く

Pin Page 📌

Pin 四隅座標 📐

Top Left .pinp1 ↖️
出力画像で抽出領域を配置する左上隅の (x, y) 位置。Top Left Unit で単位を切り替えられる

Top Right .pinp2 ↗️
出力画像で抽出領域を配置する右上隅の (x, y) 位置。Top Right Unit で単位を切り替えられる

Bottom Left .pinp3 ↙️
出力画像で抽出領域を配置する左下隅の (x, y) 位置。Bottom Left Unit で単位を切り替えられる

Bottom Right .pinp4 ↘️
出力画像で抽出領域を配置する右下隅の (x, y) 位置。Bottom Right Unit で単位を切り替えられる

Top Left / Top Right / Bottom Left / Bottom Right Unit .pinp1unit 📏
各 Pin 四隅座標値の単位を切り替えるメニューパラメータ (Fraction / Pixels / Fraction Aspect)

Grid Refinement `.gridrefine` 🔳

Extract と Pin の変形に使う内部メッシュ分割数:

Grid Refinement: Extract と Pin の変形を計算するために画像を分割する内部メッシュの分割数。値を上げるほど曲面的なワープの精度が上がるが GPU 負荷が増す。Bilinear / Perspective どちらでも品質に影響

Background Color `.bgcolor` 🎨

Background Color .bgcolor 🟦
前景画像の背後に表示される背景色。Pin の四隅を入力画像領域より内側に置いた場合や、Extend モードでカバーしきれない領域に表示される

Red (bgcolorr) — 赤チャンネル値
Green (bgcolorg) — 緑チャンネル値
Blue (bgcolorb) — 青チャンネル値
Alpha (bgcolora) — アルファチャンネル値

Pre-Multiply RGB by Alpha .premultrgbbyalpha ✖️
オンにすると Background Color の RGB 値をアルファ値で事前乗算する。Composite TOP 等で Over 合成する後段がプリマルチプライ前提のときに使う

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` パラメータで任意指定

実践アイデア 💡

Example 1: プロジェクター投影のキーストン補正 📽️

Movie File In TOP → Corner Pin TOP (Pin で投影面の四隅指定) → Window COMP (プロジェクタ出力)

プロジェクターが斜めから投影されてスクリーン上で台形に歪んでしまうケースで、Corner Pin TOP の Pin 四点を実際のスクリーン四隅に合わせて変形させ、見かけ上の長方形に戻す定番フロー。

Movie File In TOP で映像素材を入力
Corner Pin TOP の Extract 四点はデフォルト (画像全体) のままにする
Mapping を Perspective に設定し透視補間に切り替える
Pin の Top Left / Top Right / Bottom Left / Bottom Right をスクリーン上の実際の投影位置に合わせて移動
Window COMP に出力してプロジェクタで投影確認しながら微調整

Example 2: プロジェクションマッピング向け事前ワープ 🏛️

Render TOP (3D シーン) → Corner Pin TOP (各面ごとに四点指定) → Composite TOP → 出力

立体物の各面に映像を貼り付けるプロジェクションマッピングで、面ごとに Corner Pin TOP を 1 個ずつ用意して投影先の四隅に合わせ、Composite TOP で合成してから物理プロジェクターへ出す構成。

投影対象の各面に対して 1 つずつ Corner Pin TOP を配置
面ごとに Mapping を Perspective にし、Pin 四点を投影面の四隅に合わせる
面間の境界が見えないように Grid Refinement を上げて補間品質を上げる
全 Corner Pin の出力を Composite TOP でまとめて 1 枚の投影画像にする

Example 3: 映像内の看板・壁面への画像差し替え 🖼️

Movie File In TOP (背景映像) + Movie File In TOP (差し替え画像) → Corner Pin TOP (看板四隅に Pin) → Composite TOP

撮影された映像内の看板やビル壁面など四角形領域に、別の画像 / 映像を差し替え合成するシーン合成用途。Corner Pin TOP の Pin を看板四隅に合わせ、Composite TOP で背景映像と合成する。

差し替えたい素材 TOP を Corner Pin TOP の入力に接続
Corner Pin TOP の Pin 四隅を、背景映像内の看板の四隅 (画面座標) に一致させる
Background Color のアルファを 0 にし、看板領域以外を透明にする
背景映像と Corner Pin TOP の出力を Composite TOP の Over モードで合成

Example 4: 疑似 3D 透視変換による奥行き演出 🎴

2D Card Image → Corner Pin TOP (アニメーション CHOP で Pin 駆動) → 出力

2D の画像カードに対し Corner Pin TOP の Pin 四隅をアニメーションさせ、傾いて回転するような疑似 3D 透視変換エフェクトを軽量に作る用途。3D ジオメトリを組まずに動きを付けたいときに使える。

Corner Pin TOP の入力に 2D 画像を接続
Mapping を Perspective に設定
Pin の各四隅座標を LFO CHOP や手動キーフレームでアニメーション
Grid Refinement を上げて変形の滑らかさを確保

Info CHOP情報 📊

Corner Pin TOP は Info CHOP による詳細情報取得に対応しています。resx / resy による出力解像度、aspectx / aspecty によるアスペクト、cook_time / cook_frame 等の汎用 TOP 情報チャンネルを参照できます。

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:

Extract 四隅と Pin 四隅の対応関係を確認 (Top Left ↔ Top Left のように同じ角同士で対応している必要がある)
Top Left Unit 等の Unit が Fraction / Pixels 等で揃っているか確認
Pin 四隅が出力画像範囲外に飛んでいないか確認 (Pin の各値を 0〜1 の Fraction で再確認)
Common Page の Output Resolution が 0×0 になっていないか確認

❌ Problem: Bilinear と Perspective で結果がはっきり違う
✅ Solution:

奥行きを含む台形補正・プロジェクションマッピングでは Perspective を選択する
軽い歪み補正やシンプルなワープなら Bilinear でも十分軽量に動く
両方のモードを Composite TOP で並べて見比べると違いを把握しやすい

❌ Problem: ワープした画像の角がカクついている / ジャギーが見える
✅ Solution:

Grid Refinement を上げて内部メッシュの分割数を増やす
Common Page の Input Smoothness を Interpolate Pixels または Mipmap Pixels に設定
前段の入力解像度を上げる、または Common Page の Pixel Format を 16-bit float (RGBA) 以上にして精度を確保

❌ Problem: Pin 四点を内側に寄せたのに背景色が出ない
✅ Solution:

Background Color の Alpha 値が 0 になっていないか確認 (透明だと背景が見えない)
Extend モードが Hold / Repeat / Mirror のいずれかになっていると端のピクセルで埋められる場合がある
Pre-Multiply RGB by Alpha をオン/オフで切り替え、後段の合成想定に合わせる

❌ Problem: Corner Pin の出力が重くフレームレートが落ちる
✅ Solution:

Grid Refinement を必要最小限まで下げる
Common Page の Output Resolution を抑える / Half 等で軽量化
Common Page の Pixel Format を上げすぎていないか確認 (32-bit float は重い)

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

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

概要 📖 – 四隅指定による画像の透視変換ワープ

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Extract Page 📋

Extract 四隅座標 📐

Extend `.extend` 🔄

Mapping `.extractmapping` 🗺️

Pin Page 📌

Pin 四隅座標 📐

Grid Refinement `.gridrefine` 🔳

Background Color `.bgcolor` 🎨

Common Page 🔧

Output Resolution `.outputresolution` 🖼️

実践アイデア 💡

Example 1: プロジェクター投影のキーストン補正 📽️

Example 2: プロジェクションマッピング向け事前ワープ 🏛️

Example 3: 映像内の看板・壁面への画像差し替え 🖼️

Example 4: 疑似 3D 透視変換による奥行き演出 🎴

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

概要 📖 – 四隅指定による画像の透視変換ワープ

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Extract Page 📋

Extract 四隅座標 📐

Extend .extend 🔄

Mapping .extractmapping 🗺️

Pin Page 📌

Pin 四隅座標 📐

Grid Refinement .gridrefine 🔳

Background Color .bgcolor 🎨

Common Page 🔧

Output Resolution .outputresolution 🖼️

実践アイデア 💡

Example 1: プロジェクター投影のキーストン補正 📽️

Example 2: プロジェクションマッピング向け事前ワープ 🏛️

Example 3: 映像内の看板・壁面への画像差し替え 🖼️

Example 4: 疑似 3D 透視変換による奥行き演出 🎴

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

Extend `.extend` 🔄

Mapping `.extractmapping` 🗺️

Grid Refinement `.gridrefine` 🔳

Background Color `.bgcolor` 🎨

Output Resolution `.outputresolution` 🖼️