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

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

Outside TOP の領域外切り抜き合成を示す図

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

概要 📖 – 重ねた画像を領域外に切り抜く

Outside TOPは、オーバーレイ画像を基準画像の領域外側だけに残して合成する TOPです。Inside TOP と対をなし、Fixed Layer の領域に重なる部分を取り除いて、はみ出した外側部分だけを合成結果に残します。

主な用途 🎯

  • オーバーレイ画像を基準画像の領域外側だけに残す合成
  • 中央の被写体を避けて周囲にだけ模様を重ねる縁取り表現
  • マスク形状の外側にエフェクトを限定するくり抜き合成
  • 解像度の異なる 2 枚の素材を片方の枠に揃える合成
  • 枠の外側だけを別レイヤで装飾するフレーム演出

データフロー 🔄

入力 1 + 入力 2
 ↓
一方を Fixed Layer として基準化
 ↓
Overlay を外側に切り抜き
 ↓
合成画像を出力

Tips

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

まる。
まる。

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

パラメータ解説 ⚙️

Transform Page 📁

Fixed Layer .size 🎯

Fixed Layer (基準レイヤ) — どちらの入力を「枠」とし、合成結果の解像度・アスペクト比を担当させるかを決めます。もう一方が Overlay (調整される側) になります。

項目 内部名 説明
Input 1 .input1 入力 1 を Fixed Layer (基準) とし、入力 2 が Overlay (被合成側) になります
Input 2 .input2 入力 2 を Fixed Layer (基準) とし、入力 1 が Overlay (被合成側) になります

Pre-Fit Overlay .prefit 🖼️

Pre-Fit Overlay (オーバーレイの事前フィット) — Overlay を Fixed Layer の枠にどう収めるかを指定します。

項目 内部名 説明
Fill .fill Overlay を Fixed Layer の解像度・アスペクト比に合わせて引き伸ばし・押し縮め
Fit Horizontal .fithorz Overlay を水平方向に合わせて引き伸ばし・押し縮め
Fit Vertical .fitvert Overlay を垂直方向に合わせて引き伸ばし・押し縮め
Fit Best .fitbest Overlay を切り取らずに収まる最大サイズに揃える (アスペクト比維持)
Fit Outside .fitoutside Overlay が Fixed Layer をはみ出すように外側に合わせる (アスペクト比維持)

Justify Horizontal .justifyh ↔️

Justify Horizontal (水平方向の整列) — Overlay の左右位置を指定します。

項目 内部名 説明
Left .left Overlay を Fixed Layer の左側に揃える
Center .center Overlay を Fixed Layer の中央に揃える
Right .right Overlay を Fixed Layer の右側に揃える

Justify Vertical .justifyv ↕️

Justify Vertical (垂直方向の整列) — Overlay の上下位置を指定します。

項目 内部名 説明
Bottom .bottom Overlay を Fixed Layer の下端に揃える
Center .center Overlay を Fixed Layer の中央に揃える
Top .top Overlay を Fixed Layer の上端に揃える

Extend Overlay .extend 🔁

Extend Overlay (オーバーレイの端拡張) — Overlay の縁の外側の扱いを決めます。

項目 内部名 説明
Hold .hold Overlay の縁のピクセル値が外側に向かってそのまま延長されます
Zero .zero Overlay の縁の外側はゼロ (透明) として扱われます
Repeat .repeat Overlay が縁の外側で繰り返されます
Mirror .mirror Overlay が縁を境に反転して繰り返されます

Transform 制御 🎛️

Rotate .r 🔄
– Rotate (回転角) — Overlay を時計回り (値が増加) / 反時計回り (値が減少) に回転させます
– 角度は度数 (degree) 指定

Translate .t ➡️
– Translate (平行移動) — Overlay を X / Y 方向に移動させます
– 内部名は tx / ty の 2 軸

Translate Units .tunit 📐
– Translate Units (平行移動の単位) — Translate パラメータで使用する単位を設定します

Scale .s 🔍
– Scale (拡大縮小) — Overlay を X / Y 方向に拡大縮小します
– 内部名は sx / sy の 2 軸

Pivot .p 📍
– Pivot (回転・拡大縮小の中心点) — Overlay が回転・拡大縮小する基準点を指定します
– Transform Order によって結果が変わります

Pivot Units .punit 📐
– Pivot Units (中心点の単位) — Pivot パラメータで使用する単位を設定します

Legacy Transform .legacyxform ⚠️
– Legacy Transform (旧式変換) — 旧バージョンの変換行列構築方式を使用します
– オンにすると回転方向と変換順が反転します。互換目的のみ

Common Page 🔧

項目 内部名 説明

実践アイデア 💡

Example 1: 外周だけ模様を縁取り 🖼️

Movie File In TOP (人物) → Outside TOP ← Noise TOP (模様)

人物動画を Fixed Layer、模様素材を Overlay として Outside TOP に渡し、中央の人物に重ならない外周部分だけに模様を残して縁取り風の演出を作る基本フローです。

  1. 人物動画を入力 1、模様素材を入力 2 に接続
  2. Fixed Layer を Input 1 に設定し、人物の解像度を基準化
  3. Pre-Fit Overlay を Fit Best にして模様を枠に合わせる
  4. Scale で内側の余白サイズを調整し、外側に残る模様の幅を決定

Example 2: 枠の外だけ発光演出 🎯

Constant TOP (中央マスク) → Outside TOP ← Bloom TOP (エフェクト)

Constant TOP で作成した中央の枠を Fixed Layer とし、Bloom TOP で発光させた素材を Overlay として外側にだけ残すことで、中央を保護しつつ周囲にだけエフェクトを効かせるパターンです。

  1. Constant TOP で保護したい中央領域のサイズを定義
  2. Bloom TOP で外周に出したいエフェクト素材を作成
  3. Outside TOP で Constant TOP を Fixed Layer に指定し、エフェクトを外側に限定
  4. Extend Overlay を Zero にして枠内のエフェクトを透明化

Example 3: 解像度の違う素材整列 📏

Movie File In TOP (4K 素材) → Outside TOP ← Movie File In TOP (HD 素材)

解像度の違う 2 つの動画素材を Outside TOP に通し、片方の解像度に合成結果を揃えることで、後段の Composite TOP や Over TOP に渡しても破綻しないストリームを得る用途です。

  • 解像度の異なる 2 素材を入力 1 / 入力 2 に接続
  • Fixed Layer で基準とする側を選択
  • Pre-Fit Overlay でフィット方式を選び、後段で参照可能な単一解像度に統一

関連オペレータ 🔗

類似機能OP 🔍

  • Inside TOP — Outside と対をなし、Overlay を Fixed Layer の領域内側でのみ残す合成
  • Matte TOP — アルファマスクを使って領域を限定して合成する処理

組み合わせ推奨OP 🔄

  • Composite TOP — Outside で揃えたレイヤを複数枚まとめて合成
  • Over TOP — アルファチャンネルを保持したまま上に乗せる合成
  • Transform TOP — 前段で Overlay 側を回転・移動してから Outside に渡す
  • Fit TOP — 前段で解像度を整えてから Outside で外側切り抜き
  • Layout TOP — Outside で枠揃えしたレイヤを後段で並列レイアウト

前処理・後処理TOP 🎯

Info情報 📊

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

TOP 共通情報 🖼️

  • resx: 出力テクスチャの横解像度 (ピクセル)
  • resy: 出力テクスチャの縦解像度 (ピクセル)
  • aspectx: アスペクト比の X 成分
  • aspecty: アスペクト比の Y 成分
  • depth: テクスチャの 1 チャンネルあたりのビット深度

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

よくある問題と解決策 🔧

❌ Problem: 外側に何も表示されない
✅ Solution:

  • Pre-Fit Overlay が Fit Best 等で Overlay が枠内に収まりきり、はみ出し部分が無くなっていないか確認
  • Scale で Overlay を大きくして Fixed Layer からはみ出す部分を作る
  • Extend Overlay を一時的に Hold にして、外側に延長されたピクセルが見えるか確認

❌ Problem: 想定した解像度・アスペクト比にならない
✅ Solution:

  • Fixed Layer がどちらの入力に設定されているか再確認 (合成結果の基準になる側)
  • Common Page の Output Resolution で手動指定していないか確認
  • 前段に Fit TOP を入れて解像度を統一してから Outside に渡す

❌ Problem: 回転・拡大縮小が意図と逆になる
✅ Solution:

  • Legacy Transform が誤ってオンになっていないか確認 (旧式は回転方向と変換順が反転)
  • Pivot の位置を再設定し、回転・拡大縮小の中心が想定した点になっているか確認
  • Rotate の符号 (正/負) を反転して挙動を確認

参考資料 📚

その他 🔗

公式リソース 📖

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


まる。

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

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

↓日常垢
Instagram：＠malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

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