11 让画面动起来 [URP] - 清色的知识花园

11.1 UnityShader 内置变量#

名称	类型	描述
_Time	float4	场景自加载开始经过的时间，四个分量的值分别是(t/20,t,2t,3t)
_SinTime	float4	t 是时间的正弦值，四个分量的值分别是(t/8,t/4,t/2,t)
_CosTime	float4	t 是时间的余弦值，四个分量的值分别是(t/8,t/4,t/2,t)
unity_DeltaTime	float4	dt 是时间增量，四个分量的值分别是(dt,1/dt,smoothDt,1/smoothDt)

11.2纹理动画#

11.2.1 序列帧动画#

最常见的一种纹理动画

优点：

就是灵活性很强，变换不需要额外的运算就可以得到细腻的动画效果。

缺点：

序列帧中的每一帧图像都不一样，美术资源的体量也就更大

Code

1
Shader "Unity Shaders Book/Chapter11/ImageSequenceAnimation"
2
{
3
    Properties
4
    {
5
        _BaseColor("Base Color",Color) = (1,1,1,1)
6
        _BaseMap("Image Sequence", 2D) = "white" {}
7
        // 水平方向和垂直方向的图片个数
8
        _HorizontalAmount("Horizontal Amount", Float) =4
9
        _VerticalAmount("Vertical Amount", Float) =4
10
        _Speed("Speed", Range(1,100)) = 30
11
    }
12

13
    SubShader
14
    {
15
        Tags
16
        {
17
            "Queue" = "Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"
18
        }
19
        Pass
20
        {
21
            ZWrite Off
22
            Blend SrcAlpha OneMinusSrcAlpha
23

24
            HLSLPROGRAM
25
            #pragma vertex vert
26
            #pragma fragment frag
27

28
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
29
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
30
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/UnityInput.hlsl"
31
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Input.hlsl"
32
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Shadows.hlsl"
33
            #include  "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareOpaqueTexture.hlsl"
34

35
            TEXTURE2D(_BaseMap);
36
            SAMPLER(sampler_BaseMap);
37

38
            CBUFFER_START(UnityPerMaterial)
39
                float4 _BaseMap_ST;
40
                float4 _BaseColor;
41
                float _HorizontalAmount;
42
                float _VerticalAmount;
43
                float _Speed;
44
            CBUFFER_END
45

46
            struct Attributes
47
            {
48
                float4 positionOS:POSITION;
49
                float2 texcoord:TEXCOORD0;
50
            };
51

52
            struct Varyings
53
            {
54
                float4 positionCS:SV_POSITION;
55
                float2 uv:TEXCOORD0;
56
            };
57

58
            Varyings vert(Attributes IN)
59
            {
60
                Varyings OUT;
61

62
                OUT.positionCS = TransformObjectToHClip(IN.positionOS);
63
                OUT.uv = TRANSFORM_TEX(IN.texcoord, _BaseMap);
64

65
                return OUT;
66
            }
67

68
            half4 frag(Varyings IN):SV_TARGET
69
            {
70
                float time = floor(_Time.y * _Speed);
71
                float row = floor(time / _HorizontalAmount);
72
                float column = time - row * _HorizontalAmount;
73

74
                half2 uv  = float2(IN.uv.x/_HorizontalAmount , IN.uv.y/_VerticalAmount );
75
                uv.x+=column/_HorizontalAmount;
76
                uv.y-=row/_VerticalAmount;
77

78
                // half2 uv = IN.uv + half2(column, row);
79
                // uv.x /= _HorizontalAmount;
80
                // uv.y /= _VerticalAmount;
81

82
                half4 c = SAMPLE_TEXTURE2D(_BaseMap, sampler_BaseMap, uv);
83
                c.rgb *= _BaseColor.rgb;
84
                return c;
85
            }
86
            ENDHLSL
87
        }
88
    }
89
    Fallback "Mobile/VertexLit"
90

91
}

11.2.2 滚动的背景#

输入两个纹理，使用第二张纹理的Alpha值去 lerp混合两个纹理。并且使用_Time 的y值去分别设置两个纹理滚动的速度，创造出移动的效果。

最后使用_Multiplier参数和输出颜色相乘，调整背景亮度（两层纹理）

Code

1
Shader "Unity Shaders Book/Chapter11/ScrollingBackground"
2
{
3
    Properties
4
    {
5
        _BaseMap("Base Layer (RGB)", 2D) = "white" {}
6
        _DetailMap("2nd Layer (RGB)", 2D) = "white" {}
7
        _ScrollX("Base Layer Scroll Speed",Float) = 1.0
8
        _Scroll2X("2nd Layer Scroll Speed",Float) = 1.0
9
        _Multiplier("Layer Multiplier",Float) = 1
10
    }
11

12
    SubShader
13
    {
14
        Pass
15
        {
16
            HLSLPROGRAM
17
            #pragma vertex vert
18
            #pragma fragment frag
19

20
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
21
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
22
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/UnityInput.hlsl"
23
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Input.hlsl"
24
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Shadows.hlsl"
25
            #include  "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareOpaqueTexture.hlsl"
26

27
            TEXTURE2D(_BaseMap);
28
            SAMPLER(sampler_BaseMap);
29

30
            TEXTURE2D(_DetailMap);
31
            SAMPLER(sampler_DetailMap);
32

33
            CBUFFER_START(UnityPerMaterial)
34
                float4 _BaseMap_ST;
35
                float4 _DetailMap_ST;
36
                float _ScrollX;
37
                float _Scroll2X;
38
                float _Multiplier;
39

40
            CBUFFER_END
41

42
            struct Attributes
43
            {
44
                float4 positionOS: POSITION;
45
                float2 texcoord: TEXCOORD0;
46
            };
47

48
            struct Varyings
49
            {
50
                float4 positionCS:SV_POSITION;
51
                float4 uv :TEXCOORD0;
52
            };
53

54
            Varyings vert(Attributes IN)
55
            {
56
                Varyings OUT;
57
                OUT.positionCS = TransformObjectToHClip(IN.positionOS);
58
                OUT.uv.xy = TRANSFORM_TEX(IN.texcoord, _BaseMap)+frac(float2(_ScrollX,0)*_Time.y);
59
                OUT.uv.zw = TRANSFORM_TEX(IN.texcoord, _DetailMap)+frac(float2(_Scroll2X,0)*_Time.y);
60

61
                return OUT;
62
            }
63

64
            half4 frag(Varyings IN):SV_TARGET
65
            {
66
                half4 firstLayer = SAMPLE_TEXTURE2D(_BaseMap, sampler_BaseMap, IN.uv.xy);
67
                half4 secondLayer = SAMPLE_TEXTURE2D(_DetailMap, sampler_DetailMap, IN.uv.zw);
68
                half4 c = lerp(firstLayer,secondLayer,secondLayer.a);
69
                c.rgb*= _Multiplier;
70
                return c;
71
            }
72
            ENDHLSL
73
        }
74
    }
75

76
}

11.3 顶点动画#

11.3.2 广告牌#

还有一种常见的顶点动画广告牌技术(Billboarding)

该技术会根据视角的方向来旋转一个多边形，使这个多边形（通常是面片）看起来始终朝向摄像机。

该技术的本质就是构建旋转矩阵，我们需要的基向量由表面法线、指向上的方向和指向右的方向组成。除此之外我们还需要一个锚点确定多边形在空间中的位置。

难点在于我们需要去确认这三个构成矩阵的基向量。

首先我们会根据视角方向去确认表面法线。然后再拿取向上的方向，然后使用叉乘获得垂直于这两个方向的向量。

我们由两种标准的模拟方法一种是模拟草丛，一种是模拟粒子

表面法线和向上的方向它们之间通常是不垂直的，但是有一个方向会是固定的，例如

模拟草丛需要保持草丛视觉的透视关系，所以向上的方向是固定的

模拟粒子始终需要朝向摄像机，所以表面法线方向是固定的

假设法线方向是固定的，我们先叉乘法线方向和向上方向，获得右方向

right=up×normal

对其归一化之后，再由右方向和法线方向获取这个变化后的上方向

up'=normal×right

至此获得旋转矩阵的三个正交基

知识补充叉乘方向

[x_1,y_1,z_1]×[x_2,y_2,z_2]=[y_1z_2-z_1y_2,z_1x_2-x_1z_2,x_1y_2-y_1x_2]

||a×b|| = ||a|| ||b|| sinθ

叉乘的大小A就是 b * h h是平行四边形的高也就是 a sinθ

A = bh

如果 a和b是平行的，或者a或b是零矢量，a×b=0

将b的尾部放到a的头部可以确定 a×b 的方向，检查 a 和 b 是否是顺时针转动。

左手坐标系：a×b 顺时针指向你逆时针远离你

右手坐标系：a×b 顺时针远离你，逆时针指向你

基本轴向叉积

11.3.3 注意事项#

如果我们在模型空间下进行定点动画，那么由于批处理会合并模型，往往就会破坏这种动画效果，但是取消批处理会造成性能下降。所以我们应该避免面显示使用模型空间的中心作为锚点，我们可以使用顶点颜色来存储每个顶点到锚点的距离值。这在商业游戏中很常见。

如果我们想要对包含了顶点动画的物体添加阴影的话，使用内置的如Lit等包含阴影Pass渲染，是得不到正确的效果的，这是因为如果直接使用这些内置的 ShadowCaster Pass，这个Pass中并没有进行相关的顶点动画，因此Unity会按照原来的顶点位置来计算阴影。

需要注意的是我们之前的Fallback 使用的shader 文件是没有实现 ShadowCasterPass 的，也就不会产生阴影

我们需要自定义 ShadowCaster Pass 去实现变形对象阴影的显示

Vertex变化阴影代码

1
        Pass
2
        {
3
            Tags
4
            {
5
                "LightMode" = "ShadowCaster"
6
            }
7

8
            HLSLPROGRAM
9
            #pragma vertex vert
10
            #pragma fragment frag
11
            #pragma multi_compilie_shadowcaster
12
            #pragma multi_compile_vertex _ _CASTING_PUNCTUAL_LIGHT_SHADOW
13

14
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
15
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
16
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/UnityInput.hlsl"
17
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Input.hlsl"
18
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Shadows.hlsl"
19
            #include  "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareOpaqueTexture.hlsl"
20

21
            CBUFFER_START(UnityPerMaterial)
22
                float _Magnitude;
23
                float _Frequency;
24
                float _InvWaveLength;
25
                float _Speed;
26
            CBUFFER_END
27

28
            struct Attributes
29
            {
30
                float4 positionOS : POSITION;
31
                float4 normalOS:NORMAL;
32
                float4 texcoord:TEXCOORD0;
33
            };
34

35
            struct Varyings
36
            {
37
                float4 positionCS : SV_POSITION;
38
                float4 uv:TEXCOORD0;
39
            };
40

41
            Varyings vert(Attributes IN)
42
            {
43
                Varyings OUT;
44

45
                float3 positionWS = TransformObjectToWorld(IN.positionOS).xyz;
46
                float3 normalWS = TransformObjectToWorld(IN.normalOS).xyz;
47
                float4 offset;
48
                offset.yzw = float3(0, 0, 0);
49
                // 只需要x轴的偏移
50
                offset.x = sin(
51
                    _Frequency * _Time.y + IN.positionOS.x * _InvWaveLength + IN.positionOS.y * _InvWaveLength + IN.
52
                    positionOS.z * _InvWaveLength) * _Magnitude;
53
                IN.positionOS += offset;
54

55
                OUT.positionCS = TransformWorldToHClip(ApplyShadowBias(positionWS,
56
                                                                       normalWS,
57
                                                                       _MainLightPosition));
58
                return OUT;
59
            }
60

61
            half4 frag(Varyings IN) : SV_Target
62
            {
63
                return 0;
64
            }
65
            ENDHLSL
66
        }