引き続き【TouchDesinger】で『GLSL』を使う動画を見つつ内容メモしていきます。

前回の記事

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

【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その1と2

https://coinbaby8.com/td-glsl-movie-learning1.html

前回の記事で『TouchDesigner』と『GLSL』を連携させる方法はわかったものの、関連記事どうもまだしっくりこないというか、そもそも『TouchDesigner』もうまく使いこなせていないので、どうにかうまい具合に『TouchDesigner』と『GLSL』をまとめて覚えられる方法がないかとググっていたら、ありました。その名も、Introduction to GLSL in TouchDesigner というYoutube動画。2018年7月にBrooklyn Research という会社で行われたワークショップの模様が撮影されています。な、なんて便利な時代なんだ・・全編英語で全8回あり、それぞれ3...

動画はこちら。

TDでGLSL 画像の合成 加算と乗算

今回は画像の合成の話でした。

画像合成にはいくつか方法があり、
『Add CHOP』オペレータなどを使うと画像合成できますが、

『GLSL』でも画像合成できるようです。

コード

// Example Pixel Shader

// uniform float exampleUniform;

out vec4 fragColor;
void main()
{
    vec4 color = vec4(0); //初期化
    vec4 color1 = texture(sTD2DInputs[0], vUV.st); //チャネル1
    vec4 color2 = texture(sTD2DInputs[1], vUV.st); // チャネル2
    
    color = color1 + color2; // 足し算で加算、掛け算で乗算
    
    fragColor = TDOutputSwizzle(color);
}

Addは加算でMultiplyは乗算。

Add = result.rgba = src.rgba + dst.rgba
Multiply = result.rgba = src.rgba * dst.rgba

Wikipedia Blend_modes

Overは重ね合わせ。アルファ(透過度)を調整するかたち。

Over
result.rgb = src.rgb + (1-src.a) * dst.rgb;
result.a = src.a + (1-src.a) * dst.a;

Wikipedia Alpha_comositing

アオキ

コードで調整できるのは楽ですね。

TDでGLSL 画像の合成 multiMix

動画は7:30〜。

パレット内の『multiMix』は異なるレイヤーをインプットにできる

レイヤー1とレイヤー2。

『multiMix』の中に入ると『GLSL』コードが見れる。

multiMix -> mix -> GLSL Multi

『GLSL』コードの中に
blend
add
などが定義されています。

TDでGLSL GPU消費率の確認方法

動画12:35〜。

uniform でuOffset 作成。

uniform内valueでsin使って -1 〜 1 の範囲で動かして、バナナを動かしてテスト。

math.sin(me.time.seconds)

infoを見れば　GPU消費率がわかる。(info画像貼り忘れ。『GLSL TOP』を右クリックで見れます。)

『Pixel format』を変えるとずいぶんGPU負荷が変わる。

8bitなら軽いけど
32bit float だと重い、など。

TDでGLSL Base COMP でも動作確認

このままではルートからは見えない。

『OUT TOP』につなぐとルートからも見える。

ルート階層。

最後にコードファイルの保存方法の質疑応答。

write on toe save で外部ファイル保存かな。

アオキ

オペレータは使いやすい分機能制限されているので、うまくGLSLと絡めていきたいもんです。

次の記事

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

【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その4 描画(step関数など)

https://coinbaby8.com/td-glsl-movie-learning4.html

引き続き【TouchDesinger】で『GLSL』を使う動画を見つつ内容メモしていきます。前回の記事動画はこちら。BookofShadersおすすめだよーっていうことで、BookofShadersの内容に沿ってやってるのかなと感じました。BookOfShadersGLSL TOP で描画してみる if文と円ホワイトボード説明・・画面見えずif文の説明？中心からの距離が、設定値より大きかったら黒、小さかったら白にしてみる。out vec4 fragColor;void main(){ float value = .0; vec4 color = vec4(0.0); if(value > .2){ color = vec4(1); } fra...

　
最初の記事

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

【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その1と2

https://coinbaby8.com/td-glsl-movie-learning1.html

前回の記事で『TouchDesigner』と『GLSL』を連携させる方法はわかったものの、関連記事どうもまだしっくりこないというか、そもそも『TouchDesigner』もうまく使いこなせていないので、どうにかうまい具合に『TouchDesigner』と『GLSL』をまとめて覚えられる方法がないかとググっていたら、ありました。その名も、Introduction to GLSL in TouchDesigner というYoutube動画。2018年7月にBrooklyn Research という会社で行われたワークショップの模様が撮影されています。な、なんて便利な時代なんだ・・全編英語で全8回あり、それぞれ3...

アオキ

ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m