TouchDesignerでGLSLを使ってみた〜基礎編〜
こんにちは。
TouchDesignerでGLSLを使うことがあったので、自分用のまとめです。
GLSLとは
一言で言うと、シェーダーを作るための言語です。WebGLなどでも使えるようなのですが、今回はTouchDesignerで使ってみます。シェーダーが書けると、表現の幅が広がりそうです。
TDでGLSLを触る
GLSL TOP と MAT があるのですが、TOPは頂点シェーダーが無くフラグメントシェーダーのみで(平面に描画するイメージ)、MATは頂点シェーダーがありマテリアルとして使用するイメージです。
GLSL TOP
まずはGLSL TOP オペレーターを配置します。
このglsl2_pixel のFile のEdit をクリックして開かれるファイルを編集していきます。ちなみに、このglsl2_info にエラーメッセージなどが表示されます。
ではパラメーターなどの入力方法を説明します。
先ほど開いたファイルの冒頭に、追加したいパラメーター名を宣言します。
//時間で色が変わる
uniform float iTime;
out vec4 fragColor;
void main()
{
vec4 color = vec4(sin(iTime/2),1.0,0.5,1.0);
fragColor = TDOutputSwizzle(color);
}この「uniform」で宣言した変数がTouchDesigner側で入力するパラメーターになります。そこで、GLSL TOPのVectors1 に次のように入力します。
今回は、時間を取得したかったのでこのようになりました。同様に、マウスからの入力などもこれで取れます。
GLSL MAT
GLSL MAT は、他のMATと同じようにマテリアルとして使うオペレーターです。
glsl_pixel がフラグメントシェーダーでglsl_vertex が頂点シェーダーです。TOPと異なるのは、
in Vertex{
vec4 color;
}vVtx;などと書くことでフラグメントシェーダーから頂点シェーダーへ変数を受け渡せることです。
他のGLSLとの書き換え
調べたり、Shader Toy のようなサイトを見ていると、そのままコピペしてもエラーが出て動かないことがあります。
これは少しだけTD独特の(?)記法があるからです。このような事例をまとめておきます。
解像度
コードを見ていると「fragCoord」と言う変数が出てくることがあると思うのですが、これはピクセルの位置を読み込むためのものです。TDでは次のように追記すればOKです。
vec2 fragCoord = vUV.xy * iResolution;
vUVがTDでピクセルの位置を読み込むための変数なのですが正規化されているので解像度を掛けて戻します
出力変数
多くのコードでは「gl_FragColor」となっていると思うのですが、TDでは「fragColor」です。
関数
これも同様に多くは「void main(void){}」となっていますが、TDでは「void main(){}」です。
その他
その他は大体パラメーターのせいなので、glsl_infoを見つつパラメーターを直していきましょう。
