概要 📖 – 他ノードの表示を埋め込む
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 をオンにすればテクスチャ寸法基準でのパン・ズームが可能
関連オペレータ 🔗
類似機能OP 🔍
- Container COMP — 汎用 Panel コンテナ。子パネルを自由にレイアウトする用途で、OP Viewer のような対象 OP の Node Viewer 埋め込み機能は持たない
- Select COMP — 別パネルのパネル値を参照する Panel COMP。Node Viewer 表示ではなく値の中継用途で、OP Viewer とは目的が異なる
組み合わせ推奨OP 🔄
- Container COMP — OP Viewer COMP を複数並べる親パネルとして HUD レイアウトを構成
- Window COMP — OP Viewer を含む UI を独立ウィンドウとして表示・常時最前面化
- Select TOP — Draw TOP Directly を使わずに TOP の RGBA を別経路で取り出してテクスチャ加工
- Panel CHOP — OP Viewer COMP のパネル値 (u / v / state / inside 等) を CHOP として取り出してロジック化
- Render TOP — Render TOP の出力プレビューを OP Viewer 経由でパネル UI に組み込み
前処理・後処理COMP 🎯
- 前処理: Container COMP、Base COMP
- 後処理: Container COMP、Window COMP
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 の解釈が変わるため切り替えて検証
参考資料 📚
その他 🔗
- TouchDesigner Wiki — COMP 概要
- TouchDesigner Wiki — Category:COMPs
- TouchDesigner Wiki — Category:Components
- TouchDesigner Wiki ホーム
- TouchDesigner 公式 Forum
- Facebook — TouchDesigner Help Group
公式リソース 📖
- TouchDesigner公式ドキュメント – OP Viewer COMP
- Panel CHOP (OP Viewer のパネル値取得)
- Select TOP (Draw TOP Directly の比較対象)
