【Unity】Shader Graphで走査線っぽいもの
概要
今回は Shader Graph で走査線っぽいもの作り方を紹介します。 併せてシェーダーを作るときの考え方も解説したいと思います！
動作環境
- Unity 2020.1.4f1
- Universal RP 8.2.0
今回作るもの
以下の動画の様にスクロールする走査線を作ります。
実装機能
せっかくのシェーダなので、パラメータで以下のものを調整できるようにしましょう。
- 走査線の色
- 走査線の幅
- 走査線の速度
- 走査線の出現頻度
- UV座標のV方向に走査線が移動(理由は後述)
シェーダーテクニック
シェーダーを実装する前にいくつかテクニックを紹介します。
UVノード と 分離(Split)
UVノード は文字通りUV座標を取り出すことができます。
R要素にはU座標、G要素にはV座標が含まれています。
UV座標は[0, 1]の範囲のため、Splitノードで要素をU, Vに分離することでグレースケールのグラデーションを作ることができます。
V要素に関して言えば下方(0の方)が黒、上方(1の方)が白というグレースケールを取り出すことができます。
Fraction
Fractionノード というものがあります。
「入力数値の小数点を取り出す」ノードとなります。
グラフで表すと以下のような一次関数を並べた感じになります。
簡単に言うと 0 から 1 (厳密には0.999...) を繰り返すノードを作成することができます。
Time + UV + Split + Fraction
所謂「UVスクロール」です。
UVをSplitノードで分離することでU or V方向にスクロールするノードとなります。
また、AddノードとSubtractノードでスクロール方向が反転する性質があります。
三角波
所謂「三角波ノード」です。
このノード、見た目はシンプルですが 「走査線の幅」の調整とかなり相性が良かったりします。
Fractionを[0, 1] → [-1, 1]に変換して絶対値を取ると、0 → 1 → 0...を繰り返す三角波を実現できます。
三角波 + Step
先程作成した三角波ノードをStepに渡すと以下のようなノードになります。
何が言いたいかというと「波の幅をパラメータで設定しやすい」ということです！
三角波 + Smoothstep
今回の主役ノードです！
三角波はSmoothstepとも相性が良いです。
グラデーション付きの波をシームレスに作ることができます。
余談：Time + Fraction + Smoothstep
stepをであれば"Time + fraction"で十分ですが、 Smoothstepの場合は残念ながらシームレスになりません。
三角波を作った理由は「シームレスな波が必要」だったからなんですね。
波の出現の周期を変える
これはUVスクロールの値を周期数で割り、StepのEdgeも同様に周期数で割れば実現できます。
※UVスクロールの値だけだと走査線になる部分の幅が広がってしまいますので、幅も割って調整します。
UVスクロールのスピードを遅らせるということですね。
完成形
上記のテクニックを組み合わせて、プロパティで調整可能にしてアルファ(不透明度)に使用したのが今回のシェーダになります！
Githubのプロジェクトに完成形を置いておきますので、良かったらどうぞ。
サンプルプロジェクト
雑感
今回はShader Graphを題材にしてみました。
記事を書いていて思ったのは「これ、音声解説 + 動画のほうが絶対わかりやすいだろ」でした。。。
別にAviutl使えないわけじゃないんですがちょっとトークに自信がないです。。。
ただ動画のほうが情報をたくさん詰め込めますし、僕みたいに字だとわからなくても動画だと理解しやすい人のほうが多いと思いますのでいつか挑戦してみたいです。
次回ですが、そろそろ以前から考えていたポートフォリオに本格的に集中しようと思いますので、 しばらくは投稿頻度は下がると思います。
それでは～。
