Unity shader texture animation

Sequence frame animation

Using a sequence of frame images , Play some of them at once , So as to get continuous animation
Realization effect ：

Sequence frame animation

Code ：

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Custom/Chapter11-ImageSequenceAnimation"
{
    
    Properties
    {
    
    _Color("Color Tint",Color)=(1,1,1,1)
    // Sequence frame texture 
    _MainTex("Image Sequence",2D)="White"{
    }
    // Number of horizontal keyframes 
    _HorizontalAmount("Horizontal Amount",Float)=4
    // Number of vertical keyframes 
    _VerticalAmount("Vertical Amount",Float)=4
    // Playback speed of keyframe animation 
    _speed("Speed",Range(1,100))=30
    }
    SubShader
    {
    
    Tags{
    "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
    ZWrite off
    Blend SrcAlpha OneMinusSrcAlpha

    Pass{
    
    Tags{
    "LightMode" = "ForwardBase"}

    CGPROGRAM
    #pragma vertex vert
    #pragma fragment frag
    #include "UnityCG.cginc"
    float4 _Color;
    sampler2D _MainTex;
    float4 _MainTex_ST;
    float _HorizontalAmount;
    float _VerticalAmount;
    float _speed;

    struct a2v{
    
    float4 vert:POSITION;
    float2 texcoord:TEXCOORD0;
    };
    struct v2f{
    
    float2 uv:TEXCOORD0;
    float4 pos:SV_POSITION;
    };

    v2f vert(a2v o){
    
    v2f v;
    v.pos=UnityObjectToClipPos(o.vert);
    v.uv = TRANSFORM_TEX(o.texcoord, _MainTex);  
    return v;
    }

    fixed4 frag(v2f i):SV_Target{
    
    // Virtual time 、 The corresponding coordinates of the sequence frame texture ,row The corresponding is y、rolumn The corresponding is x
    float time=floor(_Time.y*_speed);
    float row = floor(time/_HorizontalAmount);
    float column =time-row*_VerticalAmount;

    // Because the texture is the same , So we need to take different parts of the same texture according to time .
    half2 uv = i.uv+half2(column,-row);
    uv.x/=_HorizontalAmount;
    uv.y/=_VerticalAmount;

    fixed4 c=tex2D(_MainTex,uv);
    c.rgb*=_Color;
    return c;
    }
    ENDCG
    }
    }
    FallBack "Transparent/VertexLit"
}

Scroll background

2D The continuous rolling background in the game simulates the movement of game characters .
Realization effect ：

2D Scroll background

Code ：
Sample two textures , Shift the texture coordinates according to time , So as to change the rendering content in each pixel over time .

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Custom/Chapter11-ScrollingBackground"
{
    
    Properties
    {
    
    // Far background 
    _MainTex("Base Layer (RGB)",2D)="while"{
    }
    // Closer background 
    _DetailTex("2nd Layer (RGB)",2D)="while"{
    }
    // Far background speed 
    _scrollX("Base Layer Scroll Speed",Float)=0
    // Near background speed 
    _scroll2X("2nd Layer Scroll Speed",Float)=0
    // brightness 
    _Multipliter("Layer Multipliter",Float)=1.0
    }
    SubShader
    {
    
        Tags {
     "RenderType"="ForwardBase" }

        Pass{
    
               CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "unityCG.cginc"

        sampler2D _MainTex;
        float4 _MainTex_ST;
        sampler2D _DetailTex;
        float4 _DetailTex_ST;
        float _scrollX;
        float _scroll2X;
        float _Multipliter;

       struct a2v{
    
       float4 vert:POSITION;
       float2 texcoord:TEXCOORD0;
       };

       struct v2f{
    
       float4 pos:SV_POSITION;
       float4 uv:TEXCOORD0;
       };

       v2f vert(a2v i){
    
       v2f o;
       o.pos =UnityObjectToClipPos(i.vert);
       // The texture coordinates obtained by sampling , Shift with time according to your speed 
       o.uv.xy=TRANSFORM_TEX(i.texcoord,_MainTex)+frac(float2(_scrollX,0)*_Time.x);
       o.uv.zw =TRANSFORM_TEX(i.texcoord,_DetailTex)+frac(float2(_scroll2X,0)*_Time.x);
       return o;
       }

       fixed4 frag (v2f i):SV_Target{
    
       fixed4 firstLayer=tex2D(_MainTex,i.uv.xy);
       fixed4 secondLayer=tex2D(_DetailTex,i.uv.zw);

       // Mix the colors of the two textures according to the transparent channel of the second texture color 
       fixed4 c=lerp(firstLayer,secondLayer,secondLayer.a);
       c.rgb*=_Multipliter;

       return c;
       }
        ENDCG
        }
    }
    FallBack "VertexLit"
}

Vertex animation

River effect
Transform the vertex coordinates , Thus, the sampling results change with time .
Realization effect ：

River of vertex animation

Code ：

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Custom/Chapter11-Water"
{
    
    Properties
    {
    
    // River texture 
    _MainTex("Main Tex",2D)="white"{
    }
    // Main color 
    _Color("Color Tint",Color)=(1,1,1,1)
    // The magnitude of the fluctuation 
    _Magnitude("Distortion Magnitude",Float)=1
    // The frequency of fluctuations 
    _Frequency("Distortion Frequency",Float)=1
    // Reciprocal of wave length 
    _InvWaveLength("Distortion InvWaveLength",Float)=10 
    // The speed at which the texture moves horizontally 
    _Speed("Speed",Float)=0.5
    }
    SubShader
    {
    
        //DisableBatching Ignore batch , Because batch processing will merge related models 
        Tags {
     "Queue"="Transparent" "IgnoreProjector"="true" "RenderType"="Transparent" "DisableBatching"="true"}

        Pass{
    
        Tags{
    "LightMode"="ForwardBase"}

        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha
        // Let every side of the water flow be seen 
        Cull Off

        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "unityCG.cginc"

        sampler2D _MainTex;
        float4 _MainTex_ST;
        fixed4 _Color;
        float _Magnitude;
        float _Frequency;
        float _InvWaveLength;
        float _Speed;

        struct a2v{
    
        float4 vert:POSITION;
        float2 texcoord:TEXCOORD0;
        };

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

        v2f vert(a2v i){
    
        v2f o;
        float4 offset;
        offset.yzw=float3(0.0,0.0,0.0);
        offset.x=sin(_Frequency*_Time.y+i.vert.x*_InvWaveLength+i.vert.y*_InvWaveLength+i.vert.z*_InvWaveLength)*_Magnitude;
        o.pos=UnityObjectToClipPos(i.vert+offset);

        o.uv =TRANSFORM_TEX(i.texcoord,_MainTex);
        o.uv+=float2(0.0,_Speed*_Time.y);

        return o;
        }

        fixed4 frag(v2f v):SV_Target{
    
        fixed4 c=tex2D(_MainTex,v.uv);
        c.rgb*=_Color.rgb;
        return c;
        }
        ENDCG
        }
    }
    FallBack "Transparent/VertexLit"
}

Billboard effect
Billboard technology will rotate the rendered quadrilateral according to the direction of view , Make the quadrangle always appear to face the camera .
The essence ：
According to the surface normal 、 Upward direction 、 Construct the rotation matrix in the right direction , And specify an anchor to determine the position of the polygon .
In the application of billboard technology , At least one of the three vectors is fixed , Suppose the normal direction is fixed , Then we can use the normal direction and the upward direction to cross multiply , Finally get the right direction , Finally, according to the normal and the right direction, we can get the mutually perpendicular upward direction .
Realization effect ：

unity Billboard technology

Code ：

// Upgrade NOTE: replaced '_World2Object' with 'unity_WorldToObject'
// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Custom/Chapter11-Billboard"
{
    
    Properties
    {
    
    _MainTex("Main Tex",2D)="white"{
    }
    _Color("Color Tint",Color)=(1,1,1,1)
    // Used to constrain the speed in the vertical direction 
    _VerticalBillboarding("Vertical Restraints",Range(0,1))=1
    }
    SubShader
    {
    
        // Batch processing is closed 
        Tags {
     "Queue"="Transparent" "IgnoreProjector"="true" "RenderType"="Transparent" "DisableBatching"="true"}
        Pass{
    
        Tags{
    "LightMode"="ForwardBase"}

        ZWrite off
        Blend SrcAlpha OneMinusSrcAlpha
        Cull off

        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "unityCG.cginc"

        sampler2D _MainTex;
        float4 _MainTex_ST;
        fixed4 _Color;
        float _VerticalBillboarding;

        struct a2v{
    
        float4 vertex:POSITION;
        float2 texcoord:TEXCOORD0;
        };

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

        v2f vert(a2v i){
    
        v2f o;
        // Take the origin of the model space as the anchor of the billboard 
        float3 center=float3(0,0,0);
        // Coordinates of camera in model space 
        float3 viewer=mul(unity_WorldToObject,float4(_WorldSpaceCameraPos,1));
        // The viewing direction is taken as the surface normal 
        float3 normalDir =normalize(viewer-center);

        // If it is 0 Then the vertical direction is fixed , by （0,1,0）, If it is 1 Then the surface normal is fixed ,up by （0,0,1）
        normalDir.y =normalDir.y*_VerticalBillboarding;
        // The surface normals 
        normalDir=normalize(normalDir);

        // Find three direction vectors 
        //up, Simple judgment , If upDir Greater than 1 Then the surface normal is fixed , Then the vertical direction is not fixed, so it is 0,0,1, If not, it means that the vertical direction is fixed , by 0,1,0
        float3 upDir=abs(normalDir.y)>0.999?float3(0,0,1):float3(0,1,0);
        float3 rightDir =normalize(cross(upDir,normalDir));
        upDir =normalize(cross(normalDir,rightDir));

        // Vertex transformation 
        // The offset of vertex coordinates from the anchor 
        float3 offset =i.vertex.xyz-center;
        // The new coordinates are obtained by relocating the anchor according to the three direction vectors 
        // Get the peak of billboard effect , According to three vertical directions , Calculate the offset based on the anchor , Get the final vertex 
       float3 localPos=center+rightDir*offset.x+upDir*offset.y+normalDir*offset.z;

       // Transform to crop space 
       o.pos=UnityObjectToClipPos(float4(localPos,1.0));
       o.uv=TRANSFORM_TEX(i.texcoord,_MainTex);
       return o;
        }

        fixed4 frag(v2f v):SV_Target{
    
        fixed4 c=tex2D(_MainTex,v.uv);
        c.rgb*=_Color;
        return c;
        }
        ENDCG
        }
    }
    FallBack "Transparent/VertexLit"
}