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

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

概要 📖 – GLSLシェーダで描画するパネル

GLSL COMPは、頂点シェーダとピクセルシェーダのコードを直接記述してパネル表面に GPU 描画する Panel COMPです。TOP サンプラや Uniform 変数を経由してテクスチャ・数値・色をシェーダに渡し、UI コンポーネントの背景や独自ビジュアライザを完全にカスタム実装できます。

主な用途 🎯

カスタムGLSLシェーダによるパネル描画 (UI 背景・ビジュアライザ・カスタムウィジェット等)
頂点シェーダとフラグメントシェーダによるリアルタイムGPU描画
複数TOPサンプラを入力としたシェーダエフェクト (マルチテクスチャ合成・ポストプロセス風表現)
Uniform変数 (ベクトル・定数) を介したパラメータ駆動の動的レンダリング
Panel COMP として動作するインタラクティブなGLSL描画面 (マウス・タッチ入力を受付可能)

データフロー 🔄

入力: 頂点/ピクセルシェーダ DAT + TOP サンプラ + Uniform 値
 ↓
GPU シェーダ実行 (頂点処理 → ラスタライズ → フラグメント処理)
 ↓
出力: パネル表面に描画されたピクセル

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

GLSL Page 🎨

Vertex Shader `.vertexdat` 📐

頂点シェーダコードを保持する DAT のパス指定:

Vertex Shader: vertexdat — 頂点シェーダ GLSL コードが書かれた Text DAT へのパス。パネル上の各頂点位置やフラグメント補間入力を計算する役割を担う

Pixel Shader `.pixeldat` 🖼️

ピクセル (フラグメント) シェーダコードを保持する DAT のパス指定:

Pixel Shader: pixeldat — フラグメントシェーダ GLSL コードが書かれた Text DAT へのパス。パネル各ピクセルの最終色を計算する役割を担う

Samplers Page 🗂️

Sampler シーケンス `.sampler` 🔢

シェーダから参照する TOP サンプラのシーケンス設定:

Sampler: sampler — TOP サンプラのシーケンスヘッダ。シェーダで参照する全サンプラを束ねる
Name: sampler0name — シェーダ内で使用するサンプラ名。TOP の次元に合わせて sampler2D (2D TOP) または sampler3D (3D TOP) として宣言する必要がある
TOP: sampler0top — サンプリング対象の TOP へのパス。+ ボタンを押すとテクスチャサンプリング詳細パラメータ (Extend / Filter / Anisotropy) が展開される

Extend U `.sampler0extendu` ↔️

U 方向 (横) のテクスチャ範囲外サンプリング時の境界処理方式

項目	内部名	説明
Hold	`.hold`	範囲端の値を維持してクランプ
Zero	`.zero`	範囲外を 0 (透明) で塗る
Repeat	`.repeat`	テクスチャを繰り返しタイリング
Mirror	`.mirror`	鏡映反転でタイリング

Extend V `.sampler0extendv` ↕️

V 方向 (縦) のテクスチャ範囲外サンプリング時の境界処理方式

項目	内部名	説明
Hold	`.hold`	範囲端の値を維持してクランプ
Zero	`.zero`	範囲外を 0 (透明) で塗る
Repeat	`.repeat`	テクスチャを繰り返しタイリング
Mirror	`.mirror`	鏡映反転でタイリング

Extend W `.sampler0extendw` 🧭

W 方向 (奥行き、3D テクスチャ時) の範囲外サンプリング時の境界処理方式

項目	内部名	説明
Hold	`.hold`	範囲端の値を維持してクランプ
Zero	`.zero`	範囲外を 0 で塗る
Repeat	`.repeat`	繰り返しタイリング
Mirror	`.mirror`	鏡映反転でタイリング

Filter `.sampler0filter` 🎚️

テクスチャ縮小/拡大時のフィルタリング方式

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセルをそのまま採用 (ピクセルアート向け、ジャギ強め)
Interpolate Pixels	`.linear`	周辺ピクセルをバイリニア補間 (滑らかな拡縮)
Mipmap Pixels	`.mipmap`	ミップマップピラミッドを使った高品質縮小 (縮小時のモアレを抑制)

Anisotropic Filter `.sampler0anisotropy` 💎

斜めから見たテクスチャの異方性フィルタリング強度

項目	内部名	説明
Off	`.off`	異方性フィルタリングを無効化
2x	`.2x`	サンプル数 2 倍 (軽量)
4x	`.4x`	サンプル数 4 倍 (中品質)
8x	`.8x`	サンプル数 8 倍 (高品質)
16x	`.16x`	サンプル数 16 倍 (最高品質、GPU 負荷大)

Vectors Page 📊

Vector シーケンス `.vec` ➡️

シェーダに Uniform として渡す名前付きベクトルのシーケンス設定:

Vector: vec — シェーダ Uniform として使用する名前付きベクトルのシーケンスヘッダ
Name: vec0name — シェーダ内で uniform float/vec2/vec3/vec4 として宣言した変数名と一致させる
Value: vec0value — Uniform に渡す値 (最大 4 成分)。シェーダ側で float なら 1 成分目、vec2 なら 1–2 成分目、vec3 なら 1–3 成分目、vec4 なら全 4 成分が使われる

Constants Page 🔢

Constant シーケンス `.const` 🔒

シェーダ内 const 値を外部から指定する Constant シーケンス:

Constant Name: const0name — シェーダ内で宣言した const 名
Value: const0value — 当該定数に与える値

Panel / Look / Children Pages 🪟

Panel COMP からの継承 `.panel_inherited` 📋

GLSL COMP は Panel COMP の特殊化として動作するため、Panel COMP の全パラメータを継承:

Panel Page: display / enable / cursor / multitouch / uvbuttons / resize / reposition 等、Panel COMP 共通のインタラクション設定一式
Look Page: bgcolor / bgalpha / top (背景 TOP) / border* / opacity / composite 等、見た目と合成方式の設定一式
Children Page: align / spacing / margin / justifyh / justifyv / fit / crop 等、子パネルのレイアウト設定一式
詳細は公式リファレンス: 各パラメータの完全な説明は Panel COMP 公式 docs を参照

Common Page 🔧

Common Page (sync 待ち) `.common_sync_placeholder` 🔄

COMP family canonical Common Page (sync スクリプトで上書きされるプレースホルダ):

sync 対象: Parent Shortcut / Global OP Shortcut / Internal OP / Node View / Cloning / Load on Demand / External .tox 関連 / Sub-Component to Load / Relative File Path Behavior 等

実践アイデア 💡

Example 1: カスタムビジュアライザ背景 🌈

Text DAT (Pixel Shader) → GLSL COMP → UI Background

Pixel Shader DAT にプロシージャルなパターン (グラデーション・ノイズ・幾何模様) を記述し、GLSL COMP の Panel 表面で実行することで UI 背景を完全にカスタム生成するフロー。

Text DAT に Pixel Shader コードを記述 (例: 時間で変化するグラデーション)
GLSL COMP の Pixel Shader パラメータに当該 DAT へのパスを設定
GLSL COMP を Container COMP の子としてレイアウトし UI 背景として配置
uTime 等の Uniform を Vector ページから渡してアニメーション化

Example 2: マルチテクスチャ合成シェーダ 🎨

Movie File In TOP × N → GLSL COMP (Samplers) → 合成パネル

複数の TOP をサンプラとして GLSL COMP に流し込み、Pixel Shader 内でブレンド・マスク・カラーグレーディング等を行ってパネル上に直接合成結果を描画する例。

Samplers ページで複数 TOP (背景・前景・マスク等) をサンプラとして登録
Pixel Shader 内で texture(sampler0, vUV) / texture(sampler1, vUV) を呼び出し合成式を記述
Vector ページで blend ratio や色調補正値を Uniform として渡す

Example 3: インタラクティブシェーダ UI 🖱️

Mouse Position (Panel Values) → Vector Uniforms → GLSL COMP

Panel COMP の u / v / state 値をシェーダの Uniform に流し、マウス位置や押下状態に応じて GLSL 描画内容が変化するインタラクティブパネルを構築する例。

GLSL COMP のパネル上でマウス UV / state を取得 (Panel Page で multitouch / uvbuttons を有効化)
Vector ページで uMouse uniform を作り、Panel Values への参照式を設定
Pixel Shader 内で uMouse からの距離やステート分岐に基づき色を変える

Info DAT 情報 📊

GLSL COMP はシェーダコンパイル結果・エラーログ等の詳細情報を Info DAT 経由で取得できます。

COMP 固有情報 📦

num_children: コンポーネント内部の子 OP の総数
num_dats: 内部 DAT の数
num_chops: 内部 CHOP の数
num_tops: 内部 TOP の数
num_sops: 内部 SOP の数

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数

GLSL COMP 固有情報 📊

compile_result_vertex: 頂点シェーダのコンパイル成否ステータス
compile_result_pixel: ピクセルシェーダのコンパイル成否ステータス
shader_log: シェーダコンパイル時の警告・エラーログ全文
uniform_count: シェーダ内で宣言されている Uniform 変数の総数

Panel COMP 共通情報 📊

u / v: マウス位置のパネル正規化座標 (0.0–1.0)
state: マウスボタン押下状態 (0/1)
inside: カーソルがパネル内にあるかのフラグ
width / height: パネルのピクセル単位サイズ

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

よくある問題と解決策 🔧

❌ Problem: パネルが真っ黒/真っ白にしか描画されない
✅ Solution:

Info DAT でシェーダコンパイルログを確認し、エラー行を特定
Vertex Shader / Pixel Shader パラメータの DAT パスが正しいか確認
Pixel Shader が fragColor を必ず書き込んでいるか (未定義値は実装依存で黒/白)

❌ Problem: サンプラからテクスチャが読めない
✅ Solution:

Samplers ページの Name と Pixel Shader 内の uniform sampler2D 宣言名が完全一致しているか確認
対象 TOP の次元 (2D / 3D) に対しシェーダ宣言 (sampler2D / sampler3D) が一致しているか確認
対象 TOP に有効な解像度・データが流れているかを TOP の viewer で確認

❌ Problem: Uniform 値が更新されない/期待値と異なる
✅ Solution:

Vectors ページの Name と Pixel Shader 内の uniform 宣言名が一致しているか確認
シェーダ側の宣言型 (float / vec2 / vec3 / vec4) と Value の有効成分数が合っているか確認
コンパイル時に未使用 Uniform は最適化で削除される — 値を使うコードがシェーダ内にあるか確認

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – GLSLシェーダで描画するパネル

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

GLSL Page 🎨

Vertex Shader .vertexdat 📐

Pixel Shader .pixeldat 🖼️

Samplers Page 🗂️

Sampler シーケンス .sampler 🔢

Extend U .sampler0extendu ↔️

Extend V .sampler0extendv ↕️

Extend W .sampler0extendw 🧭

Filter .sampler0filter 🎚️

Anisotropic Filter .sampler0anisotropy 💎