一.Unity Shader 中的內(nèi)置變量
動(dòng)畫效果往往都是把時(shí)間添加到一些變量的計(jì)算中，以便在時(shí)間變化時(shí)畫面也可以隨之變化。Unity Shader 提供了一系列關(guān)于時(shí)間的內(nèi)置變量來允許我們方便地在Shader中訪問允許時(shí)間蚜点，實(shí)現(xiàn)各種動(dòng)畫效果阁危。下表給出了這些內(nèi)置的時(shí)間變量捆姜。
二.紋理動(dòng)畫
目的：各種資源都比較局限的移動(dòng)平臺(tái)上锌俱，往往會(huì)使用紋理動(dòng)畫來代替復(fù)雜的例子系統(tǒng)等模擬各種動(dòng)畫效果。
最常用的紋理動(dòng)畫之一就是序列幀動(dòng)畫永脓。
序列幀動(dòng)畫原理：依次播放一系列關(guān)鍵幀圖像袍辞，當(dāng)播放速度達(dá)到一定數(shù)值時(shí)，看起來就是一個(gè)連續(xù)的動(dòng)畫常摧。
優(yōu)點(diǎn)：靈活性很強(qiáng)搅吁，我們不需要進(jìn)行任何物理計(jì)算就可以得到非常細(xì)膩的動(dòng)畫效果。而它的缺點(diǎn)也很明顯落午，由于序列幀中每張關(guān)鍵幀圖像都不一樣谎懦，因此，要制作一張出色的序列幀紋理所需要的美術(shù)工程量比較大溃斋。
序列幀動(dòng)畫的精髓在于界拦，我們需要在每個(gè)時(shí)刻計(jì)算該時(shí)刻下應(yīng)該播放的關(guān)鍵幀的位置，并對(duì)該關(guān)鍵幀進(jìn)行紋理采樣
實(shí)現(xiàn)爆炸效果
Shader 代碼：
Shader "Unity Shaders Book/Chapter 11/Image Sequence Animation" {
Properties {
_Color ("Color Tint", Color) = (1, 1, 1, 1)
//關(guān)鍵幀紋理
_MainTex ("Image Sequence", 2D) = "white" {}
//圖像在水平方向上的關(guān)鍵幀個(gè)數(shù)
_HorizontalAmount ("Horizontal Amount", Float) = 4
//圖像在垂直方向上的關(guān)鍵幀個(gè)數(shù)
_VerticalAmount ("Vertical Amount", Float) = 4
//控制序列幀的播放速度
_Speed ("Speed", Range(1, 100)) = 30
}
SubShader {
//由于序列幀圖像通常都是透明紋理盐类，我們需要設(shè)置Pass的相關(guān)狀態(tài)寞奸，以渲染透明效果
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 是自該場(chǎng)景后所經(jīng)過的時(shí)間，與速度相乘來得到模擬的時(shí)間在跳，再用floor函數(shù)取整
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;
//進(jìn)行位置偏移
half2 uv = i.uv + half2(column, -row);
//進(jìn)行大小鎖定
uv.x /= _HorizontalAmount;
uv.y /= _VerticalAmount;
//進(jìn)行采樣
fixed4 c = tex2D(_MainTex, uv);
c.rgb *= _Color;
return c;
}
ENDCG
}
}
FallBack "Transparent/VertexLit"
}
_HorizontalAmount、_VerticalAmount 分別代表了該圖像在水平和豎直方向上包含的關(guān)鍵幀圖像個(gè)數(shù)隐岛，_Speed 控制序列幀動(dòng)畫的播放速度猫妙。
由于序列幀圖像通常是透明紋理，因此可以當(dāng)成半透明對(duì)象處理聚凹，即把Queue和RanderType設(shè)為Transparent,把IgnoreProjector設(shè)置為True,同時(shí)在Pass中使用Blend開啟和設(shè)置混合模式割坠，并關(guān)閉深度寫入。
三.頂點(diǎn)動(dòng)畫
原理通常就是使用正弦函數(shù)等來模擬水流波動(dòng)效果妒牙。
A.水流波動(dòng)
我們將學(xué)習(xí)如何模擬一個(gè)2D的河流效果彼哼，我們可以得到類似下圖的效果。
shader如下：
Shader "Unity Shaders Book/Chapter 11/Water" {
Properties {
//河流紋理
_MainTex ("Main Tex", 2D) = "white" {}
//控制整體顏色
_Color ("Color Tint", Color) = (1, 1, 1, 1)
//控制水流波動(dòng)的幅度
_Magnitude ("Distortion Magnitude", Float) = 1
//控制波動(dòng)頻率
_Frequency ("Distortion Frequency", Float) = 1
//用于控制波長(zhǎng)的倒數(shù)
_InvWaveLength ("Distortion Inverse Wave Length", Float) = 10
//河流紋理的移動(dòng)速度
_Speed ("Speed", Float) = 0.5
}
SubShader {
// 禁用批處理湘今，因?yàn)榕幚頃?huì)合并所有相關(guān)的模型敢朱，而這些模型各自的模型空間就會(huì)丟失
Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "DisableBatching"="True"}
Pass {
Tags { "LightMode"="ForwardBase" }
//關(guān)閉深度寫入，開啟并設(shè)置了混合模式，并關(guān)閉了剔除功能拴签。這是為了讓水流的每個(gè)面都能顯示
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 和 內(nèi)置的_Time.y 來控制正弦函數(shù)的頻率
//為了讓不同的位置具有不同的位移，我們對(duì)上述結(jié)果加上了模型空間下的位置分量蚓哩，并乘以_InvWaveLength 來控制波長(zhǎng)
//最后乘以_Magnitude 來控制波動(dòng)幅度构灸，得到最終的位移。
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 {
//這邊只進(jìn)行紋理采樣再添加顏色控制即可
fixed4 c = tex2D(_MainTex, i.uv);
c.rgb *= _Color.rgb;
return c;
}
ENDCG
}
}
FallBack "Transparent/VertexLit"
}
_Magnitude控制水流波動(dòng)幅度岸梨，_Frequency 控制波動(dòng)頻率喜颁，_InvWaveLength控制波長(zhǎng)的倒數(shù)（_InvWaveLength越大，波長(zhǎng)越胁芾）洛巢，_Speed控制水流紋理的移動(dòng)速度。
設(shè)置了一個(gè)新的標(biāo)簽---DisableBatching, 因?yàn)橐恍㏒ubShader在使用unity的批處理時(shí)會(huì)出現(xiàn)問題次兆，這時(shí)可通過該標(biāo)簽直接指明是否對(duì)該shader使用批處理稿茉。而這些需要特殊處理的shader通常就是指包含了模型空間的頂點(diǎn)動(dòng)畫的shader。這是因?yàn)榻嫣浚幚頃?huì)合并所有相關(guān)的模型漓库，而這些模型各自的模型空間就會(huì)丟失。而在本例中园蝠，我們需要在物體的模型空間下對(duì)頂點(diǎn)位置進(jìn)行偏移渺蒿。
B.廣告牌
廣告牌技術(shù)會(huì)根據(jù)視角方向來旋轉(zhuǎn)一個(gè)被紋理著色的多邊形（通常就是簡(jiǎn)單的四邊形，這個(gè)多邊形就是廣告牌）彪薛，使得多邊形看起來好像總是面對(duì)著攝像機(jī)茂装。廣告牌技術(shù)被用于很多應(yīng)用，比如渲染煙霧善延、云朵少态、閃光效果等。
廣告牌技術(shù)的本質(zhì)就是構(gòu)建旋轉(zhuǎn)矩陣易遣，而我們知道一個(gè)變換矩陣需要3個(gè)基向量彼妻。廣告牌技術(shù)使用的基向量通常就是表面法線（normal）、指向上的方向（up）以及指向右的方向（right）豆茫。除此之外侨歉，我們還需要指定一個(gè)錨點(diǎn)。這個(gè)錨點(diǎn)在旋轉(zhuǎn)的過程中是固定不變的揩魂，以此來確定多邊形在空間中的位置幽邓。
廣告牌技術(shù)的難點(diǎn)在于，如何根據(jù)需要來構(gòu)建3個(gè)相互正交的基向量火脉。
計(jì)算過程通常是牵舵，首先會(huì)通過初始計(jì)算得到目標(biāo)的表面法線（例如就是視角方向）和指向上的方向柒啤，而兩者往往是不垂直的。但是棋枕，兩者其中之一是固定的白修，例如當(dāng)模擬草叢時(shí)，我們希望廣告牌的法線方向是固定的重斑，即總是指向視角方向，指向上的方向則可以發(fā)生變換窥浪。我們假設(shè)法線方向是固定的祖很，首先漾脂，我們根據(jù)初始的表面法線和指向上的方向來計(jì)算出目標(biāo)方向的指向右的方向（通過叉積操作）：
right = up × normal
對(duì)其歸一化后，再由法線方向和指向右的方向計(jì)算出正交的指向上的方向即可：
up' = normal × right
至此形耗，我們就可以得到用于旋轉(zhuǎn)的3個(gè)正交基了。下圖給出了上述計(jì)算過程的圖示判呕。如果指向上的方向是固定的倦踢，計(jì)算過程也是類似的。
我們將在Unity中實(shí)現(xiàn)上面提到的廣告牌技術(shù)辱挥。我們可以得到類似下圖中的效果。
shader如下
Shader "Unity Shaders Book/Chapter 11/Billboard" {
Properties {
//廣告牌顯示的透明紋理
_MainTex ("Main Tex", 2D) = "white" {}
//控制整體顏色
_Color ("Color Tint", Color) = (1, 1, 1, 1)
//調(diào)整是固定法線還是固定指向上的方向
_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" }
//這里關(guān)閉了深度寫入叠洗，開啟并設(shè)置了混合模式，并關(guān)閉了剔除功能旅东。這是為了讓廣告牌的每個(gè)面都能顯示
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;
// 選擇模型空間的原點(diǎn)作為廣告牌的錨點(diǎn)灭抑，并利用內(nèi)置變量獲取模型空間下的視角位置
float3 center = float3(0, 0, 0);
float3 viewer = mul(_World2Object,float4(_WorldSpaceCameraPos, 1));
//計(jì)算3個(gè)正交矢量。首先抵代，我們根據(jù)觀察位置和錨點(diǎn)計(jì)算目標(biāo)法線方向腾节，
//并根據(jù)_VerticalBillboarding 屬性來控制垂直方向上的約束度。
float3 normalDir = viewer - center;
// 如果 _VerticalBillboarding 等于 1, 意味著法線方向固定為視角方向
// 如果 _VerticalBillboarding 等于 0, 意味著向上方向固定為（0,1,0）
normalDir.y =normalDir.y * _VerticalBillboarding;
//歸一化操作
normalDir = normalize(normalDir);
//我們得到了粗略的向上方向荤牍。為了防止法線方向和向上方向平行
//我們對(duì)法線方向的y分量進(jìn)行判斷案腺，以得到合適的向上方向。然后康吵，根據(jù)法線方向
//和粗略的向上方向得到向右方向劈榨，并對(duì)結(jié)果進(jìn)行歸一化。但由于此時(shí)向上的方向還是不
//準(zhǔn)確的晦嵌，我們又根據(jù)準(zhǔn)確的法線方向和向右方向得到最后的向上方向
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));
//我們根據(jù)原始的位置相對(duì)于錨點(diǎn)的偏移量以及3個(gè)正交基矢量同辣，以計(jì)算得到新的頂點(diǎn)位置。
float3 centerOffs = v.vertex.xyz - center;
float3 localPos = center + rightDir * centerOffs.x + upDir * centerOffs.y + normalDir * centerOffs.z;
//最后惭载，把模型空間的頂點(diǎn)位置變換到裁剪空間中
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陡舅。因?yàn)榇a是建立在一個(gè)豎直擺放的多邊形的基礎(chǔ)上的，也就是說伴挚，這個(gè)多邊形的頂點(diǎn)結(jié)構(gòu)需要滿足在模型空間下是豎直排列的靶衍。只有這樣，我們才能使用v.vertex來計(jì)算到正確的相對(duì)于中心的位置偏移量茎芋。
C.注意事項(xiàng)
1.在之前看到的那樣颅眶，如果我們?cè)谀Ｐ涂臻g下進(jìn)行了一些頂點(diǎn)動(dòng)畫，那么批處理往往就會(huì)破壞這種動(dòng)畫效果田弥。這時(shí)可通過SubShader的DisableBatching標(biāo)簽來強(qiáng)制取消對(duì)該Unity Shader的批處理涛酗。然而，取消批處理會(huì)帶來一定的性能下降偷厦，增加了Draw Call商叹，因此我們應(yīng)該盡量避免使用模型空間下的一些絕對(duì)位置和方向來進(jìn)行計(jì)算。在廣告牌的例子中只泼，為了避免顯示使用模型空間的中心來作為錨點(diǎn)剖笙，我們可以利用頂點(diǎn)顏色來存儲(chǔ)每個(gè)頂點(diǎn)到錨點(diǎn)的距離值，這種做法在商業(yè)游戲中很常見请唱。
2.如果想要對(duì)包含了頂點(diǎn)動(dòng)畫的物體添加陰影弥咪，那么如果像之前那樣使用內(nèi)置的Diffuse等包含的陰影Pass來渲染过蹂，就得不到正確的陰影效果（這里指的是無法向其他物體正確地投射陰影）。這是因?yàn)椋琔nity 的陰影繪制需要調(diào)用一個(gè)ShadowCaster Pass，而如果直接使用這些內(nèi)置的ShadowCasterPass切平，這個(gè)Pass中并沒有進(jìn)行相關(guān)的頂點(diǎn)動(dòng)畫，因此Unity 自定義的ShadowCaster Pass脆诉，而這個(gè)Pass中，我們將進(jìn)行統(tǒng)一的頂點(diǎn)變換過程坦报。需要注意的是库说，在前面的實(shí)現(xiàn)中，如果涉及半透明物體我們都把Fallback設(shè)置成了Transparent/VertexLit 片择，而Transparent/VertexLit沒有定義ShadowCaster Pass潜的，因此也就不會(huì)產(chǎn)生陰影。
