解读Unity2018中 ShaderGraph 示例： Procedural

相关文章 《 Unity着色器Procedural绘图简介（非Node/代码逻辑） 》

ShaderGraph 使您可以直观地构建着色器。 您可以在图形网络中创建和连接节点，而不是手写代码。

在之前Unity中包含两个比较有名的插件：

1. Shader Forge  ， 在Asset Store中已经搜索不到了， 应该是作者也不打算怎么更新了，  并且已经开源！
   https://github.com/FreyaHolmer/ShaderForge   
       所以网上有人 让这个工具 在2018上工作     https://github.com/jackisgames/Shader-Forge-Unity-2018           真的挺遗憾的，这个工具是第一个出来的，而且只有这个工具生成 顶点片段Shader，  Amplify Shader Editor是生成Unity的 表面着色器，  Shader  Graph 是看不到生成的Shader代码（可以看编译后生成的hlsl, glsl代码）（注2018.2可以了）！！ 所以Unity官方这个工具并不适合学习写Shader代码。
2. Amplify Shader Editor ， 持续更新中， 也支持srp, 2018 等等！  
3. 官方  Shader  Graph  

之前看到过这样的Shader代码 http://setchi.hatenablog.com/entry/2018/01/06/130628  ，

https://github.com/setchi/Unity-ShaderSketches     文档 https://docs.google.com/presentation/d/1NMhx4HWuNZsjNRRlaFOu2ysjo04NgcpFlEhzodE8Rlg/edit#slide=id.g3741eb4de0_0_23   效果 https://setchi.jp/unity/shader-sketches/ 

            对于写Shader不是很熟的我来说，读这些代码是痛苦的，也没时间。  但是Unity官方突出类似的，用节点的方式弄。 可读性就变得容易多了。

官方提供的 节点就几种Procedural ：

shape - Ellipse 椭圆

- Polygon 多边形

- Rectange 矩形

- Rounded Rectangle 圆角矩形

Noise - Gradient Noise

- Simple Noise

- Voronoi

上图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 就是

用到两个节点 “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 !!!

2-1 看他跟 1-4 的区别 是什么？ 区别就是一直改变位置而已。

改变位置 在1-6 中就已经有了 是 Tiling And OffSet ， 只要是 Offset(2) 输入。

运动是 ping pong 形式的， 肯定要使用 Sine 节点， 传入时间 （ 时间 * 常量（可以控制速度）），

改一下， 如果这时候 直接将 Sine结果传到 ， 会看到运动的效果是： 对角线运动， 左下角到 右上角 的反复运动！！