【Unity】【シェーダテクニック】距離を表すグラデーションテクスチャを使った無限ループアニメーション

距離を表すグラデーションテクスチャを使ってこのようなアニメーションを作ります。
テクスチャを変えるだけでいろんなアニメーションが作れます。

Unity2019.1.0

やりたいこと

まず、次のようなグラデーションを持つテクスチャを用意します。

このとき、このテクスチャに格納された値は「距離」を示しているとします。
つまり黒い部分と白い部分との距離は1です。

この距離情報を使って、下記のようにある指定した距離から、指定した幅における距離情報を取得します。
何を言ってるかわからないと思うので下記の図をご覧ください。

ここまで作れれば、あとは例えば「ある指定した距離」をアニメーションさせていけばこんな感じのアニメーションが作れます。

また、テクスチャを変えればいろんな模様が作れます。

シェーダ

それではシェーダのソースコードです。

Shader "Example"
{
    Properties
    {
        _DistanceTex("Distance Texture", 2D) = "white" {}
        _Center("Center", Range(0, 1.0)) = 0.0
        _Width("Width", Range(0, 1.0)) = 0.5
    }

    SubShader
    {
        Tags{ "RenderType" = "Opaque" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _DistanceTex;
            float4 _DistanceTex_ST;
            float _Center;
            float _Width;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _DistanceTex);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                // Centerを中心とした相対的な距離を0〜1で表す
                // 1がCenter
                float pattern = tex2Dlod(_DistanceTex, float4(i.uv, 0, 0)).r;
                pattern = pattern - _Center;
                pattern *= sign(pattern);
                pattern -= 0.5;
                pattern *= -sign(pattern);
                pattern += 0.5;
                pattern *= 2;
                pattern = 1 - pattern;

                // Centerを1、そこからWidth離れた点を0とする値
                pattern -= 1 - _Width;
                pattern /= _Width;

                return pattern;
            }

            ENDCG

        }
    }
}

内容に関しては解説しても逆によくわからなくなりそうなので、
理解したい場合は一行ずつ処理を追っていただくのが良いと思います。
難しいことはやっていません。

結果

結果は次のようになります。
距離テクスチャをいろいろと変えてみています。

Widthを変えるとまた雰囲気が変わります。

使用したテクスチャ

今回使用したテクスチャはこんな感じです。

圧縮方法によってはグラデーションが汚くなるので注意してください。
また、Filter ModeをBilinearやTrilinearにしている場合はパターン次第では変な線が入ることがあるので注意してください。