CG関連

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

前回の記事で『TouchDesigner』と『GLSL』を連携させる方法はわかったものの、

関連記事

どうもまだしっくりこないというか、

そもそも『TouchDesigner』もうまく使いこなせていないので、

どうにかうまい具合に『TouchDesigner』と『GLSL』を
まとめて覚えられる方法がないかとググっていたら、ありました。

その名も、Introduction to GLSL in TouchDesigner というYoutube動画。

2018年7月にBrooklyn Research という会社で行われたワークショップの模様が撮影されています。

アオキ
な、なんて便利な時代なんだ・・

全編英語で全8回あり、それぞれ30分以上あるようで、
なかなか骨太な内容ではありますが、

備忘録もかね、少しずつまとめて見ることにしました。

このページでは 第1回と第2回の動画の内容をざっくりとメモしています。

Sponsored link

TouchDesignerでGLSL動画 1/8

まずは1本目。

動画はこちら。

動画1本目は主に、『TouchDesigner』から『GLSL』を使う方法と、
簡単な説明になっています。

前回の記事でだいたいカバーできているかなと思います。

前回の記事

LFO CHOP との連携 32:20〜

『LFO CHOP』を配置します。

『LFO CHOP』・・(Low Frequency Oscillator) 2つの方向にウェーブを作成

『GLSL TOP』の Vector1→uniform name に、

op('lfo1')[0] 

// opがオペレータ
// かっこの中がオペレータの名前

と指定することで、『LFO CHOP』の値が入力として使えるようになります。

GLSL TOP パラメータ画面表示 36:10〜

『GLSL TOP』右下の『+』ボタンをクリックした状態で、

『GLSL TOP』オペレータ内を右クリックし、

『Display Pixel Values』をチェックすると、

オペレータ内にuv値、xy値、RGBA値が表示されるようになります。

TOP to CHOP オペレータとの連携 37:45〜

『TOP to CHOP』オペレータを生成後、

『GLSL TOP』をドラッグ&ドロップすることで、

『TOP to CHOP』にRGBA値などが表示されます。

オペレータのまとめ方 38:45〜

『Base COMP』を使うと、オペレータ群をまとめることができます。

『Base COMP』にユニークな名前をつけて、

『Base COMP』の中に作成したオペレータ群をまとめています。

動画内で紹介されていた外部リンクはこちら。

GLSL TOPページ

Write a GLSL TOP

OpenGLのDataTypeページ

TouchDeisgnerでGLSL動画 2/8

続いて第二回の動画。

動画はこちらになります。

Sponsored link

sTD2DInputsの説明 2:10〜

sTD2DInputs[0]・・012でインプットを分けている。

0は『GLSL TOP』左上のインプット箇所に対応しています。

パレットの使用方法 13:38〜

画面左上の 『いかり?マーク』をクリックすると『パレット』が表示されます。

『ImageFilters』の『twirl』をドラッグドロップして生成しています。

アオキ
twirlは日本語だと『くるくる回る』という意味になります。

『Move File In』から線を繋いで画像を表示させています。

『twirl』をダブルクリックすると中身が見れて、

『GLSL』の記載も見ることができます。

『twirl』メニュー内のTwirl, Size, Center Point を変更することで、
グニャッとしたエフェクトの位置・大きさを変えることもできます。

UV座標の中心設定 19:10〜

uv座標は左下が(0, 0)、右上が(1, 1)の座標になっているので、

中心を(0,0)にするための設定をしています。

uniform float uEffectScale;
out vec4 fragColor;

void main(){
    
    vec4 color = texture(sTD2DInputs[0], vUV.st);
    
    vec2 myUVs = vUV.st;

    vec2 center = vec2(0.5); // 0.5引くよう

    vec2 directionFromCenter = vUV.st - center; // uvで0.0をセンターに

    myUVs = vUV.st + uEffectScale * directionFromCenter;

    color = texture(sTD2DInputs[0], myUVs.xy);
    
    fragColor = TDOutputSwizzle(color);

}

ノーマライズ(正規化)をかけることでぐにゃーという動作になっていました。

uniform float uEffectScale;
out vec4 fragColor;

void main(){
    
    vec4 color = texture(sTD2DInputs[0], vUV.st);
    
    vec2 myUVs = vUV.st;

    vec2 center = vec2(0.5); // 0.5引くよう

    vec2 directionFromCenter = vUV.st - center; // uvで0.0をセンターに

    myUVs = vUV.st + uEffectScale * normalize(directionFromCenter); //normalizeを追加

    color = texture(sTD2DInputs[0], myUVs.xy);
    
    fragColor = TDOutputSwizzle(color);

}

ノーマライズ(正規化)の説明でホワイトボードなどに何か書かれていたようですが、
残念ながら映像に残っておらず・・

アオキ
『twirl』の返り値が0〜1だったから正規化かけて反映された?

かなと思っています。

CHOPの連携 36:35〜

『Beat CHOP』→『Filter CHOP』→『Math CHOP』→『Null CHOP』と連携していました。

  • Beat CHOP・・テンポに合わせて値生成
  • Filter CHOP・・値を緩やかに
  • Math CHOP・・値を計算 ex) 1 を10倍して 10にするなど
  • Null CHOP・・他オペレータにデータ渡す用

『CHOP』で値を加工して『GLSL TOP』に渡す際は
最終的に『Null CHOP』を経由するのが『TouchDesigner』のお作法のようです。

『Null CHOP』をわかりやすい名前(今回はeffectScale)をつけて、

『GLSL TOP』のuniformに『Null CHOP』の名前を指定し、値を取り込んでいました。

op('effectScale')[0]

また、『Trail CHOP』を『Beat CHOP』と『Filter CHOP』に紐づけて、
値の動き方を見える化してたりしました。

  • Trail CHOP・・値をグラフにして表示

動画内で紹介されていた外部リンクはこちら。

opengl reference card 3.2

Sponsored link

TouchDesignerでGLSL動画 まとめ

なかなかたっぷりなボリュームで、

動画内でホワイトボード説明(音声のみ)があったりと、

わかりづらい箇所もあったりするものの、

しっかり映像で残っているのは本当にありがたいなと思います。

『TouchDeisgner』×『GLSL』の解説は日本語がほとんどないので、

残り6つの動画も時間ができ次第見てみたいと思います。

アオキ
TouchDesignerはうねうね動きながら操作ができるのでやっていて楽しいですな。

続き。

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

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


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

コメント

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

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

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  2. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  3. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  4. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  5. データベース

    MySQLの講座をリリースしました
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

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

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

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

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

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock