TouchDesigner

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

連日の『TouchDesigner』で『GLSL』を使ってみる動画のメモになります。

前回の記事

今回は『ShaderToys』からのコードを持ってくる方法が紹介されていました。

動画はこちら。

アオキ
けっこうなエラーが発生します。一つ一つ対応していますので、ひるまずいきましょう
Sponsored link

TouchDesignerでShaderToysを使う方法 ShaderToysの説明

『base COMP』作成して shadertoy と命名し中へ。

まずはShaderToysの案内。

  • ShaderToys・・本格的なフラグメントシェーダでつくった映像盛りだくさんなサイト(とにかく重い

ShaderToys

ライセンスをチェック。ライセンスは守りましょう。

Creative Commonにもいろいろあるよ。

的な内容で。

今回コード引用するのはこのページ。

ShaderToys marble

marbleで検索するとでてきます。

コードをplaying_marble.glslというファイル名で保存しつつ、

  1. 『text DAT』生成。playing_marble.glslを選択
  2. Loat on Start でPulseボタンを押す
  3. コードが表示される。

コードはこちら。

『GLSL TOP』追加。

『GLSL TOP』→pixel shader に、作成した『Text DAT』をドラッグドロップ。

コードをコピーしただけだとglsl_infoにエラー発生。

アオキ
ここからが結構大変でございます。

TouchDesignerでShadertoyを使う方法 変数を定義

shadertoyのページの中のShader Inputsを押すと、
最初から定義されている変数が見れます。

glsl_infoで発生しているエラーを見つつ、変数を定義していきます。

iChannel0だけエラーが消えません。

コードを見るとtextureとして使われているので、

『Movie File In CHOP』で代用します。

マクロを追加します。

  • マクロ・・#defineで定義する定数

『sTD2DInputs』は『TouchDesigner』組み込み変数で、インプット用に使います。

が、まだエラーがでてる・・・

コードを見ると、rdはvec3で定義されている。
iChannel0はvec2か。

Shadertoyで見ると、『Cubemaps』というものが使われているよう。

アオキ
コードによっていろいろ対応方法が変わるようです。今回はCube対応。
Sponsored link

TouchDesignerでShadertoyを使う方法 sTDCubeInputs

ヘルプから 『TouchDesigner』のマニュアルでの中の『Write a GLSL TOP』をみてみます。

Write_a_GLSL_TOP

cubeで検索すると、どうやらcubeの場合は、

『sTD2DInputs』ではなく、『sTDCubeInputs』 を使うよう。

アオキ
ここは知らんかった・・

どうやってcubeをつくるかというと、

『Movie File IN CHOP』で、『PalaceOfFineArts-360Designs.io.jpg』画像ファイルを選択します。

アオキ
360度カメラで撮影された画像が必要かも?

『Projection TOP』を追加します。

『Movie File In』 -> 『Projection』 とつないで、

『Projection』のInput/Outputを下記に変更します。

  • Input・・Equirectangular
  • Output・・Cube Map

アオキ
Equirectangularってなんだろ?

と思い調べてみると、

地図投影法の一種であり、『正距円筒図法(せいきょえんとうずほう)』のこと。

アオキ
あぁ、あれね、地図とか描くやつね。(しったか

360度で撮影された画像を、Cubeの形にして、貼り付けようってことかなと。

infoを見ると確かに 『cube map texture』 になっとります。

cube mapになった『projection』を『GLSL TOP』に繋げると、別のエラー発生。

あらためて、

『sTD2DInputs』 を 『sTDCubeInputs』 に変更します。

また別のエラー発生・・・

TouchDesignerでShadertoyを使う方法 mainImage関数の書き換え

『ShaderToys』は『mainImage』関数になっているので、これを書き換えます。

『mainImage』関数を 『main』 に置き換えます。

『fragColor』, 『fragCoord』も再度定義します。

『GLSL TOP』で『Load Uniform Names』のLoadボタンを押すと、定義していたuniformが反映されます。

アオキ
これはTouchDesignerのバージョン083くらいから追加された機能のようです。

ここでセーブすると、動画とは違うエラー発生しました。(バージョンによってちょっとエラーが違いそう)

『vUV』が読み込まれていないということで、コードを変更します。。

ようやく、キューブが表示されました。

アオキ
動画とはキューブの大きさが違う気がするけど、とりあえず前に進むべ。

TouchDesignerでShaderToyを使う方法 マウスチョップ Mouse CHOP

マウスで動かせるように、『Mouse In CHOP』を追加します。

お約束の『Null CHOP』も追加してつなげます。

『Null CHOP』の右下の+ボタンを押した後に、

『GLSL TOP』->Vectors1->iMouse の箇所にドラッグドラップします。

『Export CHOP』を選ぶと、

マウス座標が『GLSL TOP』に反映されるようになります。

あとで画像はる

動画内では『Math CHOP』で倍加しているようです。

ここまでで、動画47分中19分40秒。。

アオキ
な、内容たっぷり・・一旦休憩しとこ・・・
Sponsored link

TouchDesignerでShaderToysを使う方法をやってみた感想

さらっと『ShaderToys』コード組み込めるかと思いきや、

『Cube』なり使っているコードによって対応が変わるようで、

なかなか一筋縄にはいかないようです。

とはいえ使いこなせるようになると

先人たちのかっこういい映像をもりもり使える可能性が広がるので、

ムリない範囲で少しずつ知識アップしていきたいと思います。

アオキ
続きはウェブで←

 
次の記事

誠意執筆中!

最初の記事

コメント

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

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

CAPTCHA


関連記事

  1. GLSL/WebGL

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

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

  2. GLSL/WebGL

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

    手や身体の動きに合わせて映像が変わっていく『インタラクティブ』な映像を…

  3. GLSL/WebGL

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

    前回の記事で『TouchDesigner』と『GLSL』を連携させる方…

  4. TouchDesigner

    【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その4 描画(step関数…

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

  5. GLSL/WebGL

    【TouchDesigner】『GLSL MAT』の使い方 3次元でぐりぐり動かしてみる

    『プログラミング』を使ってかっこよく、インタラクティブな映像をつくり…

  6. TouchDesigner

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

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

Sponsored link

最近の記事

  1. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  2. クリエイティブコーディング

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

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  4. プログラミング

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

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