Shader序列帧动画——UnityShader学习笔记复习_序列中shader

自言自语

之前有学习过 可是后边忘记了
今天复习 发现当初理解的有一些问题今天就边写边尝试自己理解并注释

可是还有很多地方不明白 一并写在注释里了 有大佬能浅显通俗的帮我答疑解惑么。3D美术在TA路上艰难爬行的时候 也会非常感谢您的不吝赐教的 谢谢

序列帧图为网上找来的

效果转成GIF如下

他这个图并不是很严格的切图 所以会有点偏差哈

另一个严格一点的切图

天之痕小雪 也百度来的

效果

shader部分

Shader "TNShaderPractise/ShaderReview_AnimationTexture_035"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
		//行数Row 从上到下数 本示例图中为3行
		_Row("Row",float)=3.0
		//列数Column 从左到右数 本示例图中为5列
		_Column("Column",float) =5.0
		_TimeSpeed ("Speed",float) =1.0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }


        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

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

            sampler2D _MainTex;
            float4 _MainTex_ST;
			float _Row;
			float _Column;
			float _TimeSpeed;
			//例行公事的定点着色器
            v2f vert (a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }


			//计算都放在片元着色器上
            fixed4 frag (v2f i) : SV_Target
            {
				//先对时间取整数 得到整数上的时间 我个人理解为时间一直在流逝乘以速度后得到一个总量  
				//这个总量去除以相应的行和列的等分 会构成一个行列读取循环 不知道理解的对不对 不是很明白
				float Time = floor(_Time.y*_TimeSpeed);

				//时间除以列数 也就是水平方向上平分求得 N列个等分 比如图中是5列 则水平方向上5等分 对其取整 得到 行索引 为5 
				float rowLine = floor(Time/_Column);
				//然后其余数就是 列索引 应该为3   用被除数 - 行索引5*列数为5  就得到列索引3个  （冯乐乐女神书上写的行列应该是颠来倒去的，我个人看着难受按照自己理解掰过来）
				//不过还是没能明白为啥取余就是列索引 求大神浅显明了极其通俗的解我疑惑
				float columnLine = Time-rowLine*_Column;

				//然后先把图中X轴向等分 因为本示例有5列,所以水平轴应该是被5等分 因此除以列数Column 冯女神书上写的除以行数难以理解
				//同理Y轴等分 是竖直方向上的 应该用行数3行 等分成3份 所以除以行数Row
				//然后分别用行列索引除以行列数量得到当前图像所在的XY坐标范围 去做偏移
				//需要注意的是做Y方向上偏移时用减法 因为坐标计算是从下方开始向上递增  而贴图往往是从上到下递增
				half2 uv = float2 (i.uv.x/_Column+columnLine/_Column,i.uv.y/_Row-rowLine/_Row);


				/上面的长式子拆分下就是下面的式子 再单独注释方便理解
				然后先把图中X轴向等分 因为本示例有5列,所以水平轴应该是被5等分 因此除以列数Column 冯女神书上写的除以行数难以理解
				同理Y轴等分 是竖直方向上的 应该用行数3行 等分成3份 所以除以行数Row
				//half2 uv = float2 (i.uv.x/_Column,i.uv.y/_Row);
				然后分别用行列索引除以行列数量得到当前图像所在的XY坐标范围 去做偏移
				//uv.x += columnLine/_Column;
				需要注意的是做Y方向上偏移时用减法 因为坐标计算是从下方开始向上递增  而贴图往往是从上到下递增
				//uv.y -= rowLine/_Row;


				把上面拆分的式子再做个整合 就是冯乐乐女神书里写的那样了 只是我的行和列和她的不同
				但是这么整合写 反而不好理解  我就直接写一行了
				同样的我和她理解的行列正好相反
				//half2 uv = i.uv + float2 (columnLine, rowLine);
				//uv.x /= _Column;
				//uv.y /= _Row ;



                fixed4 col = tex2D(_MainTex, uv);
                return col;
            }
            ENDCG
        }
    }
			FallBack "VertexLit"
}

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

总之就是 计算过程中的很多还是没理解 还望大佬们赐教