08.Unity ShaderGraph实例（使用PBR渲染精灵动画）

相关资源下载
创建精灵Sheet
制作精灵动画
ShaderGraph：怎么定义精灵贴图
ShaderGraph：怎么剔除Alpha
Node：Sample Texture 2D
Node：Replace Color
Node：Invert Color

---

相关资源下载

---

创建精灵Sheet

• 下载上面的资源以后导入到Unity，按照划线提示操作
  
• 选择Sprite Editor，按照操作步骤裁剪精灵图片
  
• 好了之后应该是这样
  

---

制作精灵动画

• 选择前4张图片，往Hierarchy视图或者场景里面拖
  
• Unity自动认为你在制作精灵动画，给当前的动画取个名字
• Unity会自动生成了一个Animator和Animation片段
  
• 精灵会自动加载到Scene里面，调整播放速度0.2左右，点击Play预览，速度在Animator里面选择对应的片段来调整

---

ShaderGraph：怎么定义精灵贴图

• 按照提示步骤添加Texture2d属性并且使用Texture2d属性，赋值默认贴图，总3步
  
• 创建一个Simple Texture 2D来对刚才的纹理进行采样，采样的预览会有变化，我们在Unity对其有操作，
  图片的内容发生了变化，具体引起原因未知，反正我们一般也不会用原始图
  
• 将采样的结果输出到Master节点的颜色和自发光端口，颜色是基础数据，自发光是因为精灵是常显，类似于UI
  
• 总得下来，使用PBR主模块制作一个显示精灵\UI\特效的贴图步骤Texture2D>采样>Albedo>Emission

---

ShaderGraph：怎么剔除Alpha

将纹理的Alpha通道输出到Replace Color，因为Alpha不是RGB颜色，但Replace Color只把原始的RGB颜色替换，所以跟From字段没有任 何关系，To字段改变输出颜色；Range是颜色搜索范围，Fuzziness光滑过渡值，默认情况下，这一步执行完就把Alpha通道的值全部变成> 了黑色，那么非Alpha通道的颜色成为白色，把黑色部分替换到黑色；当前你选择其他颜色也可以，只是没有黑白处理之后的效果好；
在Alpha通道中，有颜色的部分默认变成白色，透明部分默认为黑色，这是着色原理，真理
再通过反转红绿蓝颜色，个人理解RGB，黑色RGB(0,0,0)，反转之后黑色(255,255,255),白色(0,0,0)
Alpha设置主模块的透明度，如果主模块不透明，则AlphaClipThreshold无效，主模块拥有透明值之后，AlphaClipThreshold才有效
经过最后的处理，Alpha通道变成黑色部分，非Alpha部分变成白色，AlphaClipThreshold开始拾取Alpha通道
经过最终的筛选，提取出了人物部分，Alpha1不透明，0全透明

---

Node：Sample Texture 2D

对Texture2D进行采样，返回在shader中使用的4维颜色值；你可以使用UV输入重写UV坐标，使用Sampler输入自定义的采样状态；
如果是使用Sample Textrue 2D Node来采样一个法线，设置下拉选项为Normal；
注意：这个节点只能使用在片段着色器阶段；如果需要对Texture2D在顶点着色器使用Sample Texture 2D LOD Node来替代

端口信息

名称	IO方向	类型	绑定	说明
Texture	input	Textrue 2D	None	用来采用的Texture2D
UV	input	Vector2	UV	网格的法线向量
Sampler	input	Sampler State	Default Sampler state	纹理的采样者
RGBA	output	Vector4	None	作为RGBA输出的值
R	output	Vector1	None	红色（x）RGBA输出组件
G	output	Vector1	None	绿色（y）RGBA输出组件
B	output	Vector1	None	蓝色（z）RGBA输出组件
A	output	Vector1	None	Alpha（w）RGBA输出组件

相关设置

• Type 设置贴图的类型，Default普通贴图或Normal法线贴图
• Space 设置展示的空间，Tangent切线空间或者Object物体空间

---

Node：Replace Color

替换input里面的from对应的数据到to；Range可以定义更为广泛颜色相似值，作用到From字段端口上；
Fuzziness可以用于更加平滑的边缘过渡，有点和抗锯齿功能差不多；

端口信息

名称	IO方向	类型	绑定	说明
In	input	Vector3	None	输入的值
From	input	Vector3	Color	需要替换的颜色
To	input	Vector3	Color	替换到的目标颜色
Range	input	Vector1	None	在一定的范围内替换目标颜色
Fuzziness	input	Vector1	None	选取的颜色边缘柔化
Out	output	Vector3	None	输出

---

Node：Invert Color

反转输入的颜色，基于每个通道来处理；这个节点需要输入的数据范围在[0,1]；

端口信息

名称	IO方向	类型	绑定	说明
In	input	Dynamic Vector	None	输入的值
Out	output	Dynamic Vector	None	输出的值

相关设置

名称	类型	选项	说明
Red	Toggle	True/False	如果真红色通道反转
Green	Toggle	True/False	如果真绿色通道反转，维度小于2不可用
Blue	Toggle	True/False	如果真蓝色通道反转，维度小于3不可用
Alpha	Toggle	True/False	如果真透明通道反转，维度小于4不可用

---

总结经验

一般来说SG使用在字段旁边的标注数字是表示这个字段使用的多少维度，如果是数字端口，几乎是全通；如果不知道一个字段该连接哪一个模块，可以直接在端口上拖着放开，程序会自动索引这个字段可以用哪些相关字段。

---