はじめに
シェーダーグラフを利用して、流れるLEDライトのようなものを作る方法を解説します。
サンプル
解説
今回の表現ですが、3枚の板を組み合わせて作っています。
ノード全体
作り方解説
準備: 板を作る
以下のような板を作り、
シェーダーグラフから作成したマテリアルを板に登録しておきます
STEP1: 円を並べる
UVに8を乗算します。
これにFractionを適用してEllipseノードのUVとして使用します。
STEP2 : 円とグラデーションを乗算する
UVにPosterizeノード(Steps = 8) を適用し、x成分を取り出してSTEP1の円と乗算します。
STEP3 : グラデーションを動かす
X座標から時間を減算し、Fractionをかけるとグラデーションがスクロールするようになります。
STEP4 : 板を3倍に引き延ばす
板のx方向のスケールを3に設定します。
当然ですが、円も引き延ばされてしまいました。
STEP5 : 模様を1/3倍に縮小する
x方向に3倍に引き延ばされた円を1/3倍に縮小するため、UVのx座標を3倍します。
STEP6 : 色を付ける(シェーダーグラフ完成)
模様に色を付けます。
板を正三角形のように並べれば今回の表現の基礎の完成となります。
微調整
調整1 : グラデーションを2値化する
グラデーションにStepをかけると、グラデーションがくっきりとした感じになります。
調整2: 円の数を変更する
PosterizeノードとMultiplyノードの数値を変更することで、円の数を変更することができます。
先ほどは8を設定していましたが、24に設定すると以下のようになります。
Vector1などの定数はプロパティ化すると便利
Vector1ノードをプロパティ化すると、マテリアルのInspector上から変更できるようになるので便利です。
調整3 : LEDをランダムにずらす
Y座標でノイズを生成し、X座標に足すことでグラデーションがランダムにズレます。
調整4: ランダム値を調整
バラつきが大きすぎてうるさいので、
SimpleNoiseに数値を乗算して、スクロールのバラつきを調整します。
0.3を乗算した場合は以下のようになります。
ノードは以下のように組んでいます。
調整5 : 円の大きさを調整(調整終わり)
円の大きさが0.5だったものを、0.4に設定すると以下のようになります。
ノードは以下のように組んでいます。
