本日はUnityシェーダー枠です。
今回はShaderGraphを用いたアニメーションを紹介します。
〇環境
・Unity2021.3.5f1
・URP
〇ShaderGraphを用いたアニメーション
今回はアニメーションで上下し、Y座標が０以下の場合透明になるというようなシェーダーを作っていきます。
アニメーションを行うためには時間軸が必要です。
Unity内部の時間をShaderで扱うためにはShaderLab(コード)の場合はUnityCG.cgincもしくはCore.hlslで定義されている_Time変数を使用することで簡単に実装できました。
ShaderGraphではもっと簡単でTimeというノードが提供されており、これを使用することで実装できます。
これを使用してオブジェクト全体を上下に動かすためには次のようにノードを繋ぎます。
_Timeノードはいくつかの出力を持っていますが、今回は周期運動を行いたいためSineTimeを使用しています。これは1~-1の値をとる周期運動に用いられるパラメータです。
Positionノードはオブジェクトの頂点を意味します(XYZ)。今回はSplitノードでY軸のみ分けて、SineTimeを足し合わせています。そしてVector3ノードで再度パラメータを戻し、Positionへと接続し出力をしています。
これによって以下のようにオブジェクトが上下するようになります。
ここでワンポイントおさらいですが、今回は頂点の位置を動かしたかったため頂点シェーダーに接続しています(Vertex)。
色に関してはFragment部が制御しています。 今回の目的としてアニメーションは完了していますが、せっかくなのでアニメーションに応じてもしY座標が0以下にある場合はフェードアウトしていくような表現を行っていきます。
〇ShaderGraphを用いた座標の取得とフェードアウト
ShaderGraphでフェードアウトを表現するためにはSurfaceTypeをOpaque(不透明)から変更する必要があります。今回の場合Transparentを使用しました。
これにってマスタースタック(Fragmentノード)にAlphaの設定項目が出力します。
Y座標に基づき透明にするという実装は次のようなノードで実装できます。
PositionノードでSpaceがWorldの設定ではUnityのワールド座標軸を扱うことができます。 SplitノードでY座標に対してのみ成分を分離し、Smoothnessノードを使用してグラデーションをかけています。
これをAlphaの出力に接続することで冒頭のように上下し、Y軸に応じてフェードアウトする表現が完成します。
基礎的な表現ですが、じっくり理解しようとすると結構理解度を試せる気がします。
本日は以上です。
