Creative Plus

遊んで・学んで・試してみてクリエイティブをプラスする「デジタルアート系ブログメディア」

cp_blog_respo_01

touchdesigner

TouchDesignerでGLSLを使うために「最低限」知らなきゃいけない「超基礎」

更新日:



ナカジ(@cp_nakajun)です。

TouchDesignerはGLSLを使うことができます。

先日、映像表現の行き着く先は「GLSL」習得なのか!?
という記事を書き、映像表現者に必須のスキルとして紹介しました。

とは言え、まだまだTouchDesigner初心者の僕としては

じゃあTouchDesignerでGLSLを使うにはどうすれば良いのか??

ということになります。

実は「ココ」に関しては日本語で書かれたTouchDesignerのベスト書籍である
Visual Thinking with TouchDesigner - プロが選ぶリアルタイムレンダリング&プロトタイピングの極意
にもほとんどフォローされてません。

「そんなところを初心者がいきなり手をつけるなよ」

という感は否めませんが

気になってしまったものは仕方ありません。

せめてものイントロダクションをやろう!というのが今回です。

スポンサーリンク

TouchDesignerでGLSL

参考サイトは以下です。

まず、これには目をとおしましょう。
公式サイト ドキュメント

もう1つ、これを読んでしまえば済んでしまう!んですが
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については別の記事も書いてます。

映像表現の行き着く先は「GLSL」習得なのか!?映像表現者に必須のスキルはコレだ


cp_blog_001

cp_blog_001

サイト運営者

運営者:ナカジ
PureDataやFoxDotで音楽やってます。
インタラクティブ映像の仕事してました。
メディアアート、テクノロジーアートが主軸です。
日本のメディアアーティスト大国化に貢献したい。

運営者プロフィール&当サイトの詳細

記事を検索



プログラミングで生み出す「創造表現」

cp_blog_respo_04

-touchdesigner
-,

Copyright© Creative Plus , 2018 All Rights Reserved.