【TouchDesigner】『GLSL MAT』の使い方 3次元でぐりぐり動かしてみる

ホーム
CG関連
【TouchDesigner】『GLSL MAT』の使い方 3次元でぐりぐり動かしてみる

CG関連

2019.07.16

【TouchDesigner】『GLSL MAT』の使い方 3次元でぐりぐり動かしてみる

『プログラミング』を使ってかっこよく、
インタラクティブな映像をつくりたいなと思い、
覚え始めた『TouchDesigner』。

『TouchDesigner』と『GLSL(シェーダー言語)』を組み合わせることで、
ヌルヌル動く映像がつくれることを知り、
『GLSL』をもりもり覚えていたのですが、

『GLSL』は、
C++ベースの『プログラミング』に加え、
大学理系の高度な数学がもりもり必要なこともわかり、
一から作るとなるとなかなかハードルが高いなぁというのも実感していて。

アオキ

どうにかもうちょい楽してかっこいい映像つくる方法ないもんだろうか。

アオキ

例えばこう、『TouchDesigner』と『GLSL』をうまいこと組み合わせる的な。

と思いつつとあるサイトを読み漁っていたら、ありました。

とあるサイト：
映像音響処理概論2018 第十回
 映像音響処理概論2018 第十八回

アオキ

やっぱあるのね・・『TouchDesigner』できること多すぎでっせ・・(すごい

Sponsored link

『GLSL MAT』と『GLSL TOP』の使い分け

『TouchDesigner』には大きく分けて2種類の『GLSL』関連のオペレータが存在します。

GLSL TOP ・・2次元(内部的に1枚の板ポリゴンが貼られている)
GLSL MAT ・・3次元(頂点ごとに動かせる)・・Geometory COMPと組み合わせて使う

『GLSL TOP』は画面全体に色をつけていたのに対し、
『GLSL MAT』は描画された部分のピクセルに対して色をつけるようです。

『GLSL TOP』の記事はこちら。

もんプロ～問題発見と解決のためのプログラミング〜

【TouchDesigner】で『GLSL(シェーダー)』を使う方法まとめ【画像あり】

https://coinbaby8.com/touchdesigner-with-glsl.html

手や身体の動きに合わせて映像が変わっていく『インタラクティブ』な映像をつくりたいと始めた『TouchDesigner』。『TouchDesigner』とセンサーやらを繋げるとこんな映像がつくれるようで。かっちょいい・・ぜひやってみたい・・・色々調べると、かっこよくてなめらかな映像を作るには『GLSL』を使えた方がいいようで。ということで今回は、『TouchDesinger』で『GLSL』を使う方法についてまとめてみました。TouchDesignerでGLSLを使う方法『TouchDesigner』で『GLSL』を使う方法は大きく2つあるようです。『GLSL TOP』・・2D向け。...

参考サイトの内容を見ていると、

『SOP』->『Geometory COMP』で3Dのモデルを作りつつ、

『GLSL MAT』-> 『Geometory COMP』として繋いで変形させたり、

『Noise TOP』->『GLSL MAT』-> 『Geometory COMP』として繋いでノイズをかけたり。

アオキ

『GLSL MAT』を使うときは『Geometory Comp』もセット、と覚えておくと良さそうです。

※『GLSL MAT』での変形はGPU上で実行されるのでとても高速です。

『GLSL MAT』の説明

『GLSL MAT』を生成すると、テキストオペレータが3つくっついてきます。

glsl_vertex・・バーテックスシェーダ(頂点シェーダ)・・頂点情報
glsl_pixel・・ピクセルシェーダ(フラグメントシェーダ)・・色
glsl_info・・エラーログなど表示

フラグメントシェーダ&エラーログの組み合わせは、
『GLSL TOP』と同じかなと思います。

『GLSL MAT』のバーテックス(頂点)シェーダにはオリジナルのメソッドがいくつか用意されています。

TDDeform・・モデル・ビュー座標変換用の関数
TDWorldToProj()・・プロジェクション座標変換用の関数
texture・・テクスチャの色情報から頂点の位置にエフェクトをかけられる

アオキ

3D描画となると、3つの座標軸が必要になるようで。

モデル・・物体ごとの座標
ビュー・・カメラの座標
プロジェクション・・画面に表示されるスクリーン

『バーテックスシェーダ』->『フラグメントシェーダ』の情報受け渡しは、

バーテックスシェーダ・・out指定子
フラグメントシェーダ・・in指定子

を使います。

// vertex
out vec3 vUv;

// fragment
in vec3 vUv;

Sponsored link

『TouchDesiner』で『GLSL MAT』を使ってみる

参考サイトにあった動画を実際に試してみました。

構成としては、

『Sphere SOP』-> 『Geometory COMP』と
『Noise TOP』->『GLSL MAT』->『Geometory COMP』

とつないで、

『Geometory COMP』でガッチャンコという内容になります。

最終的にこんな映像になります。

まずは、『Sphere SOP』を作成します。

線を伸ばす最中にタブキーを押すことで、
接続できる『オペレータ』が表示されます。

『Geometory COMP』を生成します。

つながった状態で生成されました。

『GLSL MAT』を生成します。

Sponsored link

生成された『GLSL MAT』をクリックして、
『Geometory COMP』にドラッグドロップします。

メニューが表示されるので、
『Parm: Material』をクリックします。

これで『Geometory COMP』と『GLSL MAT』がつながります。

『Geometory COMP』->Render->Material に

『GLSL MAT』の名前が表示されます。

動かすために、『Noise TOP』を生成します。

『GLSL MAT』を選択した状態で、
『GLSL MAT』->Samplers1->TOP の箇所に、

『Noise TOP』をドラッグドロップします。

Sampler name は『uNoise』としています。

アオキ

uはおそらく『GLSL』で外部からの信号を受信できる『uniform』修飾子の頭文字です。

VertexShader(頂点シェーダ)の中身を少し書き換えます。

デフォルト。

// Example Vertex Shader

void main() 
{
    vec4 worldSpacePos = TDDeform(P);
    gl_Position = TDWorldToProj(worldSpacePos);
}

書き換え後。

// Example Vertex Shader

uniform sampler2D uNoise; //ここを追記

void main() 
{
    vec4 c = texture(uNoise, uv[0].xy); //ここを追記
    
    vec4 worldSpacePos = TDDeform(P + c.xyz); //ここを追記
    gl_Position = TDWorldToProj(worldSpacePos);
}

texture()関数・・どのテクスチャのどの部分の色を使うかを指定
ほとんどの場合　uv[0].xy を指定していればOK

TDDeform(P + c.xyz) として頂点の位置を動かすパラメタとして使います。

アオキ

なんともいえないギザギザな形に変形しました。(なんかすごい)