Unity ShaderGraph備忘録 part2-Timeと波形
Timeノード
アニメーションするシェーダーを作る時に使うノード
- Time
シーン開始時からの経過時間を出力する - Sine Time
弧を描くように-1～1の値を往復する。2π（≒6.28秒）で一周。開始地点は0 - Cosine Time
Sine Time を時間方向に少し前にずらした動きをする。開始地点が1 - Delta Time
1つ前のフレームからの経過時間を出力する - Smooth Delta
Delta Timeを複数フレーム参照して、その平均値を出力する
特にTimeは頻繁に使う
Timeで色相を変えてる図
Timeを波形に加工することで波のうねりやライトの明滅など多彩な表現ができる
今回はその波形について軽く触れていこうと思います
波形？
まずSine TimeとCosine Timeを少し掘り下げます
この2つの単語、高校の数学で聞き覚えがある人もいると思いますが
あの三角関数のsinとcosと同じものを使ってます
もっと掘り下げると「単位円におけるsinΘとcosΘがどうのこうの…」みたいな話になるけど
凄くざっくり言うと半径1の円をぐるぐる回ってるようなものです
イメージ図（Wikipedia）
グラフで見てみる波形
Sine Timeを2次元のグラフに置き換えると、このようなグラフになる
こういう波のグラフを波形と呼びます
Cosine Timeのグラフはこう
Sine Time、Cosine Timeは内部的にはtimeノードをSine、Cosineノードに繋げた出力と同じ
なので並べると全く同じ動きをするのが見れます
ShaderGraphのWaveノード
例えば、ShaderGraphには複数のWaveノードが搭載されていて
InにTimeを繋ぐ事で、時間経過で変化する波形を気軽に出力できます
-
TriangleWave
三角波。1秒間に-1～1を直線的に往復する波形を返す
グラフにすると三角形の波形になる
-
SawToothWave
こちらは名前の通りノコギリ型の波形を返す
-
SquareWave
矩形波。0.5秒刻みで-1，1の値を交互に繰り返す
グラフで見るとこのような波形になる
-
NoiseSineWave
Sine波にMinMaxで入力した値のノイズを加える
NoiseSineWaveのグラフ
※Noise
TimeをSimpleNoiseに加える等してランダムに0～1の値を返すことができます。
正確にはノイズの掛け方が違いますが、原理的には同じようなものを使ってSine波に加えてます
波形への乗算
Timeを波形ノードの前後でMultiplyを噛ませる事があるが
波形の前と後で振る舞いが変わる
- 波形の前のTimeを乗算すると、波形の速さ（周波数）が変わる
- 波形の後のOutを乗算すると、波の大きさが変わる
グラフで見るとそれぞれ以下になる
緑のグラフが1（Timeに3をMultiplyしてSineに通す）、
赤のグラフが2（TimeをSineに通してから2をMultiplyする）
波形の組み合わせ
波形と波形を組み合わせることもできる
上記の「1」の波形から「2」の波形をSubtractすると奇妙な曲線になったり、などなど
シェーダーでの使用例
UVで例を挙げます
UVをSplitに繋げてUやV（Split上ではR or G）の値を取り出すと白黒のグラデーションが作れます
（※Splitノード：複数にまとまってる数値を分割して取り出すノード。
RGBAは色情報の（赤・緑・青・透明度）から来てる）
水平方向のグラデーションに任意の値をMultiplyした上でTimeをAddし、波形に変換すると、水平方向にスクロールする縞模様ができる
uvへのMultiplyで縞模様の細かさ、
TimeへのMultiplyでスクロールの速度を変更できる
それぞれの縞模様をAddしてStepノードで2値化、Multiplyで値を小さくしてTiling and OffsetのOffsetに繋げると
（※Stepノード：閾値を越えたら１，超えなかったら0を返す）
陽炎のようなアニメーションになる
Discussion