ゼロから始めるUnityShader開発 第五章 アニメーションするシェーダーを書く テクスチャのスクロール

本日はShader枠です。

今回は基礎的なアニメーションを行います。

〇フラグメントシェーダーでのアニメーション

前回は頂点シェーダーでのアニメーションを行いました。

redhologerbera.hatenablog.com

シェーダーでは_Time変数を使用してUnityでの時間を取得することができます。

前回の頂点シェーダーの例では_Timeをsin内で実行して周期運動を実装しました。

            v2f vert (appdata v)
            {
                v2f o;
               // o.vertex = TransformObjectToHClip(v.vertex);
                //面の法線を取得、ライトの当たる向きを計算
                VertexNormalInputs normal = GetVertexNormalInputs(v.normal);
                o.uv = v.uv;
                o.normalWS = normal.normalWS;
                VertexPositionInputs vertexInput = GetVertexPositionInputs(v.vertex.xyz + sin(_Time.y)* v.normal*1);
                o.vertex = vertexInput.positionCS;
                o.shadowCoord = GetShadowCoord(vertexInput);
                return o;
            }

フラグメントシェーダー内でも同様に_Time変数を使用して時間を使用することができます。

テクスチャをスクロールさせるためにはテクスチャをサンプリングする座標であるUVに値を加算して動かします。

   float4 frag (v2f i) : SV_Target
            {
                float4 col =   SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, i.uv + _Time.y)  *_MainColor; //追加
             　　・・・
                return col;
            }

これを実行すると次のように画像がスクロールするようになります。

ここでは斜めにスクロールしていることがわかります。

これは i.uv + _Time.yが2次元の値であるためです。

ここを次のように変更します。

                float4 col =   SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, float2(i.uv.x ,i.uv.y + _Time.y))  *_MainColor;

ここではUV座標の2次成分（y(V)座標）のみに時間の値を加算しています。

これで画面上で手前から奥に抱えてスクロールするようになります。

X成分のみに時間の値を加算することで画面向かって左右にスクロールするようになります。

                float4 col =   SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, float2(i.uv.x + _Time.y,i.uv.y))  *_MainColor;

このように_Time変数を使用することでUpdate関数が使用できないShaderでもフレーム単位での変異を行うことができます。

　本日は以上です。