一.Unity Shader 中的内置变量
动画效果往往都是把时间添加到一些变量的计算中，以便在时间变化时画面也可以随之变化。Unity Shader 提供了一系列关于时间的内置变量来允许我们方便地在Shader中访问允许时间，实现各种动画效果。下表给出了这些内置的时间变量。
二.纹理动画
目的：各种资源都比较局限的移动平台上，往往会使用纹理动画来代替复杂的例子系统等模拟各种动画效果。
最常用的纹理动画之一就是序列帧动画。
序列帧动画原理：依次播放一系列关键帧图像，当播放速度达到一定数值时，看起来就是一个连续的动画。
优点：灵活性很强，我们不需要进行任何物理计算就可以得到非常细腻的动画效果。而它的缺点也很明显，由于序列帧中每张关键帧图像都不一样，因此，要制作一张出色的序列帧纹理所需要的美术工程量比较大。
序列帧动画的精髓在于，我们需要在每个时刻计算该时刻下应该播放的关键帧的位置，并对该关键帧进行纹理采样
实现爆炸效果
Shader 代码：
Shader "Unity Shaders Book/Chapter 11/Image Sequence Animation" {
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 {
//由于序列帧图像通常都是透明纹理，我们需要设置Pass的相关状态，以渲染透明效果
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 = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target {
//_Time.y 是自该场景后所经过的时间，与速度相乘来得到模拟的时间，再用floor函数取整
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"
}
_HorizontalAmount、_VerticalAmount 分别代表了该图像在水平和竖直方向上包含的关键帧图像个数，_Speed 控制序列帧动画的播放速度。
由于序列帧图像通常是透明纹理，因此可以当成半透明对象处理，即把Queue和RanderType设为Transparent,把IgnoreProjector设置为True,同时在Pass中使用Blend开启和设置混合模式，并关闭深度写入。
三.顶点动画
原理通常就是使用正弦函数等来模拟水流波动效果。
A.水流波动
我们将学习如何模拟一个2D的河流效果，我们可以得到类似下图的效果。
shader如下：
Shader "Unity Shaders Book/Chapter 11/Water" {
Properties {
//河流纹理
_MainTex ("Main Tex", 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" "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 _Magnitude;
float _Frequency;
float _InvWaveLength;
float _Speed;
struct a2v {
float4 vertex : POSITION;
float4 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
};
v2f vert(a2v v) {
v2f o;
float4 offset;
offset.yzw = float3(0.0, 0.0, 0.0);
//只在水平方向上偏移，利用_Frequency 和 内置的_Time.y 来控制正弦函数的频率
//为了让不同的位置具有不同的位移，我们对上述结果加上了模型空间下的位置分量，并乘以_InvWaveLength 来控制波长
//最后乘以_Magnitude 来控制波动幅度，得到最终的位移。
offset.x = sin(_Frequency * _Time.y + v.vertex.x * _InvWaveLength + v.vertex.y * _InvWaveLength + v.vertex.z * _InvWaveLength) * _Magnitude;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex + offset);
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
o.uv += float2(0.0, _Time.y * _Speed);
return o;
}
fixed4 frag(v2f i) : SV_Target {
//这边只进行纹理采样再添加颜色控制即可
fixed4 c = tex2D(_MainTex, i.uv);
c.rgb *= _Color.rgb;
return c;
}
ENDCG
}
}
FallBack "Transparent/VertexLit"
}
_Magnitude控制水流波动幅度，_Frequency 控制波动频率，_InvWaveLength控制波长的倒数（_InvWaveLength越大，波长越小），_Speed控制水流纹理的移动速度。
设置了一个新的标签---DisableBatching, 因为一些SubShader在使用unity的批处理时会出现问题，这时可通过该标签直接指明是否对该shader使用批处理。而这些需要特殊处理的shader通常就是指包含了模型空间的顶点动画的shader。这是因为，批处理会合并所有相关的模型，而这些模型各自的模型空间就会丢失。而在本例中，我们需要在物体的模型空间下对顶点位置进行偏移。
B.广告牌
广告牌技术会根据视角方向来旋转一个被纹理着色的多边形（通常就是简单的四边形，这个多边形就是广告牌），使得多边形看起来好像总是面对着摄像机。广告牌技术被用于很多应用，比如渲染烟雾、云朵、闪光效果等。
广告牌技术的本质就是构建旋转矩阵，而我们知道一个变换矩阵需要3个基向量。广告牌技术使用的基向量通常就是表面法线（normal）、指向上的方向（up）以及指向右的方向（right）。除此之外，我们还需要指定一个锚点。这个锚点在旋转的过程中是固定不变的，以此来确定多边形在空间中的位置。
广告牌技术的难点在于，如何根据需要来构建3个相互正交的基向量。
计算过程通常是，首先会通过初始计算得到目标的表面法线（例如就是视角方向）和指向上的方向，而两者往往是不垂直的。但是，两者其中之一是固定的，例如当模拟草丛时，我们希望广告牌的法线方向是固定的，即总是指向视角方向，指向上的方向则可以发生变换。我们假设法线方向是固定的，首先，我们根据初始的表面法线和指向上的方向来计算出目标方向的指向右的方向（通过叉积操作）：
right = up × normal
对其归一化后，再由法线方向和指向右的方向计算出正交的指向上的方向即可：
up' = normal × right
至此，我们就可以得到用于旋转的3个正交基了。下图给出了上述计算过程的图示。如果指向上的方向是固定的，计算过程也是类似的。
我们将在Unity中实现上面提到的广告牌技术。我们可以得到类似下图中的效果。
shader如下
Shader "Unity Shaders Book/Chapter 11/Billboard" {
Properties {
//广告牌显示的透明纹理
_MainTex ("Main Tex", 2D) = "white" {}
//控制整体颜色
_Color ("Color Tint", Color) = (1, 1, 1, 1)
//调整是固定法线还是固定指向上的方向
_VerticalBillboarding ("Vertical Restraints", Range(0, 1)) = 1
}
SubShader {
// Need to disable batching because of the vertex animation
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 "Lighting.cginc"
sampler2D _MainTex;
float4 _MainTex_ST;
fixed4 _Color;
fixed _VerticalBillboarding;
struct a2v {
float4 vertex : POSITION;
float4 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
};
v2f vert (a2v v) {
v2f o;
// 选择模型空间的原点作为广告牌的锚点，并利用内置变量获取模型空间下的视角位置
float3 center = float3(0, 0, 0);
float3 viewer = mul(_World2Object,float4(_WorldSpaceCameraPos, 1));
//计算3个正交矢量。首先，我们根据观察位置和锚点计算目标法线方向，
//并根据_VerticalBillboarding 属性来控制垂直方向上的约束度。
float3 normalDir = viewer - center;
// 如果 _VerticalBillboarding 等于 1, 意味着法线方向固定为视角方向
// 如果 _VerticalBillboarding 等于 0, 意味着向上方向固定为（0,1,0）
normalDir.y =normalDir.y * _VerticalBillboarding;
//归一化操作
normalDir = normalize(normalDir);
//我们得到了粗略的向上方向。为了防止法线方向和向上方向平行
//我们对法线方向的y分量进行判断，以得到合适的向上方向。然后，根据法线方向
//和粗略的向上方向得到向右方向，并对结果进行归一化。但由于此时向上的方向还是不
//准确的，我们又根据准确的法线方向和向右方向得到最后的向上方向
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));
//我们根据原始的位置相对于锚点的偏移量以及3个正交基矢量，以计算得到新的顶点位置。
float3 centerOffs = v.vertex.xyz - center;
float3 localPos = center + rightDir * centerOffs.x + upDir * centerOffs.y + normalDir * centerOffs.z;
//最后，把模型空间的顶点位置变换到裁剪空间中
o.pos = mul(UNITY_MATRIX_MVP, float4(localPos, 1));
o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target {
fixed4 c = tex2D (_MainTex, i.uv);
c.rgb *= _Color.rgb;
return c;
}
ENDCG
}
}
FallBack "Transparent/VertexLit"
}
需要说明的是，在上面的例子中，我们使用的是Unity自带的Quad来作为广告牌，而不能使用自带的Plane。因为代码是建立在一个竖直摆放的多边形的基础上的，也就是说，这个多边形的顶点结构需要满足在模型空间下是竖直排列的。只有这样，我们才能使用v.vertex来计算到正确的相对于中心的位置偏移量。
C.注意事项
1.在之前看到的那样，如果我们在模型空间下进行了一些顶点动画，那么批处理往往就会破坏这种动画效果。这时可通过SubShader的DisableBatching标签来强制取消对该Unity Shader的批处理。然而，取消批处理会带来一定的性能下降，增加了Draw Call，因此我们应该尽量避免使用模型空间下的一些绝对位置和方向来进行计算。在广告牌的例子中，为了避免显示使用模型空间的中心来作为锚点，我们可以利用顶点颜色来存储每个顶点到锚点的距离值，这种做法在商业游戏中很常见。
2.如果想要对包含了顶点动画的物体添加阴影，那么如果像之前那样使用内置的Diffuse等包含的阴影Pass来渲染，就得不到正确的阴影效果（这里指的是无法向其他物体正确地投射阴影）。这是因为，Unity 的阴影绘制需要调用一个ShadowCaster Pass，而如果直接使用这些内置的ShadowCasterPass，这个Pass中并没有进行相关的顶点动画，因此Unity 自定义的ShadowCaster Pass，而这个Pass中，我们将进行统一的顶点变换过程。需要注意的是，在前面的实现中，如果涉及半透明物体我们都把Fallback设置成了Transparent/VertexLit ，而Transparent/VertexLit没有定义ShadowCaster Pass，因此也就不会产生阴影。
