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

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

概要 📖 – 他ノードの表示を埋め込む

OP Viewer COMPは、他オペレータの Node Viewer をそのままパネル内に埋め込んで表示・操作する Panel COMPです。Container COMP のような汎用パネルとは異なり、OP Viewer COMP は対象オペレータの Node Viewer をそのまま表示するため、デバッグ UI やランタイム HUD で CHOP の波形 / TOP の画像 / SOP のジオメトリ等を別パネルから直接覗き見る用途に特化しています。

主な用途 🎯

HUD / デバッグオーバーレイ として CHOP / TOP / SOP / DAT 等任意のオペレータの Node Viewer をパネル内に埋め込み表示
制御 UI へのリアルタイムモニタ (波形・スペクトル・3D ジオメトリビュー等) を Container COMP 上のセクションに配置
マウス / タッチによるインタラクション中継 を Interactive オンで対象 OP の Node Viewer に直接渡す
Center / Scale によるパン・ズーム で対象 OP の特定領域を拡大表示
TOP の直接描画モード (Draw TOP Directly) で Select TOP のように RGBA をそのままパネル合成

データフロー 🔄

対象オペレータ (CHOP / TOP / SOP / DAT 等) の Node Viewer
 ↓
OP Viewer COMP (opviewer 参照 + Interactive / Center / Scale 設定)
 ↓
Panel COMP 階層に埋め込み
 ↓
Window COMP / Container COMP で表示

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

OP Viewer Page 📋

Operator Viewer `.opviewer` 🔗

Node Viewer を埋め込み表示する対象 OP への参照:

Operator Viewer: opviewer — 表示対象オペレータへのパス。CHOP / TOP / SOP / DAT 等あらゆる OP の Node Viewer をパネル内に埋め込める

Interactive `.interactive` 🖱️

Node Viewer へのインタラクション転送設定:

Interactive: interactive — オンにすると OP Viewer 内でのマウス・タッチ操作が対象オペレータの Node Viewer に渡される (TOP のパン / SOP の回転 / CHOP のスクロール等)。オフなら表示のみで操作は親パネルに渡る

Center `.opcenter` 🎯

ズーム時のパン位置 (Scale > 1 で有効):

Center: opcenter — Scale が 1 より大きいときに、対象オペレータの Node Viewer のどの部分を OP Viewer の中央に表示するかを指定する (X / Y の 2 値)

Center Unit `.opcenterunit` 📐

Center 値の単位設定:

Center Unit: opcenterunit — Center パラメータをパネル単位、対象 Node Viewer 幅に対する比率、ディスプレイポイントのいずれの単位で解釈するかを切り替える

Scale `.opscale` 🔍

Node Viewer の拡大倍率:

Scale: opscale — 対象 Node Viewer のズーム倍率。値を上げるほど Center を中心に拡大表示される

Draw TOP Directly `.topdirect` 🖼️

TOP の直接描画モード:

Draw TOP Directly: topdirect — TOP を対象にしているときオンにすると、Node Viewer のオーバーレイ表示を経由せず RGBA 画像をそのまま描画する (Select TOP と同等の見え方)

Use Content Size `.contentsize` 📏

TOP テクスチャ寸法を Center 基準にする設定:

Use Content Size: contentsize — TOP 表示時オンにすると、Center の計算が OP Viewer のパネル寸法ではなく対象テクスチャの寸法基準になる (パネル単位はピクセルとして扱われ、比率はテクスチャ幅・高さ基準)

Panel / Look / Children Pages 🪟

Panel COMP からの継承 `.panel_inherited` 📋

OP Viewer COMP は Panel COMP の特殊化として動作するため、Panel COMP の全パラメータを継承:

Panel Page: display / enable / helpdat / cursor / multitouch / uvbuttons / mousewheel / resize / reposition / scrolloverlay 等、Panel COMP 共通のインタラクション設定一式
Look Page: bgcolor / bgalpha / top (背景 TOP) / topfill / border* / opacity / composite / disablecolor 等、見た目と合成方式の設定一式
Children Page: align / spacing / alignmax / margin / justifyh / justifyv / fit / scale / offset / crop / phscrollbar / pvscrollbar / scrollbarthickness 等、子パネルのレイアウト設定一式
詳細は公式リファレンス: 各パラメータの完全な説明は Panel COMP 公式 docs を参照

Common Page 🔧

Parent Shortcut `.parentshortcut` 🔗

コンポーネント内部からこの COMP へのパスとして使えるショートカット名:

Parent Shortcut: コンポーネント内部の任意の場所からこの COMP を参照する際のショートカット名 (parent.<name> 形式で利用可能)

Global OP Shortcut `.opshortcut` 🌐

プロジェクト全体から参照可能なグローバルショートカット名:

Global OP Shortcut: プロジェクト内のどの階層からでも op.<name> 形式で参照可能なグローバルショートカット名

Internal OP `.iop` 🔧

コンポーネント内部のオペレータを外部から参照する内部 OP 定義:

Internal OP: コンポーネント内部の任意のオペレータをショートカット経由で外部から参照可能にする (Shortcut 名 + OP パスのペアで定義)

Node View `.nodeview` 👁️

コンポーネントのノードビューア表示モード

項目	内部名	説明
Default Viewer	`.default`	コンポーネントタイプに応じたデフォルトビューアを表示
Operator Viewer	`.opviewer`	Operator Viewer パラメータで指定したオペレータのビューアを表示
Panel Viewer	`.panel`	Panel Component としてのパネルビューを表示

Operator Viewer `.opviewer` 🔍

Operator Viewer モード時の表示対象オペレータ:

Operator Viewer: Node View パラメータが Operator Viewer のときに、ノードビューアとして表示する対象オペレータのパス

Cloning `.cloning` 🧬

Clone Master 機能の有効化・マスター指定:

Enable Cloning: クローン機能の有効化。オンでマスターと内容を同期、オフで同期を停止
Enable Cloning Pulse: ボタンを押すと即座にマスターの内容を 1 回クローンする
Clone Master: マスターとして参照する別コンポーネントへのパス

Load on Demand `.loadondemand` ⏳

コンポーネントの遅延ロード設定:

Load on Demand: オンにするとコンポーネントが実際に使用されるまでメモリにロードされない。常時使わないコンポーネントのメモリ節約に有効

External .tox `.externaltox` 📦

外部 .tox ファイルからの内容ロード設定:

Enable External .tox: オンで .toe 起動時に外部 .tox から内容をロード。オフで .tox 参照を無効化し .toe 内に保存された内容を使用
Enable External .tox Pulse: ボタンを押すと指定した外部 .tox ファイルから即座に再ロード
External .tox Path: ロードする外部 .tox ファイルへのパス
Reload Custom Parameters: 外部 .tox 再ロード時にコンポーネント直下のカスタムパラメータの値もリロード対象に含める
Reload Built-In Parameters: 外部 .tox 再ロード時にコンポーネント直下の組み込みパラメータの値もリロード対象に含める
Save Backup of External: 外部 .tox の内容を .toe ファイル内にバックアップ保存。外部 .tox が見つからない場合にこのバックアップを使用
Sub-Component to Load: 外部 .tox 内の特定の子 COMP のみを抽出してトップレベルとしてロードする (空欄なら .tox 全体をロード)

Relative File Path Behavior `.relpath` 📂

コンポーネント内部の相対ファイルパスを .toe / .tox どちらの位置を基準に解決するかの設定

項目	内部名	説明
Inherit	`.inherit`	親 COMP の設定を継承
Relative to .toe	`.toe`	相対パスを .toe ファイルの位置を基準に解決
Relative to .tox	`.tox`	相対パスを .tox ファイルの位置を基準に解決

Parameter Color Space `.parmcolorspace` 🎨

このノードのカラーパラメータをどのカラースペースで解釈するかを制御する設定

項目	内部名	説明
Working Color Space	`.working`	プロジェクトの作業カラースペースをそのまま使用 (変換なし)
sRGB	`.srgb`	sRGB として解釈し作業カラースペースに変換
Linear sRGB	`.lin_srgb`	Linear sRGB として解釈し作業カラースペースに変換
Custom	`.custom`	カスタムカラースペースを指定して変換

Parameter Reference White `.parmreferencewhite` ⚪

Parameter Color Space 変換時の Reference White レベル調整方法

項目	内部名	説明
Working Color Space Reference	`.working`	作業カラースペースの Reference White をそのまま使用
Custom	`.custom`	カスタム Reference White レベルを指定 (SDR / HDR 間の輝度変換等)

実践アイデア 💡

Example 1: デバッグ HUD オーバーレイ 🐞

Target OP (CHOP / TOP / SOP) → OP Viewer COMP (opviewer 参照) → Container COMP (HUD 階層) → Window COMP (常時表示ウィンドウ)

ランタイム中に主要オペレータの状態を別ウィンドウで覗き見るデバッグ HUD を構築する基本パターン。OP Viewer COMP を Container COMP に並べ、Window COMP で最前面表示すれば編集中ネットワークと独立したモニタリングが可能になります。

Container COMP に OP Viewer COMP を複数並べてレイアウト
各 OP Viewer COMP の Operator Viewer に監視したいオペレータのパスを設定
Interactive をオンにして HUD 内で対象 OP のパン・ズーム操作を可能に
Container COMP を Window COMP に渡し、Borders Off / Always On Top で常時表示

Example 2: コントロールパネル内のミニ波形モニタ 📊

Audio Device In CHOP → Filter CHOP → OP Viewer COMP (opviewer = Filter CHOP, Scale=1.5) → Container COMP (コントロールパネル)

オーディオ入力のレベルや波形を、Slider / Button 等の他 UI と並べてコントロールパネル内に常設表示する用途。Scale を 1.5 程度に上げて Center で波形の中央部分を拡大し、見やすさを調整します。

Audio Device In CHOP → Filter CHOP で平滑化した波形を準備
OP Viewer COMP の Operator Viewer に Filter CHOP のパスを設定
Scale を 1.5 に、Center で波形の中央位置にパン
Container COMP 内に Slider / Button と並べてレイアウト

Example 3: プレビュー TOP の RGBA 直接描画 🖼️

Render TOP → OP Viewer COMP (opviewer = Render TOP, Draw TOP Directly=On) → Panel UI

Render TOP の出力をプレビューパネルとして表示する際に、Draw TOP Directly をオンにすると Select TOP と同等の RGBA 直接描画になり、Node Viewer のオーバーレイ (チャンネル選択 UI 等) なしのクリーンなプレビューになります。

Render TOP の出力先にしたい OP Viewer COMP を配置
Operator Viewer に Render TOP のパスを設定
Draw TOP Directly をオンにして RGBA 直接描画モードへ
Use Content Size をオンにすればテクスチャ寸法基準でのパン・ズームが可能

Info CHOP情報 📊

OP Viewer COMP は Info CHOP / Panel CHOP による詳細情報取得に対応しています。

COMP 固有情報 📦

num_children: コンポーネント内部の子 OP の総数
num_dats: 内部 DAT の数
num_chops: 内部 CHOP の数
num_tops: 内部 TOP の数
num_sops: 内部 SOP の数

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数

Panel Values (Panel CHOP / 式参照) 📊

u / v: OP Viewer 内のマウス・タッチ位置 (0-1 正規化座標)
state: マウスボタン / タッチの押下状態 (0 = 離している、1 = 押下中)
inside: カーソルがパネル内にあるかどうか (0 / 1)
select: OP Viewer がクリック等で選択状態になっているか (0 / 1)

COMP 共通情報 (Info CHOP) 📊

total_cooks: コンポーネントが起動以降クックされた累計回数
cook_time: 直近 1 クック当たりの処理時間 (ミリ秒)
cpu_memory: コンポーネントが保持する CPU メモリ使用量

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

よくある問題と解決策 🔧

❌ Problem: Node Viewer が表示されない
✅ Solution:

Operator Viewer パラメータに対象オペレータのパスが正しく設定されているか確認
対象オペレータのノードビューア自体がオンになっているか (対象 OP 右下のビューア表示ボタン) を確認
Common Page の Node View が Operator Viewer になっているか確認

❌ Problem: マウス / タッチ操作が対象 OP に渡らない
✅ Solution:

Interactive パラメータをオンにする
Panel ページの Click Through がオフ、Enable がオンになっているか確認
親パネル側の Crop や scrolloverlay でクリック領域が遮られていないか確認

❌ Problem: TOP の RGB だけ表示したいのにオーバーレイが出る
✅ Solution:

Draw TOP Directly をオンにすると Select TOP と同等の RGBA 直接描画になる
対象 TOP のビューアのオーバーレイ (alpha / chan 切替等) が表示されている場合は Draw TOP Directly オンで回避
Use Content Size もオンにしてテクスチャ寸法基準で表示すると、パネルサイズに依存しない見え方になる

❌ Problem: Scale を上げてもズームできない / Center が効かない
✅ Solution:

Scale が 1.0 のままだと Center は無視される。1 より大きな値にしてからパンを試す
Center Unit が想定単位 (パネル単位 / 比率 / ディスプレイポイント) になっているか確認
TOP 表示時は Use Content Size のオン / オフで Center の解釈が変わるため切り替えて検証

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – 他ノードの表示を埋め込む

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

OP Viewer Page 📋

Operator Viewer .opviewer 🔗

Interactive .interactive 🖱️

Center .opcenter 🎯

Center Unit .opcenterunit 📐

Scale .opscale 🔍

Draw TOP Directly .topdirect 🖼️

Use Content Size .contentsize 📏

Panel / Look / Children Pages 🪟

Panel COMP からの継承 .panel_inherited 📋

Common Page 🔧

Parent Shortcut .parentshortcut 🔗

Global OP Shortcut .opshortcut 🌐

Internal OP .iop 🔧

Node View .nodeview 👁️

Operator Viewer .opviewer 🔍

Cloning .cloning 🧬

Load on Demand .loadondemand ⏳

External .tox .externaltox 📦

Relative File Path Behavior .relpath 📂

Parameter Color Space .parmcolorspace 🎨

Parameter Reference White .parmreferencewhite ⚪