庄懂的技术美术入门课系列—

关AO的知识之前涉及到就# 庄懂的技术美术入门课系列——学习笔记
本系列旨记录看视频学习时的一些看个人的理解和思考

1.三色混合的环境光

基本思路：
物体的环境光可以想象成是在物体四周全方位向物体射出的光，只有纯色的环境光会显得太过单一而不够真实，所以我们采用三色混合来实现复杂的环境光效果，基于物体的顶底关系，我们将光分成从顶部，侧部和底部三部分，分别采用不同的颜色，例如一个模型在天地之间，那么顶部就可以是类似天空的天蓝色，而底部则可以是土地的土黄色，从而达到一种较为真实的环境光反射效果。

顶部光：从物体上方照射下来的光
侧边光：从物体四周照射来的光
底部光：从物体下发照射上来的光
实现：
要获取三种方向的光，可以通过将模型的法线从模型空间变换到世界空间后计算出来，我们知道，法线向量是一个单位向量，将法线拆分到xyz三个分量，那么三个分量的范围就都是[-1,1]，而且在unity的世界空间坐标系中y轴始终在竖直方向上

所以我们可以通过法线的y分量来表示三种方向的光：对于顶部光，就是y分量为正值的部分；对于底部光，就是y分量为负值的部分（这部分需要乘上-1后变成正值来计算）；对于侧边光，就是1-（顶部光+底部光）的部分，那么为什么侧边光是1-（顶部光+底部光）的部分呢？
我们知道，模型上点的法线方向就代表这这个点的朝向，当一个点的法线是完全竖直朝上的时候（0，1，0），也就说明这个点只能受到顶部方向的光的照射，而当一个点并非完全朝上时，那么这个点就能受到侧边光和顶部光两种光的照射，这时我们就用法线的y分量的大小来表示受顶部光照射的强度，而由于y分量正方向范围是[0,1]，所以我们用1-受顶部光照射的强度来表示受到侧边光照射的强度（例如一个法线完全朝上的点，它的法线的y分量就是1，此时受到侧边光照射的强度就是1-1=0，也就是完全没有侧边光照）。由于顶部光和底部光是互斥的，而我们是逐像素点进行的计算，所以我们可以用1-（顶部光+底部光）任意点收到的侧边光的光照，其实本质就是1-顶部光或者1-底部光。
成品图：

2.投影

光照可以分为两部分：光源+环境
环境光的遮挡就是AO(环境光遮罩)
光源的遮挡就是阴影

3.MatCup

将法线坐标转换到视角空间后利用该空间下法线坐标的xy分量充当uv坐标对MatCup纹理进行进行采样从而模拟pbr渲染，由于法线进行过归一化，所以xy坐标始终落在一个直径为1的圆内，所以通常MatCup纹理也是一个圆
ps:在将世界空间中的法线转换到视角空间时切记不要用UnityWorldToViewPos（），这个函数算的是点的转换。

4.面板参数声明

参数属性	用途
[HideInInspector]	在面板上隐藏该属性，可用于任何参数
[Normal]	标示该纹理为法线纹理，以激活相关自检功能
[NoScaleOffset]	禁用面板控制纹理缩放和偏移
[HDR]	开启高动态范围颜色
[HeaderLabel]	标签，用于排版，单独使用
[Space(value)]	空行，用于排版，例如：Space(20)括号内是空行高度

5.混合模式

可以理解成是把Src（Source）乘上SrcFactor的绘制结果通过BlendOp运算混和到Dst（Destination）乘上DstFactor的结果上

6.屏幕纹理

分析：

o.screenUV = posVS.xy/posVS.z

由于3D空间下模型上不同点是有深度关系的，有的点距离屏幕近有的点距离屏幕远，这样就会导致uv在采样的时候会在模型的边缘产生畸变，采出来的图案是扭曲的，这时我们除以一个z分量（也就是深度分量），让采样坐标都转到同一个平面下，就可以消除这种畸变，让采样的图案不会被点的深度影响。

o.screenUV *= originDist

按理来说屏幕纹理是通过屏幕坐标采样的，把纹理贴到模型上，纹理的大小是不会根据模型距离摄像机的远近来缩放的，但是通过让采样的uv坐标乘上一个模型在观察空间下的原点的坐标的深度（就是z分量）话，采样时用到的uv就会因为模型在观察空间下深度的不同而有所改变，如果模型距离摄像机近，z分量就更小，采样时的uv的坐标范围也就被缩小，从而得到更大的纹理图案，也就符合我们视觉上的近大远小了。

7.屏幕扰动

核心代码：

//获取屏幕纹理
GrabPass{"_BGTex"}
Pass{...//声明屏幕纹理sampler2D _BGTex;...struct VertexOutput{...//声明屏幕纹理采样uvfloat4 grabPos : TEXCOORD2;}VertexOutput vert(VertexInput v){VertexOutput o;...//赋值屏幕纹理采样uvo.grabPos = ComputeGrabScreenPos(o.position);return o;}half4 frag(VertexOutput i):COLOR{...   //计算uv扰动i.grabPos.xy += _WarpInt * (var_MainTexRGB.r - _WarpMid);//用扰动后的uv采样屏幕纹理half3 bgTexColor = tex2Dproj(_BGTex,i.grabPos).rgb;...}}

原理就是把屏幕内容作为一张纹理存起来，再用扰动后的屏幕坐标来采样纹理，最后把采样后的纹理贴到模型上，在视觉上就像是模型是透明的一样，能够看到模型后面的内容。
在计算uv扰动时，还可以使用法线的xy分量来扰动，个人感觉效果会更好一点

8.序列帧动画

本质上就是纹理随时间等距的偏移。将序列帧纹理分成n个全等矩形，每个矩形里面就是一帧的图案，用这个矩形的长作为u方向的步长StepU，宽作为V方向的步长StepV。每一次都随时间从一个矩形偏移到下一个矩形。
1.首先把序列帧纹理里分割出的矩形标好序号：

这里是8x8总共64帧，那么就是从左到右从上到下依次标号，从0开始，左上角是0，右下角是63。
2.标好序号之后，先来实现根据给定的序号，让纹理偏移到指定位置进行采样：
先求出步长：

float stepV = 1.0/_SeqRow;
float stepU = 1.0/_Seqcolumn;

然后计算偏移：
对于每一行来说，偏移是：_ID % _Seqcolumn * stepU，_ID就是我们给定的序号，_Seqcolumn 是总共的列数，在这里是8。_ID % _Seqcolumn就代表序号除以列数然后取余数，这样我们通过增加序号，就可以得到0-7的一个循环。0代表每一行最左边的帧，7代表每一行最右边的帧，至此我们就知道了所给的序号对应的帧是一行中的第几个了，换句话说就是知道它在第几列了，最后_ID % _Seqcolumn * stepU，就得到了偏移后的u轴坐标。
对于每一列来说，偏移是： (_SeqRow-1) * stepV - _ID/_SeqRow * stepV)，由于uv是从下到上，从左到右为正方向，而序列帧纹理通常是从上到下，从左到右为正方向，这样就导致uv的原点在左下角，而序列帧纹理的原点在左上角，为了使两个原点能够对齐，我们就需要在计算偏移之前，先把uv的原点偏移到左上角去，也就是将最初的原点0改成(_SeqRow-1) * stepV ，把原点向上挪_SeqRow-1个V方向的步长stepV。这样在我们最开始采样时，原点就不是（0，0）而是（0，(_SeqRow-1) * stepV）。处理完原点后就可以开始计算偏移了，由于序列帧是由上到下的，所以在偏移时就需要用减法，然后用_ID/_SeqRow来计算出列循环，这样我们就得到了0-7的一个列循环，0代表最上面的一列，7代表最下面的一列，这样就能知道我们所给的序号所对应的帧在每一列的第几个了，换句话说就是知道它在第几行了。最后我们在用_ID/_SeqRow来乘上stepV，就得到了它在v轴上的偏移量，最后 (_SeqRow-1) * stepV - _ID/_SeqRow * stepV)，就得到了偏移后的v轴坐标。
我们设偏移后的uv坐标是seqUv，综合起来就得到了：

o.seqUv = v.uv * float2(stepU,stepV) + float2(_ID % _Seqcolumn * stepU,(_SeqRow-1) * stepV - _ID/_SeqRow * stepV);

化简一下（少做一次乘法）：

o.seqUv = v.uv * float2(stepU,stepV) + float2(_ID % _Seqcolumn * stepU,(_SeqRow - 1 - _ID/_SeqRow) * stepV);

3.将给定的序号值改成会随时间变化的序号值：

int timeId = floor(_Time.y * _Speed) % (_SeqRow*_Seqcolumn);

这一步很简单，floor(_Time.y * _Speed)就代表我们给的序号，只不过是自动随时间增加，% (_SeqRow*_Seqcolumn)就是做了个模运算，让序号能够在0-63之间循环
4.将给定序号替换成随时间变化的序号：

o.seqUv = v.uv * float2(stepU,stepV) + float2(timeId % _Seqcolumn * stepU,(_SeqRow - 1 - timeId/_SeqRow) * stepV);

5.采样

half4 var_SequnenceTex = tex2D(_SequnenceTex,i.seqUv);