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

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

概要 📖 – 画面をテクスチャ化

Screen Grab TOPは、画面 (デスクトップ・特定ディスプレイ・特定アプリ) の内容をリアルタイムに取り込み、テクスチャとして出力する生成 TOPです。Active をオンにすると常時キャプチャし、Active Pulse で単発取得も行えます。Source で取り込み元、Left / Right / Bottom / Top で切り出し範囲を制御します。

主な用途 🎯

デスクトップ全体や特定ディスプレイの画面キャプチャをテクスチャとして取り込む
他アプリ (ブラウザ・スライド・DAW 等) のウィンドウをリアルタイム取り込み (Windows のみ)
キャプチャ範囲を上下左右で切り出して必要な領域だけ取得する
外部ソフトの映像を VJ・ライブ演出のレイヤー素材として合成する
取り込んだ画面を録画・配信パイプライン (Movie File Out / NDI Out) へ流す

データフロー 🔄

入力: OS 画面 (デスクトップ全体・特定ディスプレイ・特定アプリ)
 ↓
Source で取り込み元を選択し Left / Right / Bottom / Top で範囲を切り出し
 ↓
出力: 画面キャプチャテクスチャ

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

ScreenGrab Page ⚙️

Active `.active` 🔘

画面キャプチャを常時実行するかどうかのトグルです:

Active (active): Active (常時取り込み) — オンにすると毎フレーム画面内容を取り込みます

Active Pulse `.activepulse` 📸

ボタンを押した瞬間だけ画面を取り込みます。Active がオフのときに 1 フレームだけ取得して更新したい場合に便利です:

Active Pulse (activepulse): Active Pulse (単発取り込み) — その場で 1 フレームだけ画面を取り込みます

Source `.source` 🖥️

取り込む対象を選びます。デスクトップ全体・特定のディスプレイ・特定のアプリケーション (Windows のみ) から選択します:

Source (source): Source (取り込み元) — 'Full Desktop' (デスクトップ全体)、特定のディスプレイ、または個別のアプリケーション (Windows のみ) から選択します

Refresh Sources `.refreshsource` 🔄

ディスプレイの抜き差しやウィンドウの開閉をした後に、取り込み元メニューの一覧を更新するボタンです:

Refresh Sources (refreshsource): Refresh Sources (一覧更新) — ディスプレイの接続変更やアプリの開閉後に Source メニューの一覧を最新化します

Left `.left` ⬅️

取り込む範囲の左端を指定します:

Left (left): Left (左端) — 取り込む領域の左端を指定します

Left Unit `.leftunit` 📐

Left の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位 (絶対値)
Fraction (0-1)	`.fraction`	解像度に対する 0〜1 の比率
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比を考慮した 0〜1 の比率

Right `.right` ➡️

取り込む範囲の右端を指定します:

Right (right): Right (右端) — 取り込む領域の右端を指定します

Right Unit `.rightunit` 📐

Right の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位 (絶対値)
Fraction (0-1)	`.fraction`	解像度に対する 0〜1 の比率
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比を考慮した 0〜1 の比率

Bottom `.bottom` ⬇️

取り込む範囲の下端を指定します:

Bottom (bottom): Bottom (下端) — 取り込む領域の下端を指定します (Bottom = 0)

Bottom Unit `.bottomunit` 📐

Bottom の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位 (絶対値)
Fraction (0-1)	`.fraction`	解像度に対する 0〜1 の比率
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比を考慮した 0〜1 の比率

Top `.top` ⬆️

取り込む範囲の上端を指定します:

Top (top): Top (上端) — 取り込む領域の上端を指定します

Top Unit `.topunit` 📐

Top の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位 (絶対値)
Fraction (0-1)	`.fraction`	解像度に対する 0〜1 の比率
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比を考慮した 0〜1 の比率

Delayed (Faster) `.delayed` ⚡

オンにすると取り込みが高速になりますが、一部の環境では動作しない場合があります:

Delayed (Faster) (delayed): Delayed (Faster) (高速モード) — オンで高速化しますが一部の環境では動作しないことがあります (Optimus 搭載ノート PC で問題が起きやすい)

実践アイデア 💡

Example 1: ブラウザ画面の合成 🌐

Screen Grab TOP (特定アプリ) → Composite TOP → 出力

Windows では Source で個別のアプリケーションウィンドウ (ブラウザ等) を選んで取り込めます。取り込んだ画面を Composite TOP で背景映像に重ねれば、ライブ配信やプレゼン演出のレイヤー素材として使えます。

Screen Grab TOP を作成し、Source で取り込みたいアプリのウィンドウを選択 (Windows のみ)
ウィンドウ一覧に出てこない場合は Refresh Sources を押して更新
Active をオンにしてリアルタイム取り込みを開始
後段に Composite TOP を置き、背景映像の上に重ねて合成

Example 2: 領域を切り出して取得 ✂️

Screen Grab TOP (Full Desktop) → Left/Right/Bottom/Top で範囲指定 → 出力

デスクトップ全体を取り込んだうえで Left / Right / Bottom / Top を指定すると、画面の特定エリアだけを切り出して取得します。スコアボードやタイマー表示など、画面の一部分だけが欲しいときに便利です。

Screen Grab TOP の Source を 'Full Desktop' に設定
Left Unit 等を Pixels にして単位を分かりやすく
Left / Right / Bottom / Top で取り込みたい矩形範囲を指定
Active をオンにして切り出し範囲がリアルタイム更新されることを確認

Example 3: 画面キャプチャの録画 🎬

Screen Grab TOP → Movie File Out TOP

取り込んだ画面をそのまま録画パイプラインへ流せます。Screen Grab TOP の出力を Movie File Out TOP に接続すれば、操作画面のキャプチャ動画を書き出せます。

Screen Grab TOP の Active をオンにして取り込みを開始
後段に Movie File Out TOP を接続
Movie File Out TOP で出力ファイルパスとコーデックを設定
録画を開始すると画面キャプチャが動画ファイルとして保存される

Info CHOP情報 📊

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

代表的な取得チャンネル 📡

resolution_x / resolution_y: 出力テクスチャの幅・高さ (ピクセル)
aspectx / aspecty: 出力テクスチャのアスペクト比 (横 / 縦)
depth: ピクセルフォーマットのビット深度 (8 / 10 / 16 / 32)
num_components: 出力チャンネル数 (1=Mono / 2=Mono+Alpha or RG / 3=RGB / 4=RGBA)
gpu_mem_used: GPU メモリ使用量 (バイト)、最適化判断の指標

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

よくある問題と解決策 🔧

❌ Problem: 画面が取り込まれない / 真っ黒になる
✅ Solution:

Active がオンになっているか確認 (オフの場合は Active Pulse で単発取得)
Source が意図した取り込み元になっているか確認
ディスプレイ構成やウィンドウを変更した直後は Refresh Sources を押して一覧を更新
Delayed (Faster) がオンだと一部環境で動作しないため、オフにして試す

❌ Problem: 特定のアプリが取り込み元に出てこない
✅ Solution:

個別アプリの取り込みは Windows のみ対応のため、macOS では ‘Full Desktop’ か特定ディスプレイを使用
対象アプリを起動した状態で Refresh Sources を押して一覧を更新
最小化中のウィンドウは取り込めない場合があるため、対象アプリを表示状態にする

❌ Problem: 取り込み範囲が意図とずれる
✅ Solution:

Left Unit / Right Unit / Bottom Unit / Top Unit を Pixels に統一して値を分かりやすくする
Bottom は 0 が下端基準のため、上下方向の指定が反転していないか確認
後段に Crop TOP を置いて切り出し範囲を微調整する

❌ Problem: 動作が重い / フレームレートが落ちる
✅ Solution:

常時取り込みが不要なら Active をオフにし、必要時に Active Pulse で単発取得
Left / Right / Bottom / Top で取り込み範囲を必要な部分だけに絞る
Common Page の Output Resolution を下げて GPU 負荷を軽減
Delayed (Faster) をオンにして高速モードを試す (動作する環境のみ)

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

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

概要 📖 – 画面をテクスチャ化

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

ScreenGrab Page ⚙️

Active `.active` 🔘

Active Pulse `.activepulse` 📸

Source `.source` 🖥️

Refresh Sources `.refreshsource` 🔄

Left `.left` ⬅️

Left Unit `.leftunit` 📐

Right `.right` ➡️

Right Unit `.rightunit` 📐

Bottom `.bottom` ⬇️

Bottom Unit `.bottomunit` 📐

Top `.top` ⬆️

Top Unit `.topunit` 📐

Delayed (Faster) `.delayed` ⚡

実践アイデア 💡

Example 1: ブラウザ画面の合成 🌐

Example 2: 領域を切り出して取得 ✂️

Example 3: 画面キャプチャの録画 🎬

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

代表的な取得チャンネル 📡

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

概要 📖 – 画面をテクスチャ化

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

ScreenGrab Page ⚙️

Active .active 🔘

Active Pulse .activepulse 📸

Source .source 🖥️

Refresh Sources .refreshsource 🔄

Left .left ⬅️

Left Unit .leftunit 📐

Right .right ➡️

Right Unit .rightunit 📐

Bottom .bottom ⬇️

Bottom Unit .bottomunit 📐

Top .top ⬆️

Top Unit .topunit 📐

Delayed (Faster) .delayed ⚡

実践アイデア 💡

Example 1: ブラウザ画面の合成 🌐

Example 2: 領域を切り出して取得 ✂️

Example 3: 画面キャプチャの録画 🎬

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

代表的な取得チャンネル 📡

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

Active `.active` 🔘

Active Pulse `.activepulse` 📸

Source `.source` 🖥️

Refresh Sources `.refreshsource` 🔄

Left `.left` ⬅️

Left Unit `.leftunit` 📐

Right `.right` ➡️

Right Unit `.rightunit` 📐

Bottom `.bottom` ⬇️

Bottom Unit `.bottomunit` 📐

Top `.top` ⬆️

Top Unit `.topunit` 📐

Delayed (Faster) `.delayed` ⚡