rn.log

備忘録など

【シェーダーグラフメモ その13】ドット絵のレンガ

以下のようなドット絵のレンガのような絵を作るシェーダーグラフです
f:id:r-ngtm:20181201085832p:plain:w256

ドット絵風のレンガを作る方法

STEP1 : レンガを作る

まずは以下のようなレンガを作ります。
f:id:r-ngtm:20181201090434p:plain:w256

ノード全体

レンガを作るシェーダーグラフのノードは以下になります。
f:id:r-ngtm:20181201092925p:plain

ノード解説(左側)

X座標とY座標に数値を乗算し、Fractionをとって0~1のグラデーションを複数作っています。
f:id:r-ngtm:20181201094213p:plain

ノード解説(中央)

複数グラデーションを元にして、縦じま模様と1つおきに横方向にズレた縦じま模様を作っています。
f:id:r-ngtm:20181201095923p:plain

ノード解説(右側)

縦じまと横じまを加算してレンガ模様をつくり、これにLerpをかけて色を付けています。
f:id:r-ngtm:20181201100601p:plain 縦じまと横じまが重なっている部分では加算結果が2になってしまうので、Saturateをかけて0~1の範囲に収まるようにしています。

STEP2 : レンガにノイズを加え、モザイクをかける(完成)

STEP1のシェーダーグラフにモザイクをかけ、ノイズを加えるとドット絵風のレンガになります。
f:id:r-ngtm:20181201085832p:plain:w256
f:id:r-ngtm:20181201103859p:plain

ノードの変更部分

STEP2のシェーダーグラフでは以下のような変更を加えています。
f:id:r-ngtm:20181201103342p:plain