rn.log

備忘録など

【シェーダーグラフメモ その10】雨を作る

今回のシェーダーグラフは雨のシェーダーグラフです。
f:id:r-ngtm:20181124205320g:plain

今回はこのシェーダーグラフを完成させるまでの手順をゼロから1つずつ解説していきます。

STEP1

まずはUVからY座標を取り出してY方向のグラデーションを作ります
f:id:r-ngtm:20181124190504p:plain

STEP2

次に、X座標にPosterizeをかけたものをY座標に足します。
f:id:r-ngtm:20181124190551p:plain

STEP3 動きを付ける

Fractionをかけて0.0~1.0の繰り返しを作り、そこへ時間を足します。
f:id:r-ngtm:20181124190726p:plain

なんとなく、雨っぽくなってきました。
f:id:r-ngtm:20181124190751g:plain:w240

STEP4 白黒を反転させる

OneMinusノードを挟み、白と黒を反転させます。
f:id:r-ngtm:20181124190843p:plain

f:id:r-ngtm:20181124191015g:plain:w240

STEP5 雨の間隔を伸ばす

Fractionノードを使っていたところをModuloノードに差し替えます。
Fractionは入力を1.0で割った余りを返すノードであるのに対して、Moduloノードは入力を任意の数で割った余りを出力できます。

f:id:r-ngtm:20181124191228p:plain
f:id:r-ngtm:20181124191245g:plain:w240

STEP6: 動きをランダムにする

SimpleNoiseノードを挟んでランダムをいれます。
f:id:r-ngtm:20181124191410p:plain

動きがばらついてより雨らしくなりました。
f:id:r-ngtm:20181124191446g:plain:w240

STEP7 : 雨を細かくする

PosterizeノードのStepsの数値を増やします。
f:id:r-ngtm:20181124194247p:plain

f:id:r-ngtm:20181124194327g:plain

ノード途中経過

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

STEP8 : 雨を速くする

雨が遅いような気がするので、時間に数値を乗算し雨の速さを上げます。ついでにModuloの数値もいじります
f:id:r-ngtm:20181124195655p:plain
f:id:r-ngtm:20181124195726g:plain:w240

STEP9 : 雨をバラつかせる

SimpleNoiseに乗算する数を増やします。
f:id:r-ngtm:20181124200142p:plain
f:id:r-ngtm:20181124200214g:plain:w240

STEP10: 雨を削る

雨が濃すぎるので、SimpleNoiseにStepノードをつなげたものと雨を乗算して雨粒の数を減らします。
StepノードのInには0.48を指定しました。

f:id:r-ngtm:20181124202301p:plain
f:id:r-ngtm:20181124201353g:plain:w240

STEP11: 雨を延ばす。

雨が短すぎるように感じられるので、Y座標に1.0より小さい値を乗算して雨を引き伸ばします。
雨が速すぎたので時間の速さも減らしました。

f:id:r-ngtm:20181124202136p:plain
f:id:r-ngtm:20181124202444g:plain:w240

STEP12 : 雨が落ちる間隔を伸ばす

雨が落ちてくる間隔が短すぎるように感じられるので、Moduloの数値を増やします。
f:id:r-ngtm:20181124202822p:plain
f:id:r-ngtm:20181124202835g:plain:w240

STEP13 : 雨を増やす

雨粒が少なすぎて寂しいので、雨粒を増やします。
f:id:r-ngtm:20181124203516p:plain

だいぶ雨らしくなってきました。
f:id:r-ngtm:20181124203531g:plain:w240

STEP14 : 雨に色を付ける

雨が白黒なのはちょっと寂しいので、色を付けます。
f:id:r-ngtm:20181124204509p:plain
f:id:r-ngtm:20181124204540g:plain:w240

STEP15: 雨の色を薄くする

雨の色が濃すぎるので、Lerpを挟んで色を薄くします。
f:id:r-ngtm:20181124205307p:plain f:id:r-ngtm:20181124205320g:plain:w240

完成

f:id:r-ngtm:20181124205320g:plain

ノード全体図

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