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

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

Inside TOP の領域内切り抜き合成を示す図

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

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

Inside TOPは、オーバーレイ画像を基準画像の領域内に切り抜いて合成する TOPです。Fixed Layer の解像度・アスペクト比が合成結果の基準となり、Overlay 側はその枠に収まる部分だけが残ります。

主な用途 🎯

  • オーバーレイ画像を基準画像の領域内に切り抜く合成
  • 解像度の異なる 2 枚の素材を片方の枠に揃える合成
  • UI 要素やテキストを特定エリア内だけに表示するマスク
  • 動画素材の表示範囲を別レイヤの形に揃える境界制御
  • ロゴや図形を背景の決まった枠内に配置するレイアウト

データフロー 🔄

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

Tips

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

まる。
まる。

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

パラメータ解説 ⚙️

Transform Page 📁

Fixed Layer .size 🎯

Fixed Layer (基準レイヤ) — どちらの入力を「枠」とし、合成結果の解像度・アスペクト比を担当させるかを決めます。

項目 内部名 説明
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 (背景) → Inside TOP ← Movie File In TOP (ロゴ画像)

背景動画を Fixed Layer、ロゴ画像を Overlay として Inside TOP に渡し、Justify Horizontal / Vertical でロゴを右上隅に寄せて配置するレイアウト基本フローです。

  1. 背景動画を入力 1、ロゴ画像を入力 2 に接続
  2. Fixed Layer を Input 1 に設定し、背景の解像度を基準化
  3. Pre-Fit Overlay を Fit Best、Justify Horizontal を Right、Justify Vertical を Top に
  4. Scale でロゴサイズを微調整し配置完了

Example 2: UI 要素を固定枠内に表示 🖼️

Text TOP (UI 要素) → Inside TOP ← Constant TOP (背景枠)

Constant TOP で作成した固定サイズの背景枠を Fixed Layer とし、Text TOP の文字や図形を Overlay として内側に切り抜くことで、はみ出さない UI パネルを作るパターンです。

  1. Constant TOP で枠サイズと色を定義
  2. Text TOP に表示したい文字列を入力
  3. Inside TOP で Constant TOP を Fixed Layer に指定し、Text を枠内にクリッピング
  4. Extend Overlay を Zero にして枠外の文字を透明化

Example 3: 解像度の異なる素材の整列 📏

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

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

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

関連オペレータ 🔗

類似機能OP 🔍

  • Outside TOP — Inside と対をなし、Overlay を Fixed Layer の領域外側でのみ残す合成
  • Crop TOP — 単一入力に対して矩形領域でクロップする処理

組み合わせ推奨OP 🔄

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

前処理・後処理TOP 🎯

Info情報 📊

Inside 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: Overlay が消えて何も表示されない
✅ Solution:

  • Pre-Fit Overlay が Fit Best 等で Overlay が極端に小さく縮められていないか確認
  • Translate で Overlay が Fixed Layer の外へ追い出されていないか確認
  • Extend Overlay を一時的に Hold にして、Overlay の縁が Fixed Layer の外側で見えるか確認

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

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

❌ 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をコピーしました