TouchDesigner

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

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

前回の記事

動画はこちら。

BookofShadersおすすめだよーっていうことで、
BookofShadersの内容に沿ってやってるのかなと感じました。

BookOfShaders

Sponsored link

GLSL TOP で描画してみる if文と円

ホワイトボード説明・・画面見えず

if文の説明?

中心からの距離が、設定値より大きかったら黒、小さかったら白にしてみる。

つづいて円。

全てのピクセルで、
センターからの距離を測って、
距離が 0.1より少なかったら白にしている

uv座標は、左下が(0,0)、右上が(1,1) なので、

0.5を引くことで、中心が(0,0)になるように調整しているよう。

円の半径・中心をuniform変数化

続いて半径をuniform変数化して外から変更できるようにしてみる。

半径は英語でRadius。

画面全体の縦幅・横幅が1になるので、

0.5にすることで、

中心から上に0.5、下に0.5 になり、画面幅いっぱいの円になる。

続いて中心もunifromで置き換え。

解像度はGLSLTOP->commonで変更できる。

Sponsored link

GLSLのstep関数を使って描画してみる

動画15:15〜

『step』関数の説明。

step()関数は引数を2つとる。

第一引数・・境界、または閾値。
第二引数・・関数によってチェックされる値。

境界より小さければ0.0を返す。
境界以上なら1.0を返す。

stepの説明の前にsinで円を動かしてみる。

オペレータをコピペして、 こちらは『step』関数で実装。

サインとステップ関数。

見た目は同じだけれど、

解像度を1024×1024くらいに変えると動作スピードが倍くらい違う。(stepの方が処理が早い)

GLSLの四角形をつくる方法 step関数

動画19:30〜

四角形をstepでつくってみる

一方向のみ、0.2の長さ分 透明になる。

上下左右にstep()関数を設定すれば四角形になる。

なぜ掛け算するの?

->透明なところと画像があるところをかけると透明になる->四角になる。

GLSL 関数の作り方 円のカスタム関数をつくってみる

動画27:50〜

真ん中の円をカスタマイズ

自作でcircle関数をつくってみる。

関数作る場合はmain()関数より上に書くこと。

circle引数のcoordはピクセル。

関数化していれば、円を2つ出すのも簡単。

コード

Sponsored link

GLSL 描画のまとめ

今回は関数の説明あたりがメイン。

プログラミングやってた人間からするとあっさりだったものの、

プログラミング知識に加え数学知識も必要ということでやっぱそれなりにハードル高いよなぁと実感。

だからこそやりがいあるんですけどね。

アオキ
step関数を掛け算するところは慣れが必要そうな。

BookOfShadersの内容に沿ってるようなので、BookOfShadersもっとしっかり読み込んで見たいと思います。

BookOfShaders

次の記事

最初の記事

コメント

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

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

CAPTCHA


関連記事

  1. GLSL/WebGL

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

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

  2. TouchDesigner

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

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

  3. GLSL/WebGL

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

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

  4. GLSL/WebGL

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

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

  5. GLSL/WebGL

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

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

  6. TouchDesigner

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

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

Sponsored link

最近の記事

  1. IoT

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  2. 検索システム

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

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  4. クリエイティブコーディング

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

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