Unityで床屋のサインポールシェーダーを作ってみた(ShaderGraph編)
こういうシェーダーを作ってみたので紹介です。
ShaderGraphでの実装編です。ShaderLabでの実装編はこちら↓。
Shader Graphでの実装
同じシェーダーをShader Graphでも再現してみました。
改めノードを整理した結果以下のようになりました(けっこうスッキリした)。
fの計算
基本的にはShaderLabで実装したものをそのままノードにしていきます。
これで frac((i.localPos.y-i.localPos.z*0.5) * 1.5 + _Time.y) が再現できました。
fを条件分岐する
今回、0.0~1.0を4分割し、それぞれを赤、白、青、白の順でリピートされるように色を塗る形をとっています。
赤を作る
まず赤から作っていきます。
赤は0~0.25の部分で表示されてほしいので、Stepノードの 「Edgeにfの値、Inに0.25」を指定します。こうすることで、「0.25未満の値が白」になります。
白の箇所は1、黒の箇所は0なので、Multiplyで色の値をかければ白の部分を好きな色に変えることができます。
これで赤色ができました。
白を作る
0.25~0.5の部分の白を作っていきます。
Stepノード単体では「どこからどこまで」を表すのは難しいので、Stepノードを2つ使います。
具体的には、「0.25以上を白にするStepノード①」と「0.5以上を白にするStepノード②」の2つを作り、①から②を引く(Subtract)ことで0.25~0.5の範囲のみを白にすることができます。
できたノードを赤の部分とAddすることで、赤と白が両方描画されたノードを作ることができます。
青を作る
次に、青を作ります。青は0.5~0.75の部分で描画されてほしいです。
白のときと同様の手順で、青も作っていきます。
「0.5以上を白にするStepノード①」と「0.75以上を白にするStepノード②」の2つを作り、①から②を引く(Subtract)ことで0.5~0.75の範囲のみを白にすることができます。
その後、白の部分を青に色を変えます。
最後の白を作る
最後の0.75~1の部分の白は、青を作るときに使った「0.75以上を白にするStepノード」をそのままAddするのみで大丈夫です。
以上で、無事ShaderGraphを使ってサインポールシェーダーを実装することができました。
いろいろ試行錯誤しているうちにノード全体がスッキリしてきて、思ったよりあっさりできたので、なにかの参考になれば幸いです。
Discussion