TouchDesignerでGLSLを使うために「最低限」知らなきゃいけない「超基礎」
ナカジ(@cp_nakajun)です。
TouchDesignerはGLSLを使うことができます。
先日、映像表現の行き着く先は「GLSL」習得なのか！？
という記事を書き、映像表現者に必須のスキルとして紹介しました。
とは言え、まだまだTouchDesigner初心者の僕としては
じゃあTouchDesignerでGLSLを使うにはどうすれば良いのか？？
ということになります。
実は「ココ」に関しては日本語で書かれたTouchDesignerのベスト書籍である
「Visual Thinking with TouchDesigner – プロが選ぶリアルタイムレンダリング&プロトタイピングの極意」
にもほとんどフォローされてません。
「そんなところを初心者がいきなり手をつけるなよ」
という感は否めませんが
気になってしまったものは仕方ありません。
せめてものイントロダクションをやろう！というのが今回です。
TouchDesignerでGLSL
参考サイトは以下です。
まず、これには目をとおしましょう。
・公式サイト ドキュメント
もう１つ、これを読んでしまえば済んでしまう！んですが
・TouchDesignerでGLSLを書く2つの方法
僕にとって解りやすく整理したいので書きます。
超基礎となるポイント
- TDOutputSwizzle()
- sTD2DInputs[0]
- 外部変数の利用
「GLSL TOP」を配置すると以下のようにTOPとコードが入力できるようになります。
コード部分はこんな感じ
// Example Pixel Shader
// uniform float exampleUniform;
out vec4 fragColor;
void main()
{
// vec4 color = texture(sTD2DInputs[0], vUV.st);
vec4 color = vec4(1.0);
fragColor = TDOutputSwizzle(color);
}
TDOutputSwizzle()
WindowsとMacOSの間のプラットフォーム間のサポートを確実にするために、テクスチャに書き込まれた色は、まずvec4 TDOutputSwizzle(vec4)通過する必要があります。
sTD2DInputs[0]
画像や動画をGLSLで加工する時は「sTD2DInputs[0]」で取得します。
TouchDesignerの「GLSL TOP」の入力につなげばOKです。
入力を増やす場合は[]の中の数字を「0」→「1」などとしていきます。
2番目の2D入力は、任意の数の2D入力に対してsTD2DInputs[1]
また
texture(sTD2DInputs[0], vUV.st) でUVに合わせたカラー値を取得できます。
外部変数の利用
その他の変数を利用するには「GLSL TOP」のパラメータ、「Vector1」の「uniform name」に変数名、「value」に値を設定し
それに対応した変数名をコードに「uniform」で宣言することで使えるようになります。
まとめ
とりあえず「GLSL TOP」の超基礎の基礎はこんな感じです。
TouchDesignerに興味のある方は以下の書籍がオススメです。
また、GLSLについては別の記事も書いてます。
