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

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

Out TOP が Component の出力コネクタへ画像を送出する図

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

概要 📖 – 親COMPへ画像を渡す

Out TOPは、Component 内部の処理結果テクスチャを、親ネットワークの出力コネクタへ送出する出口役の TOPです。Base COMP / Container COMP 等の内側に置くことで、Component の画像出力スロットを定義する役割を持ちます。

主な用途 🎯

  • Component の画像出力スロットの定義
  • 内部処理結果を親ネットワークに公開する出口
  • 再利用可能なエフェクト Component の出力インターフェース
  • 1 つの COMP から複数の独立した画像出力を提供
  • 内部ロジックを隠蔽しつつ必要な画像だけを外部に公開

データフロー 🔄

入力: Component 内部の TOP チェーン
 ↓
Out TOP (Label 設定 + Common Page 整形)
 ↓
親 COMP の出力コネクタ (配置順に並ぶ)
 ↓
出力: 親ネットワークの他オペレータへ

Tips

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

まる。
まる。

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

パラメータ解説 ⚙️

Out Page 📤

Label .label 🏷️

親 COMP の出力ポートにマウスをホバーしたときに表示されるラベル:

  • Label: Label (ラベル) — 親 Component の出力コネクタにカーソルをホバーしたときに表示されるポップアップ文字列。複数の Out TOP を並べたときに、どのスロットがどの用途かを識別するために使います。

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

Resolution .resolution 📐

カスタム解像度の幅・高さ指定 (Output Resolution = Custom 等の時のみ有効):

  • Resolution W: 出力幅 (ピクセル単位)。Output Resolution が Custom Resolution / Fit Resolution / Limit Resolution の時に有効
  • Resolution H: 出力高 (ピクセル単位)。同上

Resolution Menu .resmenu 📋

よく使う解像度プリセットのドロップダウン:

  • Resolution Menu: NTSC / PAL / HDTV 720 / HDTV 1080 / 4K UHD 等のプリセットから選択すると Resolution W / Resolution H が自動セットされる

Use Global Res Multiplier .resmult 🔢

プロジェクト全体の解像度倍率の適用:

  • Use Global Res Multiplier: Project Settings の Global Resolution Multiplier をこの TOP に適用するかどうか。プロトタイプを低解像度で動かしつつ最終出力で一括フル解像度化する運用に便利

Output Aspect .outputaspect 📏

出力アスペクト比の決定方式

項目 内部名 説明
Use Input .useinput 入力 TOP のアスペクトを継承 (伝播事故の元、非推奨)
Resolution .resolution 解像度から自動導出 (推奨デフォルト)
Custom Aspect .custom Aspect1 / Aspect2 で手動指定

Aspect .aspect 📐

カスタムアスペクト比の指定 (Output Aspect = Custom Aspect の時のみ有効):

  • Aspect1: 横方向アスペクト値 (Output Aspect = Custom Aspect の時のみ有効)
  • Aspect2: 縦方向アスペクト値 (同上)

Input Smoothness .inputfiltertype 🎚️

入力テクスチャのサンプリング方式

項目 内部名 説明
Nearest Pixel .nearest 最近傍ピクセルサンプリング (ピクセルアート向け、ジャギーが残る)
Interpolate Pixels .linear バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels .mipmap ミップマップ補間 (縮小時のモアレ抑制、わずかにコスト高)

Fill Viewer .fillmode 🖥️

ビューア内でのテクスチャの収め方

項目 内部名 説明
Use Input .useinput 入力 TOP の Fill Viewer 設定を継承
Fill .fill ビューアいっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal .width 横幅に合わせて収める (上下に余白)
Fit Vertical .height 縦幅に合わせて収める (左右に余白)
Fit Best .best アスペクト保持で内側に収まる最大サイズ
Fit Outside .outside アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)
Native Resolution .nativeres テクスチャのネイティブ解像度のまま等倍表示

Viewer Smoothness .filtertype 🎛️

ビューア表示時のサンプリング方式

項目 内部名 説明
Nearest Pixel .nearest 最近傍ピクセルサンプリング (ピクセル単位での確認向け)
Interpolate Pixels .linear バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels .mipmap ミップマップ補間 (縮小ビュー時のモアレ抑制)

Passes .npasses 🔁

オペレータの反復実行回数:

  • Passes: TOP の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。ブラー反復やフィードバック処理に利用

Channel Mask .chanmask 🎨

処理対象のチャンネルマスク (R/G/B/A 個別トグル):

  • Channel Mask: R / G / B / A 各チャンネルのオン/オフトグル。オフのチャンネルは TOP の処理を受けず入力値がそのまま通過

Pixel Format .format 🎨

出力テクスチャのピクセルフォーマット (ビット深度・チャンネル構成)

項目 内部名 説明
Use Input .useinput 入力 TOP のフォーマットを継承
8-bit fixed (RGBA) .rgba8fixed 標準 8 ビット固定小数 RGBA (デフォルト、軽量)
sRGB 8-bit fixed (RGBA) .srgba8fixed sRGB ガンマ補正済 8 ビット RGBA
16-bit float (RGBA) .rgba16float 16 ビット浮動小数 RGBA (HDR・中間処理向け)
32-bit float (RGBA) .rgba32float 32 ビット浮動小数 RGBA (最高精度、メモリ大)
10-bit RGB with 2-bit Alpha .rgb10a2fixed 10-10-10-2 ビット固定小数 (バンディング抑制)
16-bit fixed (RGBA) .rgba16fixed 16 ビット固定小数 RGBA
11-bit float (RGB) .rgb11float 11-11-10 ビット浮動小数 RGB (アルファなし、HDR 軽量)
16-bit float (RGB) .rgb16float 16 ビット浮動小数 RGB (アルファなし)
32-bit float (RGB) .rgb32float 32 ビット浮動小数 RGB (アルファなし)
8-bit fixed (Mono) .mono8fixed 8 ビット固定小数モノクロ
16-bit fixed (Mono) .mono16fixed 16 ビット固定小数モノクロ
16-bit float (Mono) .mono16float 16 ビット浮動小数モノクロ
32-bit float (Mono) .mono32float 32 ビット浮動小数モノクロ
8-bit fixed (RG) .rg8fixed 8 ビット固定小数 R+G 2 チャンネル
16-bit fixed (RG) .rg16fixed 16 ビット固定小数 R+G
16-bit float (RG) .rg16float 16 ビット浮動小数 R+G
32-bit float (RG) .rg32float 32 ビット浮動小数 R+G
8-bit fixed (A) .a8fixed 8 ビット固定小数アルファ単体
16-bit fixed (A) .a16fixed 16 ビット固定小数アルファ単体
16-bit float (A) .a16float 16 ビット浮動小数アルファ単体
32-bit float (A) .a32float 32 ビット浮動小数アルファ単体
8-bit fixed (Mono+Alpha) .monoalpha8fixed 8 ビット固定小数モノクロ+アルファ
16-bit fixed (Mono+Alpha) .monoalpha16fixed 16 ビット固定小数モノクロ+アルファ
16-bit float (Mono+Alpha) .monoalpha16float 16 ビット浮動小数モノクロ+アルファ
32-bit float (Mono+Alpha) .monoalpha32float 32 ビット浮動小数モノクロ+アルファ

実践アイデア 💡

Example 1: 再利用エフェクト 🎨

外部 TOP → Base COMP (入力 0) → In TOP → Level TOP → Blur TOP → Out TOP → 親 COMP 出力

Base COMP の内部に In TOP / Out TOP の対を置き、その間に Level TOP や Blur TOP 等のエフェクトを挟むことで、汎用エフェクト部品 (Color Grading + Blur) として再利用可能な Component を組み立てる構成です。Out TOP が出力境界を定義します。

  1. Base COMP を作成し、その内部ネットワークに In TOP と Out TOP を 1 個ずつ配置
  2. In TOP の下流に Level TOP / Blur TOP 等の処理を直列に接続
  3. 最後の処理結果を Out TOP に渡すと、それが親 COMP の出力 0 となる
  4. 親レベルで Base COMP の出力コネクタに別の TOP を繋ぐと、内部エフェクト結果がそのまま受け渡される

Example 2: 複数の出力口を公開 🔀

Container COMP 内部 → 複数 TOP チェーン → Out TOP × N → 親ネットワークの複数出力ポート

Container COMP の内部に複数の Out TOP を配置し、それぞれ用途の違う出力 (例: メイン映像 / マスク / プレビュー) を別ポートとして公開する構成です。Label パラメータで各出力の用途を明示しておくと、親側で識別しやすくなります。

  1. Container COMP の内部ネットワークに Out TOP を必要な数だけ配置 (例: 3 個)
  2. 各 Out TOP の Label パラメータに「メイン」「マスク」「プレビュー」等の識別名を入力
  3. 各 Out TOP に対応する処理ネットワークの末端 TOP を接続
  4. 親レベルで Container COMP の出力コネクタ 0 / 1 / 2 にそれぞれ別の下流 TOP を繋ぐ

関連オペレータ 🔗

類似機能OP 🔍

  • Null TOP — 入力をそのまま下流に通すパススルー TOP (Out TOP は Component 出力境界を定義する点が異なる)

組み合わせ推奨OP 🔄

  • In TOP — Out TOP と対をなす Component の入力側
  • Render TOP — 3D シーンのレンダー結果を Component の出力に流す典型的な上流ソース
  • Base COMP — Out TOP を内部に置いて出力ポートを定義できる汎用 Component
  • Select TOP — Component 境界を跨がず別ネットワークから TOP を参照する代替手段
  • Out CHOP — 別ファミリーで同じ役割を果たす Component の出力 OP (信号用)
  • Out DAT — 別ファミリーで同じ役割を果たす Component の出力 OP (テーブル用)

前処理・後処理TOP 🎯

  • TODO

Info CHOP情報 📊

Out 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 共通情報 🖼️

  • resolutionx: 出力テクスチャの横ピクセル数
  • resolutiony: 出力テクスチャの縦ピクセル数
  • aspectx / aspecty: 出力テクスチャの横・縦アスペクト値
  • depth: 3D テクスチャの場合の深度。2D テクスチャでは 1
  • pixelformat: 出力テクスチャの内部ピクセルフォーマット番号

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

よくある問題と解決策 🔧

❌ Problem: 出力スロットが現れない
✅ Solution:

  • Out TOP は Component の最上位ネットワーク (内側のトップ階層) に配置する必要があります。さらに内側のサブネット内に置くと外部出力ポートが生成されません。
  • Component を保存・再読み込みすると出力ポートが反映される場合があります。
  • Base COMP / Container COMP 等、入出力をサポートする Component であることを確認します。

❌ Problem: 親側で黒画面しか出てこない
✅ Solution:

  • Component 内部で Out TOP に接続している上流 TOP がクックされ画像を出力しているか確認します。
  • 上流 TOP がエラー状態 (赤枠) になっていないか、ノード表示で確認します。
  • Component が viewer 経由のクック対象に入っているか、親 COMP がアクティブかを併せて確認します。

❌ Problem: 出力の順序が想定と違う
✅ Solution:

  • 複数の Out TOP がある場合、外部出力ポートへの割当は配置順 (Index 順) で行われます。意図通りの順序になるよう Out TOP を並べ替えます。
  • 親 COMP の出力コネクタにマウスをホバーすると Label パラメータに設定したラベルが表示されるため、識別ミスを減らせます。
  • 用途ごとに Label を明示的に設定しておくと、後から見返したときの混乱を避けられます。

参考資料 📚

その他 🔗

公式リソース 📖

この記事は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をコピーしました