GLSL
TouchDesigner

TouchDesignerでGLSLを書く2つの方法

More than 1 year has passed since last update.

12/2に福岡で開催された Touch in Kyushu vol.1 に参加してきました。
https://peatix.com/event/327787

TouchDesignerではGLSLを直接書けるのですが、ちょっと便利なやり方を教えていただいたので、その時のメモです。

前準備

テキストノードでも編集はできますが、Preferences -> DATs -> Text Editor でエディタのパスを指定しておくと、コンテキストメニューの Edit Contents からエディタで編集できるようになります。

GLSL TOP で書く

まずはGLSL TOPを使う方法。
シンプルなFragment Shaderが自動で接続されるので、これを修正します。
info DAT を接続しておくとエラーなどデバッグ情報を見れて便利です。
td_glsl_top_info.png

デフォルトのFragment Shaderは以下。

// uniform float exampleUniform;

out vec4 fragColor;
void main()
{
    // vec4 color = texture(sTD2DInputs[0], vUV.st);
    vec4 color = vec4(1.0);
    fragColor = TDOutputSwizzle(color);
}

GLSLでの gl_FragColorfragColor に置き換わってます。
TDOutputSwizzle() はWindowsとmacOSのテクスチャのカラーチャンネルの差異を吸収してくれる関数です。
GLSL TOP に入力された画像や動画は sTD2DInputs[0] で取得可能。
texture(sTD2DInputs[0], vUV.st) でUVに合わせたカラー値を取得できます。

外部変数の設定は、 Paremeters で Vector1 などに変数名と値を入力し、コードに対応した変数名を uniform で宣言すれば使えるようになります。

uniform float iTime;
uniform vec2 iResolution;

td_glsl_top_parametors.png
iTime には absTime.seconds を使用して秒数を取得し、 iResolution には画面解像度を入力してます。

TouchDesignerのGLSLでも gl_FragCoord が使えるので、以下のような現在の画素位置を0.0-1.0に正規化するコードなどがそのまま使えます。

vec2 p = (gl_FragCoord.xy * 2.0 - iResolution) / min(iResolution.x, iResolution.y);

これでShaderToyのようなシェーダーアートができますね。

GLSL TOPのドキュメントはこちら。
ノイズ関数など便利機能が用意されています。
https://www.derivative.ca/wiki099/index.php?title=Write_a_GLSL_TOP

GLSL MAT で書く

GLSL TOPではFragment Shaderしか書けないのですが、Vertex Shaderやサーフェイスシェーダを書く場合は GLSL MAT を使います。
が、イチからシェーダを書くのは大変なので簡単な方法を紹介しておきます。

Phong MAT もしくは PBR MAT を配置します。
次に、配置したオペレータの Parametors -> RGB -> Output ShaderOutput をクリックします。
td_output_shader.png

すると、シェーダコードが出力されるので、これをベースにお好みに修正してくとよいです。
td_glsl_mat_phong.png

更に詳しい情報はGLSL MATのドキュメントで得られるでしょう。
https://www.derivative.ca/wiki099/index.php?title=Write_a_GLSL_Material