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

概要 📖 – Web ページを画像化

Web Render TOPは、Web ページや HTML コンテンツをブラウザプロセスで描画し、画像テクスチャとして出力する TOPです。URL・ローカルファイル・DAT 内の HTML を入力にでき、JavaScript も動作します。

主な用途 🎯

• Web ページや HTML を画像テクスチャとして取り込み
• 動的なデータ可視化ダッシュボードの埋め込み
• HTML・CSS・JavaScript ベースの UI 表示
• 外部 Web コンテンツのライブ配信への合成
• DAT 内の HTML 文字列を直接レンダリング

データフロー 🔄

入力: URL / ファイル / DAT の HTML
 ↓
ブラウザプロセスで描画
 ↓
出力: 画像テクスチャ

---

パラメータ解説 ⚙️

Web Render Page 🌐

基本設定 .basic ⚙️

Active .active 🔘
– Active (有効化) — Web Render TOP の動作を有効・無効にします。
– オフにするとブラウザプロセスの描画が停止します。

Reload Source .reloadsrc 🔄
– Reload Source (ソース再読込) — 入力元の DAT・URL・ファイルを再読込します。

Reload Current Page .reload ↻
– Reload Current Page (現在ページ再読込) — Web ブラウザの更新と同じく、現在のページを再読込します。

Reset Update Count .resetcount 🧮
– Reset Update Count (更新回数リセット) — ページが更新された回数のカウンタをリセットします。
– カウント値は Info CHOP 経由で取得します。

Only Update when Loaded .updatewhenloaded ⏳
– Only Update when Loaded (読込完了時のみ更新) — ページが完全に読込まれたときのみ Web ページを表示します。

Cook Always .alwayscook ♨️
– Cook Always (常時クック) — オンで毎フレーム クックします。
– オフの場合、最後の更新を受け取ってから 10 フレーム追加でクックし連続性を保ちます。

Transparent Background .transparent 🫧
– Transparent Background (透過背景) — Web ページを透明な背景で読込みます。
– このオプションはブラウザプロセスを再起動します。

Enable Media Stream .mediastream 🎥
– Enable Media Stream (メディアストリーム有効化) — Web Render インスタンスがマイクとカメラを使えるようにします。

Redirect Popups .redirectpopups 🪟
– Redirect Popups (ポップアップ転送) — ポップアップを無視せず、ポップアップ先の URL に切替えます。

Maximum Render Frame Rate .maxrenderrate 🎞️
– Maximum Render Frame Rate (最大描画フレームレート) — ページを描画する最大フレームレートを設定します。
– 60 より高く設定可能ですが、そのフレームレートを保証するものではありません。

Number of Frame Buffers .numbuffers 🗂️
– Number of Frame Buffers (フレームバッファ数) — キャッシュする画像の最大枚数を設定します。

DPI Scaling Factor .dpiscale 🔍
– DPI Scaling Factor (DPI 拡大率) — 描画する Web ページの DPI 拡大率を設定します。
– デフォルト式は TouchDesigner のモニタ 0 の DPI Scale に合わせます。

Use Shared Texture .sharedtexture 🤝
– Use Shared Texture (共有テクスチャ使用) — 共有メモリではなく Direct3D 11 テクスチャを TouchDesigner とブラウザプロセス間で共有します (Windows のみ、効率が向上)。

User Cache Directory .userdir 📁
– User Cache Directory (ユーザーキャッシュ先) — cef がユーザーデータを保存する永続ディレクトリです。

Options .options 🧩
– Options (追加オプション) — ブラウザプロセスに渡せる追加オプションです。
– このオプションはブラウザプロセスを再起動します。

Restart if Process Died .autorestart 🔁
– Restart if Process Died (異常終了時に再起動) — ブラウザプロセスが落ちた場合に自動で再起動します。

Restart .autorestartpulse ⏏️
– Restart (再起動) — ボタンを離した瞬間にブラウザプロセスを即時再起動します。
– Python では pulse() メソッドで実行します。

入力ソース .source 📥

Web ページの入力元を選択する設定

項目	内部名	説明
URL or File	.urlorfile	URL またはローカルファイルから読込

URL・DAT 指定 .addr 🔗

URL or File .url 🌍
– URL or File (URL またはファイル) — Web ページの URL またはアドレスを指定します。

DAT .dat 📝
– DAT (DAT 入力) — Web ページとして読込むテキストを保持する DAT を指定します。

音声出力 .audio 🔊

Web ページの音声をどこに出力するかを選ぶ設定

項目	内部名	説明
Off	.off	音声を無効化
Route to System Audio Out	.system	システムの音声出力へ送る
Route to Audio Web Render CHOPs	.audiochop	Audio Web Render CHOP へ送る

リクエスト制御 DAT .requestdat 🛂

Modify Header DAT .headerdat 📨
– Modify Header DAT (ヘッダ変更 DAT) — 指定 URL のリクエストヘッダを変更します。Name・Value・URL 列を持つテーブルを指定します。
– URL 列にマッチした URL に対し、対応する Name と Value がリクエストヘッダに挿入され、既存値を置換します。URL は パターンマッチングを含められます。

Allow URLs DAT .allowurls ✅
– Allow URLs DAT (許可 URL DAT) — 読込を許可する URL の一覧テーブルを指定します。URL は パターンマッチングを含められます。

Block URLs DAT .blockurls 🚫
– Block URLs DAT (ブロック URL DAT) — 読込まない URL の一覧テーブルを指定します。Allow URLs DAT で許可された URL もここでブロックします。URL は パターンマッチングを含められます。

---

実践アイデア 💡

Example 1: データ可視化の埋め込み 📊

Web Render TOP (URL) → Composite TOP → Out TOP

外部のグラフ描画ページを Web Render TOP の URL 入力で取り込み、Composite TOP で背景映像と重ね合わせてライブダッシュボードとして出力する基本フロー。

1. Web Render TOP の Source を「URL or File」に設定
2. URL or File に可視化ページのアドレスを入力
3. Composite TOP で背景レイヤーと合成
4. Out TOP から最終出力へ送る

Example 2: HTML 文字列の直接描画 📝

Text DAT (HTML) → Web Render TOP (DAT) → Null TOP

Text DAT に書いた HTML・CSS をそのまま Web Render TOP の DAT 入力に渡し、ローカルサーバーを立てずに自作 UI をテクスチャ化して後段へ流す例。

• Text DAT に HTML 文字列を記述
• Web Render TOP の Source を DAT 側に切替え DAT 入力を接続
• Null TOP を後段に置いて参照を安定化

Example 3: 透過 UI のオーバーレイ 🫧

Web Render TOP (Transparent) → Over TOP → Render 出力

Transparent Background をオンにした Web Render TOP で HTML 製の透過 UI を描画し、Over TOP で映像の上にオーバーレイ表示するインタラクティブ演出の例。

• Web Render TOP の Transparent Background をオン
• Over TOP の前面入力に Web Render TOP を接続

---

関連オペレータ 🔗

類似機能OP 🔍

• Movie File In TOP — 外部メディアを画像として読込む入力 TOP
• Text TOP — テキストを画像化する生成 TOP

組み合わせ推奨OP 🔄

• Composite TOP — Web ページ画像を他レイヤーと合成
• Over TOP — 透過 UI を映像の上にオーバーレイ
• Null TOP — 後段参照を安定化する中継

前処理・後処理TOP 🎯

• 前処理: Movie File In TOP、Text TOP
• 後処理: Composite TOP、Over TOP、Null TOP、Out TOP

---

Info情報 📊

Web Render TOP は Info CHOP / Info DAT による状態情報の取得に対応しています。

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

更新状況 🔄

• 更新回数: ページが更新された回数。Reset Update Count で初期化
• 読込状態: ページの読込完了状況の確認

エラー診断 🩺

• Info DAT エラー: 共有テクスチャ不具合時のエラー文字列を確認
• プロセス状態: ブラウザプロセスの稼働・再起動状況

---

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

よくある問題と解決策 🔧

❌ Problem: 画像が表示されない
✅ Solution:

• Active がオンになっているか確認
• Use Shared Texture 使用時は Info DAT を向けてエラーを確認
• 複数 GPU 環境では TouchDesignerWebRender.exe が同じ GPU を使うよう設定

❌ Problem: 音声が再生されない
✅ Solution:

• Audio Options を Off 以外に設定
• 設定変更後はブラウザプロセスが再起動されるため数フレーム待つ
• システム出力か Audio Web Render CHOP のどちらに送るか選択を確認

❌ Problem: ページが更新されない
✅ Solution:

• Cook Always をオンにして毎フレーム クックさせる
• Reload Current Page で手動再読込を実行
• Only Update when Loaded がオンの場合は読込完了を待つ

❌ Problem: TOP がエラーになる
✅ Solution:

• User Cache Directory が他の Web Render TOP と重複していないか確認
• 各 Web Render TOP に一意のキャッシュ先を指定
• Restart if Process Died をオンにして自動復帰させる

---

参考資料 📚

その他 🔗

• TouchDesigner Wiki — Category:TOPs
• TouchDesigner Wiki — Pixel Formats 解説
• TouchDesigner Wiki ホーム
• TouchDesigner 公式 Forum
• Facebook — TouchDesigner Help Group

公式リソース 📖

• TouchDesigner公式ドキュメント – Web Render TOP
• TouchDesigner公式ドキュメント – TOP

機能解説 📘

• TouchDesigner公式ドキュメント – Pattern Matching

その他の記事はこちら

---