UnityShader(四)一些用shader实现的动画
1、序列帧动画
序列帧动画相当于是根据时间的变化来取不一样的纹理,就和动画状态机差不多。不过对纹理的处理是在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 {Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}//序列帧图像一般是透明的,按透明的方式渲染Pass {Tags { "LightMode"="ForwardBase" }ZWrite OffBlend SrcAlpha OneMinusSrcAlphaCGPROGRAM#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); //Unity内置时间,_Time.y表示程序运行到现在经过的时间,floor是向下取整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;//将原本的uv坐标映射到序列帧纹理的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"
}
2、纹理动画
纹理动画是将纹理的uv坐标进行不断变化得到的效果。一般用于滚动背景等。
Shader "Unity Shaders Book/Chapter 11/Scrolling Background" {Properties {_MainTex ("Base Layer (RGB)", 2D) = "white" {}//纹理1(第一层)_DetailTex ("2nd Layer (RGB)", 2D) = "white" {}//纹理2(第二层)_ScrollX ("Base layer Scroll Speed", Float) = 1.0//纹理1滚动速度_Scroll2X ("2nd layer Scroll Speed", Float) = 1.0//纹理2滚动速度_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);//frac限制值为0-1(返回小数部分)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"
}
3、顶点动画
顶点动画顾名思义,是由顶点位置不断移动形成的动画,比如流动的河流等。此处用到了三角函数,流动的河流形状也和正弦波类似。
// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'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 OffBlend SrcAlpha OneMinusSrcAlphaCull Off//平面mesh如果不关闭剔除会直接不显示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);//只对水平方向进行偏移//Asin(wx+b),为了让不同位置有不同位移,所以加了y和z的计算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"
}
广告牌技术也是一种顶点动画。广告牌动画是指屏幕中的物体会随着视角的方向而变化(让其始终正面朝向视角)。
核心思想是构建一个旋转矩阵,以变化后的多边形法线向量方向和视角方向平行,指向上的方向成为相对方向,再根据这两个方向求出新的向右的方向(叉乘),以此得到新的变换矩阵。在模型空间中先用这个矩阵变换后再进行MVP转换,从而得到广告牌效果。
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 animationTags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "DisableBatching"="True"}Pass { Tags { "LightMode"="ForwardBase" }ZWrite OffBlend SrcAlpha OneMinusSrcAlphaCull OffCGPROGRAM#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;// Suppose the center in object space is fixedfloat3 center = float3(0, 0, 0);//选择模型空间的原点作为锚点float3 viewer = mul(unity_WorldToObject,float4(_WorldSpaceCameraPos, 1));//模型空间下视角位置float3 normalDir = viewer - center;// If _VerticalBillboarding equals 1, we use the desired view dir as the normal dir// Which means the normal dir is fixed// Or if _VerticalBillboarding equals 0, the y of normal is 0// Which means the up dir is fixednormalDir.y =normalDir.y * _VerticalBillboarding;//当约束为1时,法线方向即为视角方向normalDir = normalize(normalDir);// Get the approximate up dir// If normal dir is already towards up, then the up dir is towards frontfloat3 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));//再由视角方向和右方向求出目标方向的向上方向// Use the three vectors to rotate the quadfloat3 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"
}
4.带阴影的顶点动画
由于Unity内置的ShadowCaster Pass是没有进行顶点相关的动画计算的,所以我们需要自定义ShadowCaster Pass才能得到正确的阴影,不然阴影会是没有动画的状态。
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 {// Need to disable batching because of the vertex animationTags {"DisableBatching"="True"}Pass {Tags { "LightMode"="ForwardBase" }Cull OffCGPROGRAM #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 casterPass {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 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)return o;}fixed4 frag(v2f i) : SV_Target {SHADOW_CASTER_FRAGMENT(i)}ENDCG}}FallBack "VertexLit"
}
此处的所有shader代码均摘抄自冯乐乐的《Unity Shader入门精要》,并加上了一些注释。
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
