rn.log

備忘録など

【シェーダーグラフメモ その19】キラキラする模様をつくる

以下のようなきらきらした模様をつくるシェーダーグラフの作り方を解説します。
f:id:r-ngtm:20181207093029g:plain

ノード完成図

f:id:r-ngtm:20181207233141g:plain f:id:r-ngtm:20181208004618p:plain

キラキラ模様を作ってみる

STEP1 : 距離を使って円を描画してみる

まずは以下のような円を作ってみます。
f:id:r-ngtm:20181207233551p:plain

f:id:r-ngtm:20181208004851p:plain

x2 + y2 < A を満たす領域が1.0になります(白くなります)

STEP2 : 距離を使って4角星を描画してみる

Powerノードの2.0の部分を0.75にすると、4角星っぽくなります。
f:id:r-ngtm:20181207234234p:plain

f:id:r-ngtm:20181207234144p:plain

STEP3 : 4角星を並べる

UVノードにMultiplyノードとFractionノードを繋げると、UV座標の0~1の繰り返しを複数個つくることができます。
f:id:r-ngtm:20181207234628p:plain
f:id:r-ngtm:20181207234809p:plain

4角星も複数並ぶようになります。
f:id:r-ngtm:20181207234842p:plain

STEP4 : 4角星を動かしてキラキラさせる

Powerノードの0.75(下図の赤く囲った部分)に変更を加え、時間を乗算します。
f:id:r-ngtm:20181207235159p:plain

具体的には、0.75の部分を以下のようにつなぎ変えます。
f:id:r-ngtm:20181207235245p:plain


4角星が動いてキラキラする感じになります。
f:id:r-ngtm:20181207235347g:plain

STEP5 :時間にランダムを加える

Posterizeノードで解像度を下げたUVを用いてノイズを作り、これを時間に足します。
ここではPosterizeのStepに4を指定しました。
f:id:r-ngtm:20181208002440p:plain

動きにバラつきが生まれました。
f:id:r-ngtm:20181208002556g:plain

STEP6: その他調整を加えて完成

f:id:r-ngtm:20181207093029g:plain:w256
f:id:r-ngtm:20181208004618p:plain