Unity Shader:简单的动画

本文同时发布在我的个人博客上：https://dragon_boy.gitee.io

纹理动画

序列帧动画

下面有一张序列帧图：

代码如下：

Shader "Unlit/Boom"
{
    Properties {
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _MainTex ("Image Sequence", 2D) = "white" {}
        _HorizontalAmount ("Horizontal Amount", Float) = 4
        _VerticalAmount ("Vertical Amount", Float) = 4
        _Speed ("Speed", Range(1, 100)) = 30
    }
    SubShader {
        Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
        
        Pass {
            Tags { "LightMode"="ForwardBase" }
            
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
            
            CGPROGRAM
            
            #pragma vertex vert  
            #pragma fragment frag
            
            #include "UnityCG.cginc"
            
            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _HorizontalAmount;
            float _VerticalAmount;
            float _Speed;
              
            struct a2v {  
                float4 vertex : POSITION; 
                float2 texcoord : TEXCOORD0;
            };  
            
            struct v2f {  
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };  
            
            v2f vert (a2v v) {  
                v2f o;  
                o.pos = UnityObjectToClipPos(v.vertex);  
                o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);  
                return o;
            }  
            
            fixed4 frag (v2f i) : SV_Target {
                float time = floor(_Time.y * _Speed);  
                float row = floor(time / _HorizontalAmount);
                float column = time - row * _HorizontalAmount;
                
//              half2 uv = float2(i.uv.x /_HorizontalAmount, i.uv.y / _VerticalAmount);
//              uv.x += column / _HorizontalAmount;
//              uv.y -= row / _VerticalAmount;
                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"
}

主要是片元着色器中的代码，我们使用内置的_Time变量的y变量来获取自场景加载来的时间。我们将这个变量和设置的速度相乘取整来获得模拟的时间。我们再使用时间除以列数来获得对应行索引，余数是列索引。我们使用索引构成的坐标对UV坐标偏移，然后分别除以行列数来获得每帧的对应的UV坐标。

滚动背景

使用图片如下：

Shader代码如下：

Shader "Unlit/BackGround"
{
    Properties {
        _MainTex ("Base Layer (RGB)", 2D) = "white" {}
        _DetailTex ("2nd Layer (RGB)", 2D) = "white" {}
        _ScrollX ("Base layer Scroll Speed", Float) = 1.0
        _Scroll2X ("2nd layer Scroll Speed", Float) = 1.0
        _Multiplier ("Layer Multiplier", Float) = 1
    }
    SubShader {
        Tags { "RenderType"="Opaque" "Queue"="Geometry"}
        
        Pass { 
            Tags { "LightMode"="ForwardBase" }
            
            CGPROGRAM
            
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"
            
            sampler2D _MainTex;
            sampler2D _DetailTex;
            float4 _MainTex_ST;
            float4 _DetailTex_ST;
            float _ScrollX;
            float _Scroll2X;
            float _Multiplier;
            
            struct a2v {
                float4 vertex : POSITION;
                float4 texcoord : TEXCOORD0;
            };
            
            struct v2f {
                float4 pos : SV_POSITION;
                float4 uv : TEXCOORD0;
            };
            
            v2f vert (a2v v) {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                
                o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex) + frac(float2(_ScrollX, 0.0) * _Time.y);
                o.uv.zw = TRANSFORM_TEX(v.texcoord, _DetailTex) + frac(float2(_Scroll2X, 0.0) * _Time.y);
                
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target {
                fixed4 firstLayer = tex2D(_MainTex, i.uv.xy);
                fixed4 secondLayer = tex2D(_DetailTex, i.uv.zw);
                
                fixed4 c = lerp(firstLayer, secondLayer, secondLayer.a);
                c.rgb *= _Multiplier;
                
                return c;
            }
            
            ENDCG
        }
    }
    FallBack "VertexLit"
}

主要的方法是在顶点着色器中用时间和设置的滚动速度平移UV坐标。

顶点动画

模拟河流

这里使用正弦函数来模拟河流波动效果。

Shader代码如下：

Shader "Unlit/Water"
{
    Properties
    {   
        _MainTex ("Texture", 2D) = "white" {}
        _Color("Color Tint", Color) = (1,1,1,1)
        _Magnitude("Distortion Magnitude", Float) = 1
        _Frequency("Distortion Frequency", Float) = 1
        _InvWaveLength("Distortion Inverse Wave Length", Float) = 10
        _Speed("Speed", Float) = 0.5
    }
    SubShader
    {
        Tags { "Queue" = "Transparent" "IgnoreProjection" = "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"

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

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

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

            v2f vert (appdata v)
            {
                v2f o;
                float4 offset;
                offset.yzw = float3(0.0, 0.0, 0.0);
                offset.x = sin(_Frequency * _Time.y + v.vertex.x * _InvWaveLength + v.vertex.y * _InvWaveLength + v.vertex.z * _InvWaveLength) * _Magnitude;
                o.pos = UnityObjectToClipPos(v.vertex + offset);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                o.uv += float2(0.0, _Time.y * _Speed);
              
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                col.rgb *= _Color.rgb;
                return col;
            }
            ENDCG
        }
    }
}

注意，我们还添加了一个额外的标签DisablePatching，并设为True，这表明不使用批处理，因为批处理会合并相关模型，各自的模型空间会消失。

我们使用内置的_Fenquency属性和_Time.y变量来控制正弦函数的频率。

公告板技术

另一种常见的顶点动画是公告板技术。公告板技术会根据视角方向来旋转多边形，看起来多边形好像总是面对着摄像机。

公告板技术本质就是构建旋转矩阵。公告板技术使用表面法线、指向上的方向以及指向右的方向构成这个旋转矩阵。

构建上述矩阵的方法是：先定义一个法线方向，然后定义一个指向上的方向(不需要相互垂直，但其中一个是固定的，另一个会随视角变换)。这里假设法线方向是固定的，即永远是视角方向，这里定义向上的方向是世界y轴方向(0,1,0)，那么我们可以通过叉积获得向右的方向：

对这个向右的矢量归一化后，再与法线叉乘获得相互正交的指向上的方向:

归一化后，得到的三个相互正交的矢量就可以构成旋转矩阵了。

下面创建一个平面来模拟公告板，Shader代码如下:

Shader "Unlit/Billboarding"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color ("Color Tint", Color) = (1,1,1,1)
        _VerticalBillboarding("Vertical Restraints", Range(0,1)) = 1
    }
    SubShader
    {
        Tags { "Queue" = "Transparent" "IgnoreProjection" = "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"

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

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

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

            v2f vert (appdata v)
            {
                v2f o;
                float center = (0, 0, 0);
                float3 viewer = mul(unity_WorldToObject, float4(_WorldSpaceCameraPos, 1));
                float3 normalDir = viewer - center;
                normalDir.y = normalDir.y * _VerticalBillboarding;
                normalDir = normalize(normalDir);

                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));
                float3 centerOffs = v.vertex.xyz - center;
                float3 localPos = center + rightDir * centerOffs.x + upDir * centerOffs.y + normalDir * centerOffs.z;
                o.pos = UnityObjectToClipPos(localPos);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                col.rgb * _Color.rgb;
                return col;
            }
            ENDCG
        }
    }
}

顶点着色器的所有计算都在模型空间下进行。我们选择模型空间的原点作为广告牌的锚点，这个点用来确定多边形在空间中的位置。

我们将世界空间下的摄像机位置逆变换来获得模型空间下的摄像机位置，即视角位置。

接着按照我们上述的步骤计算法线、向右向量、向上向量构成旋转矩阵并用来变换模型空间的坐标，最后把模型空间坐标转化到裁剪空间。