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

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

概要 📖 – 画像を格子状に並べる

Layout TOPは、複数の入力 TOP を行・列・グリッド状に並べて 1 枚のテクスチャに合成する TOPです。Common ページの設定により、入力をスケールして特定解像度に収めるか、入力のネイティブ解像度に合わせて出力解像度を拡大するかを選択できます。

主な用途 🎯

複数 TOP を行・列・グリッド状に並べて 1 枚のテクスチャに合成
マルチカメラ監視ビュー・複数 Render 結果の同時表示 (CCTV 風 / クアッドビュー)
HUD・ダッシュボード UI の均等整列レイアウト構築
Border Color / Borders による各セルの縁取りとタイル状ビューアの作成
Fit モードによる入力アスペクト保持を統一しつつ均等配置

データフロー 🔄

入力: 複数 TOP (ワイヤ入力 + TOP パラメータの追加パス)
 ↓
Align で行/列/グリッド配置を決定
 ↓
各セルに Fit で入力画像を配置
 ↓
出力: 並べ替え済みテクスチャ

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Layout Page 📋

TOP パス指定 `.top` 📥

レイアウトに含める TOP のパス指定:

TOP: top (TOP パラメータ) — レイアウトに含める TOP のパスをスペース区切りで複数指定。ワイヤ入力と併用可能で、最終レイアウトでは TOP パラメータ指定分が先、ワイヤ入力分が後ろに並ぶ

解像度自動調整 `.scaleres` 📐

Scale Resolution .scaleres 🔍
Scale Resolution (解像度自動拡大) — オフ時は最初のワイヤ入力の解像度を使用 (Common ページでカスタム指定も可)。オン時は Output Resolution が Use Input のとき、最初の入力解像度に列数・行数を掛けた値が出力解像度になる (例: 1280×720 × 4 列 1 行 → 5120×720)。どちらの場合でも各セルに割り当てられる領域は同一サイズで、画像のはめ込み方は Fit で決まる

Align `.align` 🧭

入力 TOP の並び順 (行・列・グリッド)

項目	内部名	説明
None	`.none`	並び替えなし (1 セル目に積み重ね)
Left to Right	`.horizlr`	横一列に左から右へ並べる
Right to Left	`.horizrl`	横一列に右から左へ並べる
Top to Bottom	`.verttb`	縦一列に上から下へ並べる
Bottom to Top	`.vertbt`	縦一列に下から上へ並べる
Grid Rows	`.gridrows`	グリッド配置で行を優先 (横方向に埋めてから次の行へ)
Grid Columns	`.gridcols`	グリッド配置で列を優先 (縦方向に埋めてから次の列へ)

Fit `.fit` 🎯

各セル内への入力画像のはめ込み方

項目	内部名	説明
Fill	`.fill`	セルいっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal	`.fithorz`	横幅をセルに合わせてアスペクト保持 (上下に余白)
Fit Vertical	`.fitvert`	縦幅をセルに合わせてアスペクト保持 (左右に余白)
Fit Best	`.fitbest`	アスペクト保持で内側に収まる最大サイズ
Fit Outside	`.fitoutside`	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)
Native Resolution	`.nativeres`	テクスチャのネイティブ解像度のまま等倍配置

Row Layout `.rowlayout` 📏

行レイアウトの確定方式

項目	内部名	説明
Max	`.max`	`Number of Rows` を行数の上限として使い、超えたら新しい列へ折り返す
Exact	`.exact`	`Number of Rows` ちょうどの行数で固定

Column Layout `.collayout` 📐

列レイアウトの確定方式

項目	内部名	説明
Max	`.max`	`Number of Columns` を列数の上限として使い、超えたら新しい行へ折り返す
Exact	`.exact`	`Number of Columns` ちょうどの列数で固定

行数・列数の指定 🔢

Number of Rows .numrows 📏
Number of Rows (行数) — Row Layout の設定 (Max/Exact) に応じて行数の上限または確定値を整数で指定

Reverse Row Order .reverserows 🔃
Reverse Row Order (行順反転) — オンにすると行の並びを上下逆転

Number of Columns .numcols 📐
Number of Columns (列数) — Column Layout の設定 (Max/Exact) に応じて列数の上限または確定値を整数で指定

Reverse Column Order .reversecols 🔁
Reverse Column Order (列順反転) — オンにすると列の並びを左右逆転

Border Color `.bcolor` 🎨

各セルの枠線カラー:

Border Color: bcolor (枠線カラー) — 各入力セルを囲む枠線の色 (R/G/B/A の 4 成分)

Borders `.borders` 🖼️

各セルの枠線太さ (左/右/下/上):

Borders: borders (枠線の太さ) — 各入力セルの枠線をピクセル単位で 4 辺別々に指定。枠線分セル内の画像はスケールダウンされる

Background Color `.bgcolor` 🖌️

入力画像で覆われない背景領域の色:

Background Color: bgcolor (背景色) — 入力画像で覆われない領域の塗りつぶし色とアルファ (R/G/B/A の 4 成分)

アルファ合成設定 🌫️

Pre-Multiply RGB by Alpha .premultrgbbyalpha ✖️
Pre-Multiply RGB by Alpha (アルファ前乗算) — オンにすると Background Color の RGB 成分を Alpha で乗算してから合成 (premultiplied alpha 規約)

Comp Over Background Color .compover 🎚️
Comp Over Background Color (背景色で上書き合成) — オンにするとアルファが 1 未満の領域を Background Color で塗りつぶす

Transform Page 🔄

Transform Order `.xord` 🔢

Translate / Rotate / Scale の適用順

項目	内部名	説明
Scale Rotate Translate	`.srt`	Scale → Rotate → Translate (デフォルト)
Scale Translate Rotate	`.str`	Scale → Translate → Rotate
Rotate Scale Translate	`.rst`	Rotate → Scale → Translate
Rotate Translate Scale	`.rts`	Rotate → Translate → Scale
Translate Scale Rotate	`.tsr`	Translate → Scale → Rotate
Translate Rotate Scale	`.trs`	Translate → Rotate → Scale

変換パラメータ 🎛️

Translate .t ↔️
Translate (平行移動) — 各入力画像を x / y 軸方向にどれだけずらすかを指定 (2 成分: tx / ty)

Translate Unit .tunit 📐
Translate Unit (移動単位) — Translate の値の単位 (Fraction / Pixels 等) を指定するモード

Rotate .rotate 🔄
Rotate (回転) — 各入力画像の回転角度を度数で指定

Scale .s 📏
Scale (スケール) — 各入力画像を x / y 軸方向に拡大縮小する倍率 (2 成分: sx / sy)

Legacy Transform `.legacyxform` 🕰️

Legacy Transform .legacyxform ♻️
Legacy Transform (旧変換モード) — オンにすると旧バージョンの行列構築アルゴリズム (回転と変換順序が反転) を使用。古いプロジェクトとの互換性維持用

実践アイデア 💡

Example 1: マルチカメラ監視ビュー 📹

複数 Video Device In TOP → Layout TOP (Align=Grid Rows, Number of Rows=2) → 出力

4 台のカメラ入力 (Video Device In TOP) を Layout TOP に集約し、2 行 2 列のグリッド状に並べてマルチカメラ監視ビューを構築する基本フロー。Borders で各セルを区切り、Background Color で背景を埋めて CCTV 風の一覧表示を作る。

Layout TOP を作成し、4 台の Video Device In TOP をワイヤで接続
Align を Grid Rows に設定して 2D グリッド配置を有効化
Number of Rows を 2 にして 2 行レイアウトに固定
Fit を Fit Best に設定してカメラのアスペクト比を保持
Borders Left/Right/Top/Bottom を 2 ピクセル程度に設定して各セルを縁取り

Example 2: 3アングルの並列表示 🎬

3 つの Render TOP (異なるカメラアングル) → Layout TOP (Align=Left to Right, Fit=Fit Best) → 出力

別アングルから撮影した 3 つの Render TOP を横一列に並べ、ピクチャ・イン・ピクチャ風のプレビュー画面を作成する例。Scale Resolution をオンにして出力解像度を入力 3 つ分に自動拡大し、ネイティブ解像度のままアスペクト比を保つ。

3 つの Render TOP をそれぞれ異なるカメラ位置で配置
Layout TOP の Align を Left to Right に設定
Scale Resolution をオンにして出力解像度を入力解像度 × 列数で自動拡大
Border Color Alpha を 1、RGB を白に設定して各シーンを区切る縁取りを追加

Example 3: 素材のサムネイル一覧 🗂️

多数の Movie File In TOP → Layout TOP (Align=Grid Columns, Number of Columns=4, Row Layout=Max) → 出力

プロジェクト内の動画素材 (Movie File In TOP 群) を 4 列のグリッドに自動配置し、サムネイルブラウザ風に一覧表示する例。Row Layout を Max にして行数は素材数に応じて自動増加。Background Color を暗灰色にして素材間の余白を視認できるようにする。

素材ごとの Movie File In TOP を多数生成 (Replicator COMP で動的生成も可)
Layout TOP の Align を Grid Columns、Number of Columns を 4 に設定
Row Layout を Max にして行数を素材数に応じて自動決定
Fit を Fit Best にして素材のアスペクト比を保持
Common Page で Pixel Format を 8-bit fixed (RGBA) に下げて多数素材時の GPU メモリを節約

Info CHOP情報 📊

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

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

よくある問題と解決策 🔧

❌ Problem: 入力画像がはみ出る・引き伸ばされる
✅ Solution:

Fit を Fit Best または Fit Outside に設定してアスペクト比を保持
Scale Resolution をオンにして出力解像度を入力数に応じて自動拡大
Common Page の Output Resolution を Custom Resolution にし、入力アスペクトに近い値を手動指定

❌ Problem: 行数・列数が期待通りにならない
✅ Solution:

Align を Grid Rows または Grid Columns に設定して 2D グリッド配置を明示
Row Layout / Column Layout を Exact に変更して Number of Rows / Number of Columns を固定値として強制
Reverse Row Order / Reverse Column Order で並び順を反転 (左上原点が期待と逆の場合)

❌ Problem: 各セル間の境界線が見えない・太すぎる
✅ Solution:

Borders (Left/Right/Top/Bottom) で枠線の太さをピクセル単位で 4 辺別々に指定
Border Color Alpha を 1 に設定し、RGB を背景と異なる色にして縁取りを視認可能に
Background Color Alpha を 0 にすると境界部分が透明になり、後段で Feedback TOP 等と組み合わせやすい

❌ Problem: 出力に透明背景が出ない・黒くなる
✅ Solution:

Background Color Alpha を 0 に設定して背景塗りつぶしを透明化
Comp Over Background Color をオフにして背景色での上書きを無効化
Pre-Multiply RGB by Alpha のオン/オフを切替えて premultiplied alpha 規約と合わせる

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

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

概要 📖 – 画像を格子状に並べる

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Layout Page 📋

TOP パス指定 `.top` 📥

解像度自動調整 `.scaleres` 📐

Align `.align` 🧭

Fit `.fit` 🎯

Row Layout `.rowlayout` 📏

Column Layout `.collayout` 📐

行数・列数の指定 🔢

Border Color `.bcolor` 🎨

Borders `.borders` 🖼️

Background Color `.bgcolor` 🖌️

アルファ合成設定 🌫️

Transform Page 🔄

Transform Order `.xord` 🔢

変換パラメータ 🎛️

Legacy Transform `.legacyxform` 🕰️

実践アイデア 💡

Example 1: マルチカメラ監視ビュー 📹

Example 2: 3アングルの並列表示 🎬

Example 3: 素材のサムネイル一覧 🗂️

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

概要 📖 – 画像を格子状に並べる

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Layout Page 📋

TOP パス指定 .top 📥

解像度自動調整 .scaleres 📐

Align .align 🧭

Fit .fit 🎯

Row Layout .rowlayout 📏

Column Layout .collayout 📐

行数・列数の指定 🔢

Border Color .bcolor 🎨

Borders .borders 🖼️

Background Color .bgcolor 🖌️

アルファ合成設定 🌫️

Transform Page 🔄

Transform Order .xord 🔢

変換パラメータ 🎛️

Legacy Transform .legacyxform 🕰️

実践アイデア 💡

Example 1: マルチカメラ監視ビュー 📹

Example 2: 3アングルの並列表示 🎬

Example 3: 素材のサムネイル一覧 🗂️

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

TOP パス指定 `.top` 📥

解像度自動調整 `.scaleres` 📐

Align `.align` 🧭

Fit `.fit` 🎯

Row Layout `.rowlayout` 📏

Column Layout `.collayout` 📐

Border Color `.bcolor` 🎨

Borders `.borders` 🖼️

Background Color `.bgcolor` 🖌️

Transform Order `.xord` 🔢

Legacy Transform `.legacyxform` 🕰️