CG関連

【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その3 画像の合成

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

前回の記事

動画はこちら。

Sponsored link

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
などが定義されています。

Sponsored link

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と絡めていきたいもんです。

次の記事

 
最初の記事

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

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  2. 生成AI

    Dify講座をリリースしました【非エンジニア向け】
  3. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  4. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  5. 生成AI

    2024/5/14 OpenAI発表 まとめ
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock