ゼロから始めるUnityShader開発 ShaderGraphを用いたアニメーションをShaderLabで再現する

本日はShader枠です。

今回は昨日ShaderGraphで作成したShaderをShaderLabで再現していきます。

redhologerbera.hatenablog.com

昨日は上下にオブジェクトがアニメーションし、Y座標が０以下のピクセルは透明になるようなシェーダーを書きました。

ノードは次のようになります。

今回はこのシェーダーをコードで再現していきます。

〇シェーダーの実装

シェーダーで不透明ではなく透明度を扱うためにはレンダリングパイプラインで半透明として処理されるRenderQueueを3000代に設定します。

もっとも簡単な方法はRenerTypeとQueueをTransparentに設定することです。

    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }//QueueをTransparent=3000に設定
        blend SrcAlpha OneMinusSrcAlpha//アルファブレンディングを設定
        LOD 100

次に頂点シェーダーの処理です。

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.vertex.y += _SinTime.w;
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                o.wPos =  mul(unity_ObjectToWorld, v.vertex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

頂点シェーダーではUnityObjectToClipPos()マクロを使用して、一度普通にUntiyの軸に頂点を配置します。

次にY成分のみに_SinTime.wを足しています。

                o.vertex = UnityObjectToClipPos(v.vertex);
                o.vertex.y += _SinTime.w;

_SinTime.wはTime変数の亜種で、**Sine(Time)**を意味し時間経過とともに-1~1の波の値を取ります。

これによって上下運動を実装できます。

またunity_ObjectToWorldと頂点の乗算によってUnityのワールド座標を取得できます。

                o.wPos =  mul(unity_ObjectToWorld, v.vertex);

ここで頂点シェーダーで計算した結果をフラグメントシェーダーに渡すために格納する値としてo.wPosを定義しています。

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
                float3 wPos : TEXCOORD1;
            };

ではフラグメントシェーダーの処理を見ていきます。

           fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                col.a *= smoothstep(0,1,i.wPos.y);
                return col;
            }

ここでは取得したUnity軸の情報を基にcol.a(α値)にかけ合わせています。

                col.a *= smoothstep(0,1,i.wPos.y);

この際にグラデーションをかけるようにsmoothstep()関数を使用しています。

以上でShaderGraphと同様の見た目が実装できました。

〇シェーダー全文

Shader "Unlit/NewUnlitShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }
        blend SrcAlpha OneMinusSrcAlpha
        LOD 100


        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
                float3 wPos : TEXCOORD1;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.vertex.y += _SinTime.w;
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                o.wPos =  mul(unity_ObjectToWorld, v.vertex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                col.a *= smoothstep(0,1,i.wPos.y);
                return col;
            }
            ENDCG
        }
    }
}