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

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

概要 📖 – GLSLでテクスチャを描く

GLSL Multi TOPは、DATに記述したGLSLシェーダで複数の入力テクスチャを並列処理し、任意の画像演算結果を出力するTOPです。vertex/pixelシェーダによる描画と、compute shaderによる汎用GPU計算の両方を扱います。

主な用途 🎯

カスタムシェーダによる画像処理エフェクトの実装
複数テクスチャ入力を組み合わせた合成・マスク処理
コンピュートシェーダを活用したGPU上での汎用並列計算
3Dテクスチャ生成とスライス単位の描画
マルチカラーバッファ出力による複数結果の同時生成

データフロー 🔄

入力: 複数のテクスチャ + uniform値
 ↓
GLSLシェーダ実行（vertex/pixel または compute）
 ↓
出力: RGBAテクスチャ（最大複数バッファ・3Dテクスチャ対応）

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

GLSL Page 📁

シェーダ設定 `.glslsettings` 🎛️

GLSLバージョンとシェーダ種別を選択するメニュー設定

項目	内部名	説明
1.20	`.glsl120`	GLSL 1.20
3.30	`.glsl330`	GLSL 3.30
4.00	`.glsl400`	GLSL 4.00
4.10	`.glsl410`	GLSL 4.10
4.20	`.glsl420`	GLSL 4.20
4.30	`.glsl430`	GLSL 4.30
4.40	`.glsl440`	GLSL 4.40
4.50	`.glsl450`	GLSL 4.50
4.60	`.glsl460`	GLSL 4.60（compute shader対応の最新版）

シェーダソース `.shadersources` 📝

Preprocess Directives .predat 🔧
– Preprocess Directives (前処理ディレクティブ) — シェーダ先頭に挿入する#define等のプリプロセッサ指示を記述したDATを指定
– 複数シェーダで共通の定数や条件分岐を一元管理する用途に使用

Vertex Shader .vertexdat 📄
– Vertex Shader (頂点シェーダ) — 頂点シェーダのソースコードを保持するDATを指定
– DATをドラッグ＆ドロップするか、DATへのパスを手入力します

Pixel Shader .pixeldat 🎨
– Pixel Shader (ピクセルシェーダ) — ピクセルシェーダ（フラグメントシェーダ）のソースコードを保持するDATを指定
– ModeがVertex/Pixel Shaderのときに有効

Compute Shader .computedat ⚙️
– Compute Shader (コンピュートシェーダ) — コンピュートシェーダのソースコードを保持するDATを指定
– ModeがCompute Shaderのときに有効

Load Uniform Names .loaduniformnames 🔄
– Load Uniform Names (uniform名読込ボタン) — 押下するとシェーダ内で宣言されたuniformを各uniformパラメータに自動で事前充填
– コンパイラが未使用のuniformを除外するため、シェーダ側で実際に参照されているもののみ抽出

コンピュート実行設定 `.computesettings` ⚙️

Auto Dispatch Size .autodispatchsize 🔁
– Auto Dispatch Size (自動ディスパッチサイズ) — オンにするとコンピュートシェーダのlocal sizeと出力テクスチャ解像度からディスパッチサイズを自動計算
– 1ピクセルあたり少なくとも1スレッドが実行されることを保証

Dispatch Size .dispatchsize 📐
– Dispatch Size (ディスパッチサイズ) — コンピュートシェーダ実行時のディスパッチサイズをXYZ方向に手動指定
– Auto Dispatch Sizeがオフのとき有効

dispatchsizex: X方向
dispatchsizey: Y方向
dispatchsizez: Z方向

出力アクセス・型 `.outputaccess` 📤

出力テクスチャへのアクセス方式とテクスチャ型を選択

項目	内部名	説明
Write Only	`.writeonly`	書き込みのみ（デフォルト・最高速）
Read Only	`.readonly`	読み取りのみ
Read-Write	`.readwrite`	読み書き両用（前フレーム参照やフィードバック用途）

3Dテクスチャ深さ `.depth` 📏

3Dテクスチャ出力時の深さ設定

項目	内部名	説明
Input	`.input`	入力TOPの深さをそのまま使用
Custom	`.custom`	`Custom Depth`パラメータで手動指定

クリア設定 `.clear` 🧹

Custom Depth .customdepth 📏
– Custom Depth (カスタム深さ) — 3Dテクスチャの深さを手動指定
– DepthがCustomのとき有効

Clear Outputs .clearoutputs 🧽
– Clear Outputs (出力クリア) — シェーダ実行前に出力テクスチャをClear Valueで初期化

Clear Value .clearvalue 🎨
– Clear Value (クリア値) — 出力テクスチャを初期化するRGBA値

clearvaluer: 赤チャンネル
clearvalueg: 緑チャンネル
clearvalueb: 青チャンネル
clearvaluea: アルファチャンネル

入力マッピング `.inputmapping` 🔁

3Dテクスチャ生成時の入力テクスチャの分配方式

項目	内部名	説明
All Inputs to Every Slice	`.all`	全入力を各スライスに渡す（デフォルト）
N Input(s) per Slice	`.ninputs`	`N Value`個ずつ順に各スライスへ割り当て、入力が尽きたら先頭へループ

Nスライス値 `.nval` 🔢

N Input(s) per Sliceモード時のスライスあたり入力数:

N Value: N Value (Nスライス値) — N Input(s) per Sliceモード時に各スライスへ渡す入力数を指定。例えば2に設定すると最初の2入力が第1スライス、次の2入力が第2スライスに割り当てられます。

UV拡張モード `.inputextenduv` 🔂

テクスチャサンプリング時のUV範囲外動作

項目	内部名	説明
Hold	`.hold`	エッジ値を保持（クランプ）
Zero	`.zero`	黒（0,0,0,0）を返す
Repeat	`.repeat`	繰り返し（タイリング）
Mirror	`.mirror`	鏡映繰り返し

W拡張モード `.inputextendw` 🔃

3DテクスチャのW座標範囲外動作

項目	内部名	説明
Hold	`.hold`	エッジ値を保持
Zero	`.zero`	黒を返す
Repeat	`.repeat`	繰り返し
Mirror	`.mirror`	鏡映繰り返し

カラーバッファ数 `.numcolorbufs` 🎨

1回のシェーダ実行で同時出力するRGBAバッファ数:

# of Color Buffers: # of Color Buffers (カラーバッファ数) — シェーダ1回の実行で出力できるRGBAバッファの数。デフォルトは1。値を増やすと複数バッファが確保され、シェーダのfragColor[N]等で複数出力を同時に書き込めます。

Vectors Page 🔢

ベクトル型uniform `.vec` 🔢

Vector .vec 📐
– Vector (ベクトル) — ベクトル型uniformのシーケンス。複数のベクトルuniformを順に定義

Name .vec0name 🏷️
– Name (名前) — シェーダ内で宣言したuniform名と一致させる文字列

Value .vec0value 🎚️
– Value (値) — uniformに渡す値。最大4成分（vec4まで）

vec0valuex: X成分
vec0valuey: Y成分
vec0valuez: Z成分
vec0valuew: W成分

Arrays Page 📊

配列型uniform `.array` 📊

Array .array 📚
– Array (配列) — 配列型uniformのシーケンス。CHOPの値をシェーダへ配列として送信

Name .array0name 🏷️
– Name (名前) — uniform名。CHOPの最大4チャンネル分を単一uniformとして送信可能
– 右側のメニューでfloat/vec2/vec3/vec4を選択し、データは.x=第1チャンネル、.y=第2チャンネル…のように補間して格納

Type .array0type 🔤
– Type (型) — シェーダ内でのuniform型を指定

float: 単精度浮動小数
vec2: 2成分ベクトル
vec3: 3成分ベクトル
vec4: 4成分ベクトル

CHOP .array0chop 🎚️
– CHOP — シェーダへ送信するチャンネルを保持するCHOPへのパス

Array Type .array0arraytype 🗂️
– Array Type (配列型) — uniformの格納方式

Uniform Array: 全GPUで利用可能な標準のUniform Array
Texture Buffer: テクスチャメモリを使う方式。大量の値を格納できるが新しいGPUが必要

Matrices Page 🧮

行列型uniform `.matrix` 🧮

Matrix .matrix 🧮
– Matrix (行列) — 行列型uniformのシーケンス

Name .matrix0name 🏷️
– Name (名前) — シェーダ内で宣言した行列uniform名

Matrix Value .matrix0value 📐
– Matrix Value (行列値) — 割り当てる行列値。記法は公式ドキュメントのMatrix Parametersを参照

Atomic Counters Page 🔢

アトミックカウンタ `.ac` 🔢

Atomic Counter .ac 🔢
– Atomic Counter (アトミックカウンタ) — アトミックカウンタuniformのシーケンス。詳細は公式Atomic Countersを参照

Name .ac0name 🏷️
– Name (名前) — アトミックカウンタuniformの名前

初期値設定 `.ac0initvalue` 🎯

アトミックカウンタの初期値供給方式

項目	内部名	説明
Single Value	`.val`	単一の値で全カウンタを初期化

初期値詳細 `.ac0value` 🎚️

Initial Value .ac0singlevalue 🔢
– Initial Value (初期値) — 同バインディング内の全アトミックカウンタを初期化する単一値

Initial Values CHOP .ac0chopvalue 🎚️
– Initial Values CHOP (初期値CHOP) — アトミックカウンタの初期値群を提供するCHOPへの参照。トラック順に値を読み取り、不足分は0で埋める

Constants Page 🧷

定数uniform `.const` 🧷

Constant .const 🧷
– Constant (定数) — 定数uniformのシーケンス

Name .const0name 🏷️
– Name (名前) — シェーダ内で宣言した定数名

Value .const0value 🔢
– Value (値) — 定数に渡す値

Common Page 🔧

Output Resolution `.outputresolution` 🖼️

Common Pageの全パラメータは scripts/bulk/_PURE_sync_common_pages.bat で style/common-pages/TOP.json から同期されます:

Output Resolution: TOPの出力解像度を指定。詳細はsync_common_pages.py同期後の正典を参照

実践アイデア 💡

Example 1: 音声スペクトルを映像化 🔊

Audio Device In CHOP → Audio Spectrum CHOP → CHOP to TOP → GLSL Multi TOP (custom pixel shader) → Out TOP

マイクから取得した音声を周波数スペクトルに変換しテクスチャ化、GLSL Multi TOPに記述したピクセルシェーダで周波数帯ごとに色相変化や波形歪みを生成して映像出力する基本フロー。

Audio Device In CHOPでマイク入力を取得
Audio Spectrum CHOPでFFT処理してスペクトルを算出
CHOP to TOPでスペクトルをテクスチャ化しGLSL Multi TOPの第1入力に接続
Pixel ShaderのDATでsTD2DInputs[0]からサンプリングし、周波数帯ごとの色相を計算
Out TOPに結果を出力

Example 2: 複数カメラ映像のカスタム合成 🎬

Video Device In TOP ×2 → GLSL Multi TOP (custom blend shader) → Out TOP

2系統のカメラ映像をGLSL Multi TOPに同時入力し、ピクセルシェーダで差分強調や色相置換などのカスタムブレンド式を実装して、標準のComposite TOPでは表現できない非線形合成を実現する例。

Video Device In TOPを2つ用意しGLSL Multi TOPの第1・第2入力に接続
Pixel Shader DATにsTD2DInputs[0]とsTD2DInputs[1]を任意のブレンド式で合成するコードを記述
# of Color Buffersを増やせば合成結果と差分マスクを同時出力

Example 3: コンピュートで粒子演算 ⚙️

GLSL Multi TOP (compute shader, Read-Write output) → Feedback TOP → 次フレーム入力

粒子の位置・速度を浮動小数点テクスチャに格納し、コンピュートシェーダで毎フレーム物理演算を実行する応用例。Output AccessをRead-Writeに設定して前フレームの値を参照し、Feedback TOPと組み合わせて粒子状態を時間発展させる。

ModeをCompute Shader、Pixel Formatを32-bit float (RGBA)に設定
Output AccessをRead-Writeに変更して前フレームのテクスチャを参照可能化
Compute Shader DATに位置・速度更新ロジック（重力・反発・境界判定など）を記述
Feedback TOPでループを構成し時間発展を継続

Info CHOP情報 📊

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

TOP共通情報 🖼️

resx: 出力テクスチャの横幅（ピクセル）
resy: 出力テクスチャの縦幅（ピクセル）
aspectx / aspecty: 出力テクスチャの横・縦アスペクト比
depth: 3Dテクスチャ・2D Texture Array出力時のスライス数
pixel_format: 出力ピクセルフォーマットの識別子

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

よくある問題と解決策 🔧

❌ Problem: シェーダのコンパイルが失敗する
✅ Solution:

GLSL Multi TOPのInfo DATでコンパイルエラーメッセージを確認し、行番号と原因を特定
GLSL Versionを必要な機能に合うバージョン（compute shaderは4.30以上）に引き上げ
Preprocess DirectivesのDATで#defineが重複していないか確認

❌ Problem: 入力テクスチャが黒く表示される
✅ Solution:

シェーダ内でsTD2DInputs[N]のNが正しい入力番号を指しているか確認
Input Extend Mode UVをHoldに変更してエッジ外サンプリングの黒返却を回避
前段TOPのPixel Formatが空テクスチャ（解像度0）になっていないか確認

❌ Problem: コンピュートシェーダの結果が反映されない
✅ Solution:

ModeがCompute Shaderに切り替わっているか確認
Output AccessをRead-Writeに変更し、前フレーム参照と書き込みの両方を許可
Auto Dispatch Sizeをオフにしてlocal sizeと整合するDispatch Sizeを手動指定

❌ Problem: GPU負荷が高くフレームレートが低下する
✅ Solution:

Pixel Formatを必要最小限（16-bit float等）に下げて帯域とVRAMを節約
# of Color Buffersを必要数まで減らし不要な書き込みを削除
上流でResolution TOPを使用し処理解像度を下げる

概要 📖 – GLSLでテクスチャを描く

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

GLSL Page 📁

シェーダ設定 .glslsettings 🎛️

シェーダソース .shadersources 📝

コンピュート実行設定 .computesettings ⚙️

出力アクセス・型 .outputaccess 📤

3Dテクスチャ深さ .depth 📏

クリア設定 .clear 🧹

入力マッピング .inputmapping 🔁

Nスライス値 .nval 🔢

UV拡張モード .inputextenduv 🔂

W拡張モード .inputextendw 🔃

カラーバッファ数 .numcolorbufs 🎨

Vectors Page 🔢

ベクトル型uniform .vec 🔢

Arrays Page 📊

配列型uniform .array 📊

Matrices Page 🧮

行列型uniform .matrix 🧮

Atomic Counters Page 🔢

アトミックカウンタ .ac 🔢

初期値設定 .ac0initvalue 🎯

初期値詳細 .ac0value 🎚️