GLSL/WebGL

【TouchDesinger】で『GLSL』を使う方法まとめ【画像あり】

手や身体の動きに合わせて映像が変わっていく『インタラクティブ』な映像をつくりたいと始めた『TouchDesigner』。

『TouchDesigner』とセンサーやらを繋げるとこんな映像がつくれるようで。

アオキ
かっちょいい・・ぜひやってみたい・・・

色々調べると、かっこよくてなめらかな映像を作るには『GLSL』を使えた方がいいようで。

ということで今回は、
『TouchDesinger』で『GLSL』を使う方法についてまとめてみました。

Sponsored link

TouchDesignerでGLSLを使う方法

『TouchDesigner』で『GLSL』を使う方法は大きく2つあるようです。

  • 『GLSL TOP』・・フラグメントシェーダのみ
  • 『GLSL MAT』・・頂点シェーダ

『GLSL TOP』と『GLSL Multi TOP』の違いは以下。

  • 『GLSL TOP』・・最大3つの入力
  • 『GLSL Multi TOP』・・入力数に制限がない

今回は『GLSL TOP』の方で試してみることにしました。

TouchDesignerでGLSLを使う(1) エディタ設定

『TouchDesigner』では普段使っているエディタを設定することができます。

エディタは使いやすければなんでもいいと思いますが、個人的に使い慣れている『VS Code』を設定しておきます。

メニューのPreferencesから

DATsの中のText Editorを選んで、『VS Code』を設定します。

これでOK。

TouchDesignerでGLSLを使う(2) 『GLSL TOP』を設置

ダブルクリックかタブキーを押して『GLSL TOP』を設置します。

置けました。

glsl2となってますが、初めて作る場合はglsl1になると思います。(glsl1として説明していきます。)

  • glsl_pixel(『Text DAT』) ・・GLSLを書く
  • glsl_info(『Text DAT』) ・・エラーなどあれば表示される

これでOK。

Sponsored link

TouchDesignerでGLSLを使う(3) 『GLSL』を書く

glsl1_pixelを選んで、メニューからEditを押します。

『VS Code』が立ち上がればOKです。

中身をこちらのコードにまるっと書き換えて保存します。

コードはこちらの記事より流用させていただきました。

TouchDesignerでGLSL sandboxやShaderToyのコードを流用したりするためにも知らなきゃいけないコト

これでOK、と思いきや、glsl1 に黄色いビックリマークが表示されてしまいます。

黄色いビックリマークを押すと、エラーメッセージが表示されています。

Warning: uniform resolution is unassigned.
Warning: uniform time is unassigned.

さきほどコピペした『GLSL』コードの中に下記コードがあるのですが、

uniform resolution
uniform time

これらを『TouchDesigner』側でも設定する必要があるんですね。

TouchDesignerでGLSLを使う(4) 『uniform』を設定する

uniform修飾子は、『GLSL』プログラム外部から、動的にパラメータを変更できるという仕組みになります。

『TouchDesigner』のデータを『GLSL』に渡すために、

glsl1をクリックして、メニューの中の『Vectors1』をクリックします。

Uniform Nameの中に、time(時間) とresolution(解像度) をそれぞれ入力します。

timeの方は、左側の+を押して入力ボックスを表示させ、 absTime.seconds と入力しておきます。

  • absTime.seconds ・・『TouchDesigner』の秒数

resolution(解像度)の方はX座標、Y座標それぞれ設定します。

  • me.par.resolutionw (X座標)
  • me.par.resolutionh (Y座標)

無事設定できれば、銀河系っぽい綺麗な映像が表示されます。

アオキ
おもわずおぉーって言っちゃう。なんか感動しますな。

resolution(解像度)は、glsl1メニュー → Common の中のResolutionに対応しています。

TouchDesignerでGLSLを使う(5) 別ウィンドウに表示する

せっかくなので別ウィンドウに表示させたいと思います。

ダブルクリックなりタブボタンでメニューを表示させ、『Window COMP』を選びます。

作成したwindow1 を洗濯してメニューを表示させた後に、

Window Operator の箇所にglsl1をドラッグドロップします。

Window Operator の欄に glsl1 と表示されればOKです。
window画面にも銀河系っぽい映像が表示されます。

『Window COMP』メニューの下の方に、
Open as Separate Window という項目があり、Openを押すと別ウィンドウで開きます。

アオキ
おぉー。これまた感動しますな。。

glsl1メニュー → Common の中のResolutionを変更することで、ウィンドウサイズも調整ができます。

Sponsored link

TouchDesignerでGLSLを使う方法 4箇所の調整

『GLSL』を一から作るのはなかなか大変なので、

初めは
GLSLSandbox』や『ShaderToy』といったサイトから引用しつつ、
コードを読み解いたり書き換えていくことになるのかなと思うのですが、

そのままコピペしてもうまく表示されなくて、

いくつか調整が必要になります。

大きく4つ変更箇所があります。

  • uniform変数の設定
  • fragCoordの設定
  • fragColorの設定
  • 入出力最適化

TouchDesignerでGLSLを使うための設定1 uniform変数の設定

時間や解像度など、外部からのデータ入力を使うために『uniform』変数を設定します。

GLSLSandboxの場合

  • time
  • resolution

ShaderToyの場合

  • iGlobalTime
  • iResolution

こちらはコードで宣言が必要です。

uniform float iGlobalTime;
uniform vec2 iResolution;

『GLSL TOP』の『Uniform』で設定すれば、外部からデータが取得できるようになります。
(画像はGLSLSandboxの場合)

時間
– absTime.seconds ・・『TouchDesigner』の秒数

解像度
– me.par.resolutionw (X座標)
– me.par.resolutionh (Y座標)

TouchDesignerでGLSLを使うための設定2 fragCoordの設定

コード上部にfragCoordを定義しておきます。

GLSLSandBoxなどで使われるfragCoord.xyは、
『ToughDesinger』では vUV.xy にあたるのですが、そのままだと変換がややこしいので、
fragCoord として定義しておきます。

main関数の中に下記を記入します。

『TouchDesigner』で採用されているvUV.xyは正規化されているので、それに合わせるかたちです。

uv・・ 画像左下が(0,0) 右上が(1,1)になる正規化された分布。今どのピクセルを処理しているかシェーダー側で知ることができる。

TouchDesignerでGLSLを使うための設定3 fragColorの設定

gl_FragColor が使われていれば fragColor に置き換えが必要です。

また、『ShaderToy』の場合、下記のようにmain関数の引数内にfragColorの出力宣言をしますが、

『TouchDesigner』に移植するときは、main関数は引数なしにして、引数だった値はmain関数の外で宣言します。

TouchDesignerでGLSLを使うための設定4 入出力最適化

フラグメントシェーダ(ピクセルシェーダ)を表示するために、
専用の関数を通す必要があります。

  • 入力 sTD2DInputs[]
  • 出力 TDOutputSwizzle()

入力はあれば設定必要。
出力は設定必須です。

『GLSL TOP』生成時のサンプルコードにもしれっと記載されています。

sTD2DInputs[0]は配列なので、入力を増やす場合は 0 -> 1 になります。

texture(sTD2DInputs[0], vUV.st) でUVに合わせたカラー値を取得できるようです。

参考記事
TouchDesignerでGLSLを書く2つの方法
[TouchDesigner]GLSL-TOPをShaderToyのフォーマットに最適化する

TouchDesignerでGLSLを使う疑問点 マウスはどうする?

GLSLSandboxで書かれているコードの中には、

マウスの位置座標を取得するものが多くあって。

『TouchDesigner』でマウスの位置座標がとれないと、もれなくエラーになってしまうので、

どうやって設定すればいいか模索中です。

アオキ
ここをセンサー入力とかに変えられれば、『インタラクティブ』に一歩近づくと思うんだけども。

2019/7/11追記
『Mouse In CHOP』 → 『Null CHOP』の連携でマウス座標がとれることがわかりました!

Sponsored link

TouchDesignerでGLSLを使う方法まとめ

『TouchDesigner』で『GLSL』を使うためには、
いくつかの設定が必要ではあるのですが、

何度か試してみるとそこまで難しくなく、設定ができるので楽しくなってきます。

マウスの位置座標の設定方法なり、センサー検知なりの方法がわかれば

もっともっと可能性が広がりそうなので、引き続きリサーチしてみようかと思います。

アオキ
新しい技術を使いこなすには、頭ひねらないとですが、ちょっとずつでも達成できてくるとおもろいもんですね。

2019/7/11追記
『Mouse In CHOP』 → 『Null CHOP』の連携でマウス座標がとれることがわかりました!

 

『TouchDesigner』関係ではこんな記事も読まれています。

1. 【GLSL】プログラミングでかっこいい映像をつくりたい! 〜『TouchDesigner』を見据えて

2. 【TouchDesinger】で『GLSL』を使う方法まとめ【画像あり】

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


 

コメント

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

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

CAPTCHA


関連記事

  1. GLSL/WebGL

    【GLSL】『レイマーチング』入門(3) 距離関数を使ってみる・回転・合成・量産

    プログラミングでかっこいい映像がつくれるということで始めた『レイマーチ…

  2. GLSL/WebGL

    【GLSL】プログラミングでかっこいい映像をつくりたい! 〜『TouchDesigner』を見据えて…

    最近いろんなところで目にする『プロジェクションマッピング』や『インタラ…

  3. GLSL/WebGL

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

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

  4. P5.js (Processing)

    移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

    遊ぶようにプログラミングができる『クリエイティブコーディング』の中でも…

  5. P5.js (Processing)

    『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

    遊ぶようにプログラミングができて、デザインやアートをつくれる『クリエ…

  6. クリエイティブコーディング

    プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

    2020年から小学校でもプログラミング教育が義務化になり、子ども向…

Sponsored link

最近の記事

  1. 検索システム

    【検索システム】をつくってみた【実際にログインしてさわれます】
  2. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. プログラミング

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

    【微分】わかりやすくプログラミング目線で整理してみる【初心者向け】
  5. P5.js (Processing)

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
PAGE TOP