Shader入门精要(十一)让画面动起来

UnityShader的内置时间变量

image-20221226113747301

序列帧动画

通过使用Time实现循环的特效播放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
Shader "Unlit/Exp2Shader"
{
Properties
{
_Color ("Color Tint",Color)=(1,1,1,1)
_MainTex ("Texture", 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
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog

#include "UnityCG.cginc"

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

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

sampler2D _MainTex;
float4 _MainTex_ST;

v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}

float _Speed;
float _HorizontalAmount, _VerticalAmount;
fixed4 _Color;
fixed4 frag(v2f i) : SV_Target
{
float time = floor(_Time.y * _Speed);
float row = floor(time / _HorizontalAmount);
float column = time - 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"

}

无限滚动背景

很多无限滚动的背景也是使用了纹理动画。纹理资源: OpenGameArt.org

注意: uv现已经不存在zw值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
Shader "Unlit/BackGroundShader"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_DetailTex("2nd Layer (RGB)",2D)="white" {}
_ScrollX("Base Layer Scrool Speed",Float)=1.0
_Scroll2X("2nd Layer Scroll Speed",Float)=1.0
_Multiplier("Layer Multiplier",Float)=1
}
SubShader
{
Tags
{
"RenderType"="Opaque"
}
LOD 100

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog

#include "UnityCG.cginc"

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

struct v2f
{
float2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
float4 vertex : SV_POSITION;
};

sampler2D _MainTex, _DetailTex;
float4 _MainTex_ST;
float _ScrollX, _Scroll2X, _Multiplier;
float4 _DetailTex_ST;

v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv.xy = TRANSFORM_TEX(v.uv, _MainTex) + frac(float2(_ScrollX, 0.0) * _Time.y);
o.uv.zw = TRANSFORM_TEX(v.uv, _DetailTex) + frac(float2(_Scroll2X, 0.0) * _Time.y);
UNITY_TRANSFER_FOG(o, o.vertex);
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"
}

顶点动画