Unity着色器可视化编辑器——Shader Graph

Unity着色器可视化编辑器——Shader Graph

前言

学习一下Unity的Shader可视化编辑工具——Shader  Graph。

 

 

 

 

 

 

---

Shader Graph

出现

在Unity 2018.1版本以后，Unity官方推出了一个可视化的Shader编辑工具——Shader  Graph

Shader Graph可以在一个可视化的面板中完成shader功能的实现，一句代码都不需要写，大大降低了shader的开发难度。

 

建立项目以及安装shader graph

废话不多说，我们先来建立项目，请先确保你的Unity是2018.1+的，我的个人版本是2019.4.10。

创建一个全新的3D项目，然后在Window->Package Manager 中安装Lightweight Render Pipeline和ShaderGraph包。

然后在Asset下创建一个Rendering下的一个Universal  rendering  pipeline下的pipeline  asset文件，创建完成之后，打开project  setting，然后打开Graphics，然后设置成刚才创建的pipeline asset即可。

现在，通过菜单栏 Create > Shader > *** Graph 就可以创建ShaderGraph文件，会在Project创建一个graph文件。

PBR Graph PBR图

Sub Graph 子图，用于创建一些可复用的节点

Unlit Graph 不受光照的图

 

使用PBR Graph示例

下面，我们先来简单学习使用一下PBR  Graph。

通过Create–>Shader–>创建一个PBR  Graph。

我这里起名：1_MyPBRGraph。

双击我们刚才的Graph，然后就打开了我们的Shader  Graph  编辑器。

OK，接下来我们就可以随心所欲的编辑Shader了！

---

Shader 编辑

工具区

最左边为Blackboard属性面板
中间的是MasterNode主模块
右边的是预览视图

关于工作区的更详细的介绍，欢迎大家参考这篇文章

 

基本操作

我们接下来来简单了解一下基本使用。

首先我们需要创建结点，可以在空白区域右击然后Create  Node，或者按空格来快速搜索。

我这里创建一个Blend结点，以及一个Absolute结点。

然后我们就可以对各个结点的输入输出进行连接。

 

属性

下面我们开始学习一些属性。

首先我们先推出官方文档，这可以有效帮助我们学习和理解。

关于属性，可以查看这里。

属性就是定义了一个变量，例如一维向量（Vector1）、二维向量（Vector2）这种的。

 

当我们需要在编辑工具中使用属性的时候，直接将属性拖拽到编辑空间即可。

对于属性的连接，请通过Input系列的结点来连接PBR  Master，更方便的方法就是直接将空间中的结点的out往外拖拽，到某点，松开鼠标即可，会自动创建采样结点。

 

PBR Master

PBR，指的是物理属性的引擎渲染。

对应官方文档——点击这里

Name	Direction	Type	Stage	Binding	Description
Position	Input	Vector 3	Vertex	None	Defines the absolute object space vertex position per vertex.   定义每个顶点的绝对对象空间顶点位置。
Albedo	Input	Vector 3	Fragment	None	Defines material’s albedo value. Expected range 0 – 1.   定义材质的反照率值。预期范围为0-1。
Normal	Input	Vector 3	Fragment	Tangent Space Normal	Defines material’s normal value. Expects normals in tangent space.   定义材质的法线值。期望法线在切线空间中。
Emission   （自发光贴图）	Input	Vector 3	Fragment	None	Defines material’s emission color value. Expects positive values.   定义材质的发射颜色值。期望正值。
Metallic	Input	Vector 1	Fragment	None	Defines material’s metallic value where 0 is non-metallic and 1 is metallic. Only available in Metallic Workflow mode.   定义材质的金属值，其中0表示非金属，1表示金属。仅在金属工作流模式下可用。
Specular	Input	Vector 3	Fragment	None	Defines material’s specular color value. Expected range 0 – 1. Only available in Specular Workflow mode.   定义材质的“镜面反射颜色”值。预期范围为0-1。仅在镜面反射工作流模式下可用。
Smoothness	Input	Vector 1	Fragment	None	Defines material’s smoothness value. Expected range 0 – 1.   定义材质的平滑度值。预期范围为0-1。
Occlusion   （环境闭塞）	Input	Vector 1	Fragment	None	Defines material’s ambient occlusion value. Expected range 0 – 1.   定义材质的环境光遮挡值。预期范围为0-1。
Alpha	Input	Vector 1	Fragment	None	Defines material’s alpha value. Used for transparency and/or alpha clip. Expected range 0 – 1.   定义材质的alpha值。用于透明度和/或alpha片段。预期范围为0-1。
Alpha Clip Threshold	Input	Vector 1	Fragment	None	Fragments with an alpha below this value will be discarded. Requires a node connection. Expected range 0 – 1.   alpha低于此值的碎片将被丢弃。需要节点连接。预期范围为0-1。

 

 

---

案例

官方案例

我们可以通过github来下载shader  graph的官方示例。

下载后打开项目，我们可以看到很多官方提供的材质，这里就不一一列举了。

外发光效果

我们先来一个非常简单的外发光效果的Shader。

这个非常简单，跟着连接即可，最后将shader对应的材质附着给物体，然后就可以看到真切的效果了！

• Fresnel Effect Node：菲涅耳效应是一个表面上不同反射率的效果，取决于观察角度，当你接近掠射角时，反射更多的光。菲涅耳效果节点通过计算曲面法线和视图方向之间的角度来近似于此。这个角度越大，返回值就越大。这种效果通常用于实现边缘照明，在许多艺术风格中很常见。

我们还可以做成一个带方向的菲涅尔光效果：

• Dot Product Node：返回两个输入向量A和B的点积或标量积。点积是一个值，等于两个向量的大小相乘，再乘以它们之间夹角的余弦。对于规范化输入向量，如果它们指向完全相同的方向，则点积节点返回1；如果它们指向完全相反的方向，则返回1；如果向量垂直，则返回0。
• Normal Vector：提供对网格顶点或片段的法向量的访问。输出值的坐标空间可以用空间下拉参数选择。

 

模型裁切

我们先来简单实现模型的裁切：

• Position Node：提供对网格顶点或片段位置的访问，具体取决于节点所属图形部分的有效着色器阶段。使用“空间”下拉参数选择输出值的坐标空间。
• Split Node：将输入矢量拆分为四个矢量1输出R、G、B和A。这些输出矢量由输入In的各个通道定义，分别为红色、绿色、蓝色和alpha。如果维数中的输入向量小于4（向量4），则输入中不存在的输出值将为0。
• Step Node：对于每个组件，如果input In的值大于或等于input Edge的值，则返回1，否则返回0。

下面，我们在裁剪的基础上添加裁剪边缘光
首先利用Smoothstep做出一个边缘渐变

• One Minus Node：返回输入从1减去的结果。

 

模型溶解

溶解这个效果非常酷，实现起来其实非常的简单！

高级一点可以加入光效。

卡通阴影

水纹

积雪效果

 

不锈钢效果

UV抖动

这个必须的有Texture才有效果。

 

闪电

全息效果

---

高级效果

透明传送门

首先修改配置允许渲染

然后写Shader

然后我们创建一个圆柱体，调整缩放成一个扁饼。

然后用刚才的ShaderGraph创建一个材质，注意调整材质的Render Queue为Transparent透明！！！

然后在场景中就可以看到效果了！

弯曲世界

这里的弯曲只是一种视觉效果，不影响碰撞盒子等物理物体。

黑洞

 

 

---

商业转载 请联系作者获得授权，非商业转载 请标明出处，谢谢