CG関連

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

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

前回の記事

動画はこちら。

Sponsored link

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

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

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

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

コード

Addは加算でMultiplyは乗算。

Wikipedia Blend_modes

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

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 の範囲で動かして、バナナを動かしてテスト。

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. CG関連

    【WebGL】入門 わかりやすく【図解】してみた
  2. CG関連

    【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】
  3. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  4. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  5. バックエンド

    【Python】手軽に試す方法2つとwebフレームワークについて【初心者向け】
PAGE TOP