[Unity2018.2]ShaderGraph更新详解

在2018.1中,Shader Graph作为Unity的新功能,以预览版的形式呈现。通过ShaderGraph可以直观地构建着色器。可以在图形界面中创建和连接节点,而不需要编写代码。图中的每个节点都可以对更改即时反馈,大大降低了编写着色器的门槛。

Unity2018.2也对ShaderGraph(3.0.0)进行了很多优化和改进,包括:

高清渲染管道(HDRP)支持

Shader Graph现在支持PBR和Unlit主节点的HDRP。使用ShaderGraph构建的着色器可与LWRP和HDRP一起使用。

78733-67e49237a3b7ab47

顶点位置

现在可以通过PBR和Unlit主节点上的Position栏位修改顶点位置。默认情况下,此节点的输入是对象空间位置。此栏位应该输入给定顶点的绝对本地位置。某些节点(例如程序形状Procedural Shapes)在顶点着色器中不可行。此类节点与此栏位不兼容。

78733-ec325bc6a339f7fc

主节点设置

主节点的设置现在可在一个小窗口中使用,可以打开和关闭该窗口来更改着色器的各种渲染设置。

78733-8d4987e9c130319b

属性引用名称和公开状态

现在可以编辑属性的引用名称,从而更容易从脚本引用着色器属性。选择属性并在Reference旁边设置新名称。如果要重置为默认名称,请右键单击Reference,然后选择 Reset Reference。

在属性窗口中,现在还可以切换Exposed复选框,来设置属性是否公开。

78733-60ab6c0df0cb46ef

可编辑路径

现在可以更改着色器图和子图的路径。更改着色器图形的路径时,将修改其在着色器选择列表中的位置。更改子图的路径时,它将在节点创建菜单中具有不同的位置。

78733-0d34c561102cc8a8

78733-6f7d4592ce0f2d9f

Is FrontFace节点

78733-e138173e6940349e

使用此节点,你可以根据给定片段的朝向标识更改图形输出。如果当前片段是正面的一部分,则节点返回True。对于背面,节点返回False。注意:此功能需要在主节点上启用双面。

渐变节点

78733-35ef423a3d9927e2

通过两个新节点添加了渐变功能。Sample Gradient节点使用给定的Time参数对渐变进行采样。您可以在渐变栏位控件视图上定义此渐变。Gradient Asset节点定义了一个渐变,可以使用不同的时间参数对多个Sample Gradient节点进行采样。

Texture3D和Texture2D数组

78733-aa69f3dabdff605b

通过两个新属性类型和四个新节点扩展了Unity对Texture类型的支持。可以在着色器图中定义和采样Texture 3D和Texture 2D Array类型资源。

Texture2D LOD节点

这个新节点为Texture 2D Sample添加了LOD功能。Sample Texture 2D LOD使用与Sample Texture 2D相同的输入和输出栏,但包括通过Vector1输入参数调整细节级别的输入。

显示生成的代码

78733-641f0ee1839d4155

现在可以看到任何特定节点的生成代码。右键单击该节点,然后选择Show Generated Code。代码段将在Unity的代码编辑器中打开。

解读Unity2018中 ShaderGraph 示例: Procedural

ShaderGraph 使您可以直观地构建着色器。 您可以在图形网络中创建和连接节点,而不是手写代码。 在之前Unity中包含两个比较有名的插件:
1 Shader Forge  , 在Asset Store中已经搜索不到了, 应该是作者也不打算怎么更新了,  并且已经开源!https://github.com/FreyaHolmer/ShaderForge
所以网上有人 让这个工具 在2018上工作https://github.com/jackisgames/Shader-Forge-Unity-2018    真的挺遗憾的,这个工具是第一个出来的,而且只有这个工具生成 顶点片段Shader,

 2 Amplify Shader Editor是生成Unity的 表面着色器,  Shader  Graph 是看不到生成的Shader代码(可以看编译后生成的hlsl, glsl代码)(注2018.2可以了)!! 所以Unity官方这个工具并不适合学习写Shader代码。
Amplify Shader Editor , 持续更新中, 也支持srp, 2018 等等!

3 官方  Shader  Graph

官方提供的 节点就几种Procedural :
shape – Ellipse 椭圆
– Polygon 多边形
– Rectange 矩形
– Rounded Rectangle 圆角矩形
Noise – Gradient Noise
– Simple Noise
– Voronoi

20180708215332929

上图1 ~ 4 简单就是直接使用系统的 节点。 但是有一个可以 总结出来: Mutiply 乘法节点 , 任何颜色 * 白色 = 任何颜色!!! 还有另外一个没有用到 白色(1,1,1,1)加上 任何颜色 = 这个颜色偏向白色
总结:
相加 得到的颜色 偏向 RGB值 比较大的颜色
相乘 得到两种颜色的混合

1-5 游泳圈 怎么得到的?
Subtract 减法节点了, 大圆 – 小圆 = 游泳圈 !!

1-6 同时显示两个图形, 是两个图形的 Add , 没错, 就是Add 节点。
如果位置重叠, 重叠区域就是两者的add

1-7 跟 1-6的区别 是 每个图形有自己的颜色, 就是每个图形在 Add 之前 会自己乘上 Color!!

1-8 这个是对 1-4 图形 做了 Invert Colors 节点, 颜色取反。 取反 之后在乘以 Color !!

1-9 怎么做到的? 最后传给一个 Ellipse 椭圆节点 生成的!!! 关键的步骤不是在最后, 如果最后传给 Rectangle 就是

20180708215407196

用到两个节点 “Modulo 模数”, “Reciprocal 倒数”
一个大图 0~1 的范围!
想把它 分成5个小图, 5的倒数是 0.2
想象一下 0~1 区间对 0.2 求模, 得到的很多都是 0~0.2 区间的大小。但是是5个 0~0.2 . omg!!!
然后将这个5个 0~0.2 都* 5, 就得到了 5个 0~1 区间的!!! omg !!!
20180708215416501

2-1 看他跟 1-4 的区别 是什么? 区别就是一直改变位置而已。
改变位置 在1-6 中就已经有了 是 Tiling And OffSet , 只要是 Offset(2) 输入。
运动是 ping pong 形式的, 肯定要使用 Sine 节点, 传入时间 (时间 * 常量(可以控制速度)),
改一下, 如果这时候 直接将 Sine结果传到 , 会看到运动的效果是: 对角线运动, 左下角到 右上角 的反复运动!!!
20180708215425157突然感觉好有意思啊~
效果是 x 动, y不动, 那就让x 和 0 通过Combine 节点 组合一下, 然后把 结果给 Tiling And OffSet 的 Offset(2) 输入。
把Sine 结果 直接给 Combine的 x, OK, 效果达到了!!!!, 让y动画话, 就让r = 0, g = sine结果。 都动就都是 sine 结果 自己实验!
20180708215432867

但是还不行, 没办法控制振幅啊!
这种ping-pong 是什么? -1 ~ 1 的变化!, x~y 的变化和 Lerp节点 是不是很像? 那就是使用Lerp 的 x, y 代表振幅(两个值要是相反数才行, 就是Negate 节点的作用)
Lerp 节点还需要特别重要的 时间: 0~1 一直反复变化, x~y~x~y~x …. 值就这样ping-pong 的了。 时间0~1 可以通过Sine 的结果 -1~1 通过 Remap节点 来重映射到 0~1 . OK 了!!!

不对啊? 如果是为了调整振幅,为什么不直接对 Sine的 结果 乘以 一个 Vector1 的常量作为缩放呢????

2-2 跟 1-2 的区别 就是有了 旋转。
直接使用 Rotate 节点 的结果作为 UV。
Rotate 节点需要时间驱动。 传入时间 (时间 * 常量(可以控制速度))

2-3 跟 1-9 的区别, 就是 把 之前的 UV 节点 换成 可以改变位置的 动画。 就是 Offset(2)20180708215443381

2-4 他用了圆 实际上是有误导的 啊, 因为圆的自传 看不到了。 换成 Rectangle 实际上是有自传的!!!
明白了, 自传是整个图片做了旋转, 旋转完之后 在当前 x 周方向上做偏移 ( Tiling And OffSet 的 Offset(2) )(自身的x, 不是一直横着的)。
Tiling And OffSet 的 Offset(2) 是 Vector2, 前面介绍过了, 使用 Combine 节点进行组合 就OK 了 !!!

2-5 Twirl (捻, 拧 ) 节点 处理一下UV 就是这个效果了 !!!
2-6 这个是对 2-5 的改进。 Twirl (捻, 拧 ) 节点 , 有一个重要的输入 “Strength” 。 实际上让这个值 在0 ~10 之间做 ping-pong动画~~~~
这个ping-pong 不要想复杂了, 不用Lerp, 就是对 Sine 节点 结果 做 Remap 节点 重映射 !!! 然后赋值给 “Strength”

2-7 首先是个圆 的运动。
跟 2-1 类似, Sine, Remap, Lerp, Combine 。
区别就是 在 Combine 和 Ellipse 节点节点之间 多了一步处理 。Spherize (球面化) 节点
Combine 的 结果控制 Spherize 的 offset 输入。(这样就一直 Ping-Pong 位置迁移)。
Spherize 的结果作为 Ellipse 的UV 输入!!!

2-8 重点在于实现缩放
Polygon 节点 的输入 Width, Height 两个值!
剩下就是之前的 Ping-Pong 逻辑
不用Lerp, 就是对 Sine 节点 结果 做 Remap 节点 重映射 !!! 然后赋值给 Width, Height
Scale 范围是 两个 属性, 通过 Combine 节点 组合
2-9 这完全是一个组合
Scale 变化 是 2-8 实现的, 左右 ping-pong 移动是 2-1, 自传是 2-2 .
3-1 Color Ping Pong , 就是两个颜色 做 Ping-Pong动画呗!!!
Ping-Pong 的套路就是 1) 时间 (时间 * 常量(可以控制速度) 传给Sine, Sine结果 重映射到 0~1 , 得到了时间的Ping-Pong 动画。
时间动画结果 作为 Lerp 的参数。 Lerp的 x, y 就是两个要ping-pong 的颜色值了!!!!

3-2 Color Random Flicker 颜色随机闪烁
只要是动画, 必须有时间驱动, 但是时间的变化是连续的。 不是随机跳跃的!!!
那就让 时间作为随机种子Seed ,传入 Random Range 节点 中!!!
但是这个随机的结果不是颜色, 那就使用Lerp 节点, 在两个颜色之间 取一个数值!!!
所以 Random Range 的结果要在0~1 之间才行!!!
3-3 Color Linear Gradient 颜色线性渐变

UV 节点是什么???
U 相当于国际坐标轴的X轴,V 就是Y 轴,还有一个W轴
大多数材质贴图都是为 3D 曲面指定的 2D 平面。因此,说明贴图位置和变形时所用的坐标系与 3D 空间中使用的 X、Y 和 Z 轴坐标不同。特别是,贴图坐标使用的是字母 U、V 和 W;在字母表中,这三个字母位于 X、Y 和 Z 之前。
U、V 和 W 坐标分别与 X、Y 和 Z 坐标的相关方向平行。如果查看 2D 贴图图像,U 相当于 X,代表着该贴图的水平方向。V 相当于 Y,代表着该贴图的竖直方向。W 相当于 Z,代表着与该贴图的 UV 平面垂直的方向。
您可能会问,为什么 2D 平面需要象 W 这样的深度坐标。一个原因是,相对于贴图的几何体对该贴图的方向进行翻转时,这个坐标是很有用的。为了实现该操作,还需要第三个坐标。另外,W 坐标对三维程序材质的作用非同小可。20180708215458105

上图是UV 节点, 对 Out 输出 使用 Split 节点进行分离, 看看每个通道是什么样的? UV的圆点是 左下角!
R 其实是 U 通道 , 就是水平方向从 0~120180708215505304

G 其实是 V 通道,就是垂直方向上 从0~1

20180708215513286

这个B 不知道, 总之是黑色!

20180708215525725

Alpha 为纯白色 一点不意外 !!!

20180708215535438

那么一开始的 UV 彩图 就得出结论了,就是他们的RGBA的融合啊 !!!!
回到这个3-3 要实现的效果上。 线性渐变。 可以使用 UV 的前两个通道中的一个啊~~~~~
使用选择 的这个通道, 作为 Lerp的时间 T 输入。 就可以对两个颜色常量 A, B 进行线性插值了~~~~

20180708215546355

还差的一点 是 不能旋转方向。 所以 就有了项目中的 添加了 Rotate 节点
Rotate 节点的位置可以 现对 总UV 进行旋转, 也可以对Split 的 分量进行旋转, 效果一样
3-4 Color Radial Gradient 颜色的 径向渐变
这个依然是对UV 的运用啊~~~
主要是得到 镜像UV 图

20180708215555206

让它作为 Lerp 节点的 T 参数 , 让两个常量颜色 渐变就是了 !!
UV 的 两个通道 U和 V 进行混合 就是Combine 节点 返回 的 RB 是这样的

20180708215602778

同过这黑点从左下角 移到中间就是想要的了~~~~

你可以实验两个取反, 对 Distance的结果取反 Invert Colors, 对 Mutiply 的结果 Invert Colors
3-5 Color Split 颜色分裂
对UV 的一个分量(黑白渐变图), 经过 Step 节点处理。 然后传给 Lerp节点。
Step 节点
如果输入In大于等于输入Edge,返回1(白色),否则返回0(黑色)

3-6 Color Split Ping Pong
这个动画简单了, 实际上是让 Step的 Edge(1) 在 0~1 之间做 Ping-Pong
老套路 : 时间 (时间 * 常量(可以控制速度) 传给Sine, Sine结果 重映射到 0~1
3-7 Color Soft Split
用到新节点 SmoothStep : 如果输入In在Edge1和Edge2之间,则返回Hermite插值(https://baike.baidu.com/item/%E5%9F%83%E5%B0%94%E7%B1%B3%E7%89%B9%E6%8F%92%E5%80%BC/8113661)。如果In小于Edge1,则返回0,如果In大于Edge2,则返回1。
这个节点类似于Lerp节点,但有两个显着差异。第一,此节点返回值介于0和1之间,而Lerp返回值介于输入的A和B之间。第二,该节点使用平滑的Hermite插值而不是线性插值。Hermite插值在开始加速并在最后减速。这对创建自然的动画,淡入淡出和其他转换非常有用。
可以先弄一个简单的

20180708215611544

这时候可以改变 Edge1, Edge2 两个值。

示例 中只是 增加了 Tiling And offset , 可以改变偏移位置而已。

这里面有一个需要注意 的是: 就是Split 的输出, 是使用 R, 还是 G, 两个要使用相同的值, 常量控制才有作用

20180708215619578

3-8 这个 Color Soft Split Ping Pong
这个通过改变位置弄的动画
Ping-Pong 动画控制的 是 Combine 节点的 R 输入!!!
3-9 Color Shape Split
这个有点意思~

2018070821562884

Polygon的结果是 黑白图片, 非零既一。 现在需求,如果让白色变成一种其它颜色, 黑色变成一种其它颜色。
做法就是 让 Polygon的结果 解释 Lerp的 输入 T, Lerp 的 两个输入 A, B 就是两种颜色!!!!

4-1 Pattern Stripes 图案条纹
使用到节点 Checkerboard (棋盘) 属于 Procedural 分类下!!!
让条纹 调整方向, 通过 Rotate 节点 控制 UV 输入参数。
斑马线的颜色 是 Color A, Color B。
Frequency 可以控制两个轴向的 坐标比例, 控制 条的宽度 或者密度 !
4-2 跟 4-1 的区别就是把 Frequency 参数作为属性公开。
Checkerboard (棋盘) 节点 应该是 跳棋的棋盘! https://github.com/Unity-Technologies/ShaderGraph/wiki/Checkerboard-Node
4-3 跟 4-2 相比 是,传入的 UV 变了!
在 UV 分类下, 有个 Polar Coordinates 节点!
官网文档描述 描述 https://github.com/Unity-Technologies/ShaderGraph/wiki/Polar-Coordinates-Node
将输入UV的值转换为极坐标。 在数学中,极坐标系是二维坐标系,其中平面上的每个点由距参考点的距离和距参考方向的角度确定。
产生的效果是输入到UV的x通道被转换为距输入中心值指定的点的距离值,并且相同输入的y通道被转换为该点周围的旋转角度值。
这些值可以分别通过输入径向比例和长度比例的值进行缩放。
4-4 Pattern Shatter 旋转, 直接控制 Rotate的 Rotation 参数就可以了 !!!
时间 (时间 * 常量(可以控制速度) 传给 Rotation 参数。 时间本身就是一个 一直累加的数值, 无穷无尽。
4-5 Pattern Rings 图案戒指
跟 4-3 相比 最主要的改变就是 将下面两个值 进行对调了 !
还是棋盘的 Frequency 参数 !!!
这个图形 不需要Rotate 旋转 !20180708215638331

4-6 Pattern Rings Auto Scroll 通过改变UV 坐标移动 。 还是 Tiling And Offset 节点处理的!
注意 , 还是 Time 驱动 的是 R, 还是 G 的问题 。 因为 Frequency 参数 非0 的是 R, 所以要驱动 R !!!
4-7 Pattern Spiral 图案螺旋
之前使用过一个节点 Twirl (扭,拧) 。
没明白 这两个数值怎么得出来的???

20180708215647643

那两个值 可以调整, 总之 让图案 变成 绿色和 黑色两种!!!
但是这时候得到的 绿色和黑色 并不纯。 因为有细微渐变!
那就经过 Step处理, 绿色 和 黑色变成 纯色!
但是绿色 不好改变颜色。 需要变成 3-5 的 黑白图。 那就将纯颜色的绿, 使用 Replace Color 节点处理, 然后在传给 Lerp
4-8 是 4-7 的动画版本
对 Twirl 节点的 UV 做 Rotate 旋转 动画。
记得使用时间驱动~~~~
4-9 Pattern Fish Eye 图案鱼眼
在 2- 7 中使用过 Spherize (球面化) 节点 。 使用时间 直接驱动 它的 Offset, 就实现了 滚动动画。
在把 结果 传入 Checkerboard 的UV 输入节点 !!!
5-1 Noise Color Blend
确实是两个颜色混合的一种方式。
噪声的结果 作为 Lerp的 T 传入。 结果就是 颜色 A, 颜色 B 的 插值。
5-2 Noise Color Blend Auto Scroll
噪声的 UV 滚动动画。
时间驱动 Tiling And Offset 的 Offset , 结果作为 噪声的 UV 输入 !!!
5-3 Noise Color Split
说 颜色分离也对, 结果纯非黑即白!
就是对噪声 通过 Step 节点处理一下 !
5-4 ping-pong 动画
这个简单, 主要就是让 Step 的 Edge 输入参数 在 0~1 之间 做 Ping-Pong 动画!
老套路 :对 Sine 结果 做重映射到 0~1

5-5 Noise Color Split Waves 噪音颜色分裂波
关键点 是如何总噪声 到 波纹。 动画就是 时间驱动 Tiling And Offset 的 Offset , 结果作为 噪声的 UV 输入 !!!

先把 Noise Amount 的数值 设置为 100, 看效果。

20180708215657506

这肯定就不是博文了, Noise Amount 值很小 到1的时候 才好 !!!!

Step 节点
如果输入In大于等于输入Edge,返回1(白色),否则返回0(黑色)

5-6 Noise Circle 噪声圈
噪声 * UV在中心点的Distance
将 结果 通过 Step 处理一下(这个是最终的 黑白外观)
Step结果 传入 Lerp 的参数T , 进行着色 !!!
思考一下 UV, 和 Distance 之间的处理?

2018070821570613
5-7 Quad – Noise Circle Auto Scroll
是 5-6 的动画版本, 动画就是 时间驱动 Tiling And Offset 的 Offset , 结果作为 噪声的 UV 输入 !!!

5-8 Noise Voronoi 泰森多边形法
有一个专门的 节点 Voronoi 泰森多边形。 代替 5-1中的 噪声节点
5-9 Noise Voronoi Shuffle 噪音泰森多边形法洗牌
就是时间驱动 Voronoi 节点的 Angle Offset 节点 !!!