GLSL/WebGL

【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 に、

と指定することで、『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)にするための設定をしています。

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

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

アオキ
『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』の名前を指定し、値を取り込んでいました。

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

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

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

opengl reference card 3.2

Sponsored link

TouchDesignerでGLSL動画 まとめ

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

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

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

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

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

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

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

続き。

 

コメント

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

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

CAPTCHA


関連記事

  1. TouchDesigner

    【TouchDesigner】で『ShaderToys』を使う方法【画像たっぷり】 (動画5-1)…

    連日の『TouchDesigner』で『GLSL』を使ってみる動画のメ…

  2. TouchDesigner

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

    引き続き【TouchDesinger】で『GLSL』を使う動画を見つつ…

  3. GLSL/WebGL

    【GLSL】『レイマーチング』入門その1 距離関数とレイとカメラの設定

    かっこいい『3Dプログラミング』をつくりたいとググって見つけた『レイ…

  4. GLSL/WebGL

    【GLSL】『レイマーチング』入門(2) 立体的に見せる方法〜光の反射は『内積』で〜

    プログラミングでかっこいい映像をつくる方法の一つに、『レイマーチン…

  5. GLSL/WebGL

    【GLSL】波のつくり方簡易まとめ。波もプログラミングでつくれます【コピペスタイル】

    プログラミングでかっこいい映像をつくりたいと始めた『GLSL』。関…

Sponsored link

最近の記事

  1. リベラルアーツ

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  2. クリエイティブコーディング

    三角関数の使い方〜わかりやすさ重視でまとめてみた【動画あり】
  3. 数学

    【微分】わかりやすくプログラミング目線で整理してみる【初心者向け】
  4. IoT

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  5. プログラミング

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
PAGE TOP