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

※当サイトにはプロモーションリンクが含まれます。

GLSL TOP のシェーダー実行機能を示すサムネイル

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

概要 📖 – シェーダーで画像生成

GLSL TOPは、GPU 上で動くピクセル / コンピュートシェーダーを自分で記述し、画像を自由に生成・加工する TOPです。頂点・ピクセル・コンピュートの 3 種類のシェーダーステージに対応し、uniform を通して CHOP / DAT / 他 TOP からデータを受け取れます。

主な用途 🎯

  • カスタムピクセルシェーダーによる独自の画像生成・加工処理
  • コンピュートシェーダーでの並列計算によるシミュレーション
  • マルチパスレンダリングでのポストエフェクト構築
  • uniform 変数経由でのパラメータ・テクスチャ受け渡し
  • GPU 演算を活かした高速な画像処理ノードの自作

データフロー 🔄

入力: 任意の TOP テクスチャ + uniform 群
 ↓
シェーダー実行 (ピクセル/コンピュート)
 ↓
出力: 任意フォーマットのテクスチャ

Tips

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

まる。
まる。

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

パラメータ解説 ⚙️

GLSL Page 🎛️

GLSL Version .glslversion 🔢

コンパイル時に使用する GLSL のバージョンを指定するメニュー

項目 内部名 説明
GLSL Version .glslversion GLSL Version (GLSL バージョン) — シェーダーをコンパイルする際の GLSL バージョンを選択します。プロジェクトに合わせて適切なバージョンを指定してください。

Mode .mode 🧭

記述するシェーダーの種類 (ピクセル/コンピュート) を切り替えるメニュー

項目 内部名 説明
Mode .mode Mode (動作モード) — どの種類のシェーダーを書くかを切り替えます。ピクセル/頂点シェーダーモードとコンピュートシェーダーモードの 2 系統が存在します。

※ 注意: コンピュートシェーダーモードでは Dispatch Size / Output Access / Output Type 等のコンピュート専用パラメータが有効になります。

引用元: 公式 docs

シェーダー DAT 参照 📜

Preprocess Directives .predat 🧩
– Preprocess Directives (前処理ディレクティブ) — #extension 等のプリプロセッサディレクティブをシェーダー先頭に挿入する DAT を指定します。
– TouchDesigner が uniform 宣言コードを先頭に自動付加するため、これらより前に出すべき記述はこの DAT に置く必要があります。

Vertex Shader .vertexdat 📐
– Vertex Shader (頂点シェーダー) — 頂点シェーダーのソースコードを保持する DAT を参照します。
– DAT をドラッグ&ドロップするか、DAT のパスを直接記入して指定します。

Pixel Shader .pixeldat 🎨
– Pixel Shader (ピクセルシェーダー) — フラグメント (ピクセル) シェーダーのソースコードを保持する DAT を参照します。
– 画面に出力されるピクセルごとの色を決定するメイン処理を書きます。

Compute Shader .computedat 🧮
– Compute Shader (コンピュートシェーダー) — コンピュートシェーダーのソースコードを保持する DAT を参照します。
– Mode をコンピュートに切り替えたときのみ有効です。

Compile Behavior .compilebehavior ⚙️

シェーダーをコンパイルするタイミングを制御するメニュー

項目 内部名 説明
Compile Behavior .compilebehavior Compile Behavior (コンパイル方式) — シェーダーソースをいつコンパイルするかを切り替えます。編集中の頻繁な再コンパイルを避けたい場合に調整します。

Error Behavior .errorbehavior ⚠️

コンパイルエラー発生時の挙動を制御するメニュー

項目 内部名 説明
Error Behavior .errorbehavior Error Behavior (エラー挙動) — シェーダーコンパイルエラー発生時にノードがどう振る舞うかを切り替えます。

Uniform 自動取得 🔍

uniform 名の自動取得ボタン:

  • Load Uniform Names: Load Uniform Names (uniform 名一括読込) — このボタンを押すと、シェーダー内で宣言された uniform 名をノードの uniform 系パラメータに自動でプリフィルします。未使用 uniform はコンパイラに省略されるためプリフィル対象に出ない場合があります。

コンピュートシェーダー設定 🧮

Dispatch Size .dispatchsize 📦
– Dispatch Size (ディスパッチサイズ) — コンピュートシェーダー実行時のディスパッチサイズを指定します。
– シェーダーのローカルサイズと組み合わせて、合計スレッド数が決まります。

Auto Dispatch Size .autodispatchsize ⚡
– Auto Dispatch Size (自動ディスパッチ) — 出力テクスチャの解像度とローカルサイズに合わせてディスパッチサイズを自動設定します。
– 全ピクセルに最低 1 スレッドが実行されることを保証します。

Output Access .outputaccess 🔐
– Output Access (出力アクセス) — 出力テクスチャへのアクセス方式を切り替えます。
– 前フレームの値などを読み戻したい場合は Read-Write に切り替えます。

Clear Outputs .clearoutputs 🧹
– Clear Outputs (出力クリア) — コンピュートシェーダー使用時、毎フレーム冒頭で出力テクスチャをクリアするかを切り替えます。
– オフにすると前フレームのデータが残り、シェーダー側で部分更新する設計が可能です。

Clear Value .clearvalue 🎨
– Clear Value (クリア値) — 出力クリア時に全ピクセルを塗りつぶす色を指定します。

出力テクスチャ形状 🧱

Output Type .type 🧊
– Output Type (出力テクスチャ種別) — 作成するテクスチャの種類を指定します。
– 3D テクスチャを選ぶと、各スライスごとに 1 回ずつシェーダーが実行されます。

Depth .depth 📏
– Depth (深度モード) — 3D テクスチャの深度を入力から取得するか、後述の Custom Depth から取得するかを切り替えます。

Custom Depth .customdepth 🔢
– Custom Depth (カスタム深度) — 3D テクスチャの深度を手動で指定します。
– 未指定時は入力の深度をそのまま利用します。

Input Mapping .inputmapping 🗺️
– Input Mapping (入力マッピング) — 3D テクスチャ生成時に、入力をどのようにシェーダーへ渡すかを切り替えます。
– 既定では全入力を各スライスに渡しますが、スライスごとに N 個の入力を分配するモードもあります。

N Value .nval 🔢
– N Value (N 値) — Input Mapping を N inputs per Slice に設定したときに、1 スライスあたり何個の入力を割り当てるかを決定します。
– 入力が尽きると先頭の入力に戻ってループします。

Input Extend Mode 🪟

Input Extend Mode UV .inputextenduv ↔️
– Input Extend Mode UV (UV 範囲外モード) — シェーダー内でテクスチャサンプリング時に、U / V 座標が [0-1] 範囲外になった場合の挙動を指定します。

Input Extend Mode W .inputextendw ↕️
– Input Extend Mode W (W 範囲外モード) — W 座標が [0-1] 範囲外になった場合の挙動を指定します。
– 3D テクスチャでのみ有効です。

複数出力バッファ 🎚️

複数出力バッファと入力 TOP の取り扱い:

  • # of Color Buffers: # of Color Buffers (カラーバッファ数) — シェーダーが同時に出力できる RGBA バッファ数を指定します。マルチターゲットレンダリングで複数の結果を 1 回のパスで取り出すときに使います。
  • TOPs: TOPs (入力 TOPs) — シェーダーに渡す入力 TOP 群を指定します。複数 TOP を入力テクスチャとして同時にバインドできます。

TDSimplexNoise .simplexnoise 🌀

ビルトイン Simplex ノイズ関数の精度切替メニュー

項目 内部名 説明
TDSimplexNoise() .simplexnoise TDSimplexNoise() (Simplex ノイズ実装) — シェーダー内ビルトインの Simplex ノイズの実装を Performance と Quality から選択します。Quality は既存ノイズの軸方向アーティファクトを軽減しますが速度は低下します。

Colors Page 🎨

色 uniform 設定 🌈

Pre-Multiply RGB by Alpha .premultrgbbyalpha 🔀
– Pre-Multiply RGB by Alpha (RGB を A で事前乗算) — 全 Color パラメータの RGB 値を Alpha 値で事前乗算してからシェーダーに渡します。

Color .color 🎨
– Color (色 uniform シーケンス) — 色 uniform のシーケンスエントリです。複数の色 uniform を追加できます。

Name .color0name 🏷️
– Name (uniform 名) — この色値を割り当てるシェーダー内 uniform の名前を指定します。

RGB .color0rgb 🟥
– RGB (RGB 値) — この uniform に与える RGB 値です。

Alpha .color0alpha 🟦
– Alpha (アルファ値) — この uniform に与えるアルファ値です。

Vectors Page ➡️

ベクトル uniform 設定 📐

Vector .vec 📍
– Vector (ベクトル uniform シーケンス) — ベクトル uniform のシーケンスエントリです。

Name .vec0name 🏷️
– Name (uniform 名) — シェーダー内で宣言した uniform の名前を指定します。

Value .vec0value 🔢
– Value (値) — uniform に与える値です。

Arrays Page 📚

配列 uniform 設定 🧮

Array .array 📦
– Array (配列 uniform シーケンス) — 配列 uniform のシーケンスエントリです。

Name .array0name 🏷️
– Name (uniform 名) — uniform の名前を指定します。1 つの uniform に最大 4 チャンネルまで CHOP から流し込めます。
– チャンネル数は名前右側のメニュー (float/vec2/vec3/vec4) で指定します。1 チャンネル CHOP は float、2 チャンネルなら vec2 のように対応します。

Type .array0type 🧷
– Type (シェーダー内データ型) — シェーダー内 uniform のデータ型を指定します。

CHOP .array0chop 🔌
– CHOP (入力 CHOP) — この CHOP のチャンネル群がシェーダーに送られます。

Array Type .array0arraytype 🗂️
– Array Type (uniform 配列種別) — uniform の配列種別を指定します。

Matrices Page 🧮

行列 uniform 設定 🔢

Matrix .matrix 📦
– Matrix (行列 uniform シーケンス) — 行列 uniform のシーケンスエントリです。

Name .matrix0name 🏷️
– Name (行列 uniform 名) — 行列 uniform の名前を指定します。

Matrix .matrix0value 🧩
– Matrix (行列値) — 行列 uniform に割り当てる値です。有効な指定方法は公式の Matrix Parameters の項を参照してください。

Atomic Counters Page 🔄

アトミックカウンタ uniform 設定 🧮

Atomic Counter .ac 📦
– Atomic Counter (アトミックカウンタシーケンス) — アトミックカウンタ uniform のシーケンスエントリです。

Name .ac0name 🏷️
– Name (uniform 名) — アトミックカウンタ uniform の名前を指定します。

Initial Value Type .ac0initvalue 🎚️
– Initial Value Type (初期値方式) — アトミックカウンタの初期値の取得方法を指定します (単一値か CHOP 経由)。

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

Initial Values CHOP .ac0chopvalue 🔌
– Initial Values CHOP (初期値 CHOP) — アトミックカウンタの初期値を決定する CHOP を参照します。トラック順に値が読み込まれ、足りない分は 0 で埋められます。

Constants Page 📌

定数 uniform 設定 📍

Constant .const 📦
– Constant (定数 uniform シーケンス) — 定数 uniform のシーケンスエントリです。

Name .const0name 🏷️
– Name (定数名) — シェーダー内で宣言した定数の名前を指定します。

Value .const0value 🔢
– Value (値) — 定数に与える値です。

Buffers Page 🗄️

POP バッファ uniform 設定 📦

Buffer .buffer 📦
– Buffer (バッファシーケンス) — バッファ uniform のシーケンスエントリです。

POP .buffer0pop 🔌
– POP (参照 POP) — 属性バッファを取得する POP のパスを指定します。

Attribute Class .buffer0attrclass 🧷
– Attribute Class (属性クラス) — 参照する属性のクラス (ポイント/頂点/プリミティブ等) を指定します。

Attribute .buffer0attr 🏷️
– Attribute (属性名) — POP 内で取得する属性名を指定します。

Name .buffer0name 🏷️
– Name (シェーダー内参照名) — シェーダー内でこの属性バッファを参照するときに使う名前を指定します。

実践アイデア 💡

Example 1: オリジナルピクセルシェーダー 🎨

Constant TOP → GLSL TOP (Pixel Shader DAT) → Composite TOP

Text DAT に書いたフラグメントシェーダーを GLSL TOP に流し込み、UV 座標から円・縞・グラデーションといった独自パターンを生成して後段で合成する基本フロー。

  1. Text DAT に void main(){ ... } 形式のピクセルシェーダーを記述
  2. GLSL TOP の Pixel Shader DAT に Text DAT をドラッグ&ドロップ
  3. Mode を Pixel Shader に設定し、出力解像度を Common Page で指定
  4. Composite TOP で他の TOP と重ねて最終出力を構築

Example 2: GPU パーティクル更新 🧮

Movie File In TOP → GLSL TOP (Compute Shader, Read-Write) → Feedback TOP

コンピュートシェーダーモードで前フレームのテクスチャを Read-Write アクセスし、各ピクセルを GPU パーティクルの位置・速度として更新していくシミュレーション構成。

  1. Mode を Compute Shader に切替え、Compute Shader DAT に更新ロジックを記述
  2. Output Access を Read-Write に設定して前フレーム値を読み戻し可能にする
  3. Auto Dispatch Size を有効化し、出力解像度に合わせてディスパッチを自動調整
  4. Feedback TOP と組み合わせて状態を持続させる

Example 3: ポストエフェクト合成 💡

Render TOP → GLSL TOP (custom post effect) → Composite TOP

Render TOP の出力に対して GLSL TOP でカスタムポストエフェクトを適用し、ブルームや色収差などビルトインにはない独自の質感を 1 パスで仕上げる流れ。

  1. Render TOP の出力を GLSL TOP の入力 1 に接続
  2. Pixel Shader DAT で texelFetch や texture() を用いた処理を記述
  3. uniform 経由でブルームの強さや色収差量を CHOP からリアルタイム制御

関連オペレータ 🔗

類似機能OP 🔍

  • GLSL Multi TOP — 複数パスを 1 ノードで連結実行できる GLSL TOP の派生

組み合わせ推奨OP 🔄

  • Render TOP — 3D シーンを GLSL TOP の入力として渡してポストエフェクト適用
  • Composite TOP — GLSL TOP の出力を他レイヤと合成
  • Movie File In TOP — 映像を入力テクスチャとして GLSL TOP に流し込む
  • Feedback TOP — 前フレーム結果を再入力して状態保持型シェーダーを構築
  • Noise TOP — ビルトインノイズを GLSL TOP のマスクや種テクスチャとして併用

前処理・後処理TOP 🎯

Info CHOP情報 📊

GLSL 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 テクスチャ出力時の深度 (スライス数)
  • gpu_memory_used: このノードが使用している GPU メモリ量の目安

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

よくある問題と解決策 🔧

❌ Problem: シェーダーがコンパイルエラーで真っ黒になる
✅ Solution:

  • GLSL TOP のノード Info で出るエラーメッセージを確認し、行番号と原因を特定
  • GLSL Version をシェーダーソースの #version 指定と合わせる
  • #extension 等のディレクティブは Preprocess Directives DAT に分離

❌ Problem: uniform に値が反映されない
✅ Solution:

  • Load Uniform Names を押してシェーダー側の uniform 名と一致しているか確認
  • 未使用 uniform はコンパイラに省略されるため、シェーダー本文で参照しているか確認
  • Vectors / Arrays / Matrices 各ページで Type の指定 (float/vec2/vec3/vec4) を実際の宣言に揃える

❌ Problem: コンピュートシェーダーが期待通り動かない
✅ Solution:

  • Mode を Compute Shader に切替えているか確認
  • Auto Dispatch Size を有効化、または Dispatch Size をローカルサイズに合わせて手動指定
  • 前フレーム値を読みたい場合は Output Access を Read-Write に切替

❌ Problem: 出力解像度が想定と違う
✅ Solution:

  • Common Page の Output Resolution を Custom Resolution に設定して縦横を明示
  • Use Global Res Multiplier によりプロジェクト全体の倍率が掛かっていないかを確認
  • 前段 TOP の解像度継承が意図と一致するか前処理側で Resolution TOP を挟む

参考資料 📚

その他 🔗

公式リソース 📖

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


まる。

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

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

↓日常垢
Instagram：＠malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

タイトルとURLをコピーしました