第十一章 让画面动起来

Unity Shader的内置变量（时间篇）

纹理动画

序列帧动画

一次播放一系列关键帧图形，当播放速度到一定值时，看起来就是个连续的动画。

优点是灵活性很强，不需要进行任何物理计算就可以得到非常细腻的动画效果；

缺点是由于每张关键帧图像不同，所需要的美术工作量也很大。

Shader "Unity Shaders Book/Chapter 11/Image Sequence Animation" {
	Properties {
		_Color ("Color Tint", Color) = (1, 1, 1, 1)
		//_MainTex就是包含了所有关键帧图像的纹理
		_MainTex ("Image Sequence", 2D) = "white" {}
		//该图像在水平方向包含的关键帧图像个数
    	_HorizontalAmount ("Horizontal Amount", Float) = 4
		//该图像在竖直方向包含的关键帧图像个数
    	_VerticalAmount ("Vertical Amount", Float) = 4
		//控制序列帧动画播放速度
    	_Speed ("Speed", Range(1, 100)) = 30
	}
	SubShader {
		//序列帧图像通常包含透明通道，可以被当成半透明对象
		//使用半透明标配来设置SubShader，Queue和RenderType设置成Transparent，把IgnoreProjector设置成True
		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 {
				//我们需要计算出每个时刻需要播放的关键帧在纹理中的位置。由于序列帧纹理是按行按列排列的，这个位置可以认为是该关键帧所在的行列索引数
				//_Time.y是自该场景加载后经过的时间
				//把_Time.y和速度_Speed相乘得到模拟的时间，并使用floor函数对结果值取整来得到整数时间time
				float time = floor(_Time.y * _Speed);  
				//使用time除以_HorizontalAmount的结果值的商来作为当前对应的行索引
				float row = floor(time / _HorizontalAmount);
				//余数是列索引
				float column = time - row * _HorizontalAmount;

				//采样坐标需要映射到每个关键帧图像的坐标范围内
				//首先把原纹理坐标i.uv按行和列进行等分，得到每个子图像的纹理坐标范围
				//然后使用当前的行列数对上面的结果进行偏移，得到当前子图像的纹理坐标
				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"
}

滚动的背景

很多2D游戏使用不断滚动的背景来模拟游戏角色在场景中的穿梭，这些背景包含了很多层来模拟一种视差效果。这些背景的实现就是利用了纹理动画。

Shader "Unity Shaders Book/Chapter 11/Scrolling 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;
				//两张纹理存到一个uv中减少占用的插值寄存器空间
				float4 uv : TEXCOORD0;
			};
			
			v2f vert (a2v v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				
				//利用TRANSFORM_TEX得到初始纹理坐标，然后利用内置_Time.y变量在水平方向上对纹理坐标进行偏移达到滚动效果
				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 {
				//利用i.uv.xy对纹理进行采样
				fixed4 firstLayer = tex2D(_MainTex, i.uv.xy);
				//利用i.uv.zw对纹理进行采样
				fixed4 secondLayer = tex2D(_DetailTex, i.uv.zw);
				
				//使用第二层的纹理的透明通道来混合两张纹理
				fixed4 c = lerp(firstLayer, secondLayer, secondLayer.a);
				c.rgb *= _Multiplier;
				
				return c;
			}
			
			ENDCG
		}
	}
	FallBack "VertexLit"
}

顶点动画

流动的河流

使用正弦函数模拟水流的波动效果

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越大，波长越小
 		_InvWaveLength ("Distortion Inverse Wave Length", Float) = 10
		//用于控制河流纹理的移动速度
 		_Speed ("Speed", Float) = 0.5
	}
	SubShader {
		//批处理会合并所有相关模型，这些模型各自的模型空间就会丢失，本例我们需要在物体的模型空间下对顶点位置进行偏移
		//DisableBatching取消对该Shader的批处理操作
		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;
				//计算顶点位移量，我们只希望对顶点x的方向进行位移，因此yzw的位移量被设置为0
				offset.yzw = float3(0.0, 0.0, 0.0);
				//利用_Frequency和_Time变量来控制正弦函数的频率
				//为了让不同位置具有不同的位移，我们对上述结果加上模型空间下的位置分量，并乘以_InvWaveLength来控制波长
				//最后，对结果乘以_Magnitude来控制波动的幅度，得到最终的位移
				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.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"
}

广告牌

广告牌技术会根据视角方向来旋转一个被纹理着色的多边形使得多边形看起来好像总是面对摄像机。广告牌技术被用于渲染烟雾、云朵、闪光效果等。

广告牌技术的本质就是构建旋转矩阵，一个变换矩阵需要知道3个基向量。广告牌技术使用的基向量通常是表面法线、指向上的方向、指向右的方向。我们还需要指定一个锚点，这个锚点在旋转过程中是固定不变的，以此来确定多边形在空间中的位置。

难点在于如何根据需求来构建3个相互正交的基矢量。

我们首先会通过初始计算得到目标的表面法线（视角方向）和指向上的方向。两者往往是不垂直的，但两者之一是固定的，例如当模拟草丛时，我们希望广告牌的指向上的方向永远是（0,1,0），而法线方向应该随视角变化；而当模拟粒子效果时，我们希望广告牌的法线方向是固定的，即总是指向视角方向，指向上的方向则可以发生变化。

我们假设法线的方向是固定的，首先，我们根据初始的表面法线和指向上的方向来计算出目标方向的指向右的方向（通过叉积操作）：

right=up\times normal

对其归一化后，再由法线方向和指向右的方向计算出正交的指向上的方向即可：

up^{'}=normal\times right

至此，我们得到用于旋转的3个正交基

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 {
		//为透明效果设置Queue、IgnoreProjector、RenderType
		//DisableBatching关闭批处理。批处理会合并所有相关的模型，这些模型各自的模型空间就会被丢失，而广告牌技术中，我们需要使用物体模型空间下的位置来作为锚点进行计算
		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(unity_WorldToObject,float4(_WorldSpaceCameraPos, 1));
				
				//根据观察位置和锚点计算目标法线方向
				float3 normalDir = viewer - center;
				//根据_VerticalBillboarding属性来控制垂直方向上的约束度
				//当_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 = UnityObjectToClipPos(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"
}

注意事项

阴影投射

Shader "Unity Shaders Book/Chapter 11/Vertex Animation With Shadow" {
	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 {"DisableBatching"="True"}
		
		Pass {
			Tags { "LightMode"="ForwardBase" }
			
			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);
				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.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
		}
		
		// Pass to render object as a shadow caster
		Pass {
			Tags { "LightMode" = "ShadowCaster" }
			
			CGPROGRAM
			
			#pragma vertex vert
			#pragma fragment frag
			
			#pragma multi_compile_shadowcaster
			
			#include "UnityCG.cginc"
			
			float _Magnitude;
			float _Frequency;
			float _InvWaveLength;
			float _Speed;
			
			struct v2f { 
				//利用V2F_SHADOW_CASTER来定义阴影投射需要定义的变量
			    V2F_SHADOW_CASTER;
			};
			
			v2f vert(appdata_base 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;
				//直接把偏移值加到顶点变量中
				v.vertex = v.vertex + offset;

				//TRANSFER_SHADOW_CASTER_NORMALOFFSET(o)让Unity来完成剩下的事
				TRANSFER_SHADOW_CASTER_NORMALOFFSET(o)
				
				return o;
			}
			
			fixed4 frag(v2f i) : SV_Target {
				//SHADOW_CASTER_FRAGMENT(i)让Unity自动完成阴影投射部分，把结果输出到深度图和阴影映射纹理中
			    SHADOW_CASTER_FRAGMENT(i)
			}
			ENDCG
		}
	}
	FallBack "VertexLit"
}