UnityShader 序列幀動畫效果

實現原理：主要思想是設置顯示uv紋理的大小，並逐幀修改圖片的uv坐標。

實現步驟

1、我們首先用_Time.y和速度屬性_Speed相乘得到模擬的時間。

2、然后我們用time除以_HorizontalAmount的結果值作為當前的行索引，除法結果的余數則是列索引。

3、接下來，我們根據行索引和列索引來構建真正的采樣坐標。由於序列幀圖像包含了很多張關鍵幀圖像，這意味着采樣坐標需要映射到關鍵幀圖像的坐標范圍。

4、我們可以把原紋理坐標i.uv按行數和列數進行等分，得到每個子圖像的紋理坐標范圍。

5、映射到對應的行列數后，再對紋理坐標進行偏移。

注意：Unity的紋理坐標豎直方向的順序和序列幀紋理中豎直方向上的順序是相反的。

Shader "unilt/SceneRainSplash" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}               //序列幀動畫紋理  
        _Color("Color Tint", Color) = (1, 1, 1, 1)            //顏色
        _HorizontalAmount("Horizontal Amount", float) = 6        // 行數
        _VerticalAmount("Vertical Amount", float) = 1            // 列數 
        _Speed("Speed", Range(1, 100)) = 7                     // 播放速度 
    }
    
    CGINCLUDE

        #include "UnityCG.cginc"

        sampler2D _MainTex;
        
        uniform half4 _MainTex_ST;
        uniform fixed4 _Color;
        uniform float _HorizontalAmount;
        uniform float _VerticalAmount;
        uniform float _Speed;

        struct appdata
        {
            float4 vertex : POSITION;   //從形似寄存器中讀取頂點坐標
            float2 uv : TEXCOORD0;      //從形似寄存器中讀取uv坐標信息
        };
        

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

        v2f vert(appdata v)
        {
            v2f o;
            
            //mul(UNITY_MATRIX_MVP,*)' == 'UnityObjectToClipPos(*) 
            //（物體的模型到世界矩陣 * 從世界到攝像機的矩陣 * 投影的矩陣 ）
            o.vertex = UnityObjectToClipPos(v.vertex);
            
            //TRANSFORM_TEX,就是將模型頂點的uv和Tiling、offset兩個變量進行計算得出實際顯示用的定點uv
            o.uv = TRANSFORM_TEX(v.uv, _MainTex);
            
            return o; 
        }
        
        fixed4 frag(v2f i) : SV_Target
        {    
            //所經過的時間,Unity內置變量_Timefloat4 _Time : Time (t/20, t, t*2, t*3)
            float time = floor(_Time.y * _Speed);
            //該時間渲染序列幀動畫指定的行列
            float row = floor(time / _HorizontalAmount);
            float col = time - row * _HorizontalAmount;

            //將所顯示的單張圖片縮放到應有的大小區域
            half2 uv = float2(i.uv.x / _HorizontalAmount, i.uv.y / _VerticalAmount);
            //移動到對應縮放后的區域位置
            uv.x += col / _HorizontalAmount;
            uv.y -= row / _VerticalAmount;
            fixed4 color = tex2D(_MainTex, uv);
            color.rgb *= _Color.rgb;
            return color;
        }
    
    ENDCG
    
    SubShader {
        Tags { "Queue" = "Transparent" }
        Cull Off
        ZWrite Off
        Blend One OneMinusSrcColor

    Pass {
    
        CGPROGRAM
        
        #pragma vertex vert
        #pragma fragment frag
        #pragma fragmentoption ARB_precision_hint_fastest 
        
        ENDCG
         
        }
                
    } 
    FallBack Off
}

 

序列幀圖像：