【Unity】从零使用ShaderGraph - 制作技能CD

搭建环境：

● 创建一个URP项目或通过UPM安装Universal RP。
● Editor - Project Setting - Graphic - Scriptable Render Pipeline Settings配置。

创建材质：

● 新建一个Shader Graph，选择Unlit Shader。（Unlit就是不受光照影响，减少一些干扰配置项。）

● 找到创建好的ShaderGraph文件，右键创建Material。
● 创建一个Sprite Renderer，把材质先挂上去，方便边做边观察。

---

初步实现：

● 首先空格搜索UV，添加一个UV节点。目的是为了获取UV的坐标值，可以理解为(x，y）坐标，只不过在UV中表示为颜色值（RGBA）。所以 X 为1的时候为红色，Y为1的时候是绿色如图所示：

● 接下来为了得到一个在轴心在中间的图像，需要把原点移动到中间，即（0.5， 0.5），那么可以使用Substract函数来做一个减法。

● 接下来需要通过图像的坐标值，得到一个弧度值，以制作360°的填充。那么就需要用到Arctangent2函数。

● 但是Substract输出的是单个值，需用通过Split函数来把各分量切出来，再连接到Arctrangen2函数。

● 因为Atan2函数的取值范围是（-Π， Π） 也就是（-3.1415926， 3.1415926），那么为了方便我们控制，需要重映射区间到（0，1）。直接使用Remap函数可以实现这一效果。

● 目前我们得到的还是一张包含渐变的图像，那么我们可以通过SmoothStep函数来达到非零即一的效果。
● 首先让Remap后的值减去一个控制变量，把结果值赋给SmoothStep的Edge1，然后Edge2输入0或任意极小值。目的是为了让超过这个值的数都为1。

● 这里的控制变量就是新建一个float值，One Mius也就是做了一个（1-x)的转换方便控制，然后右键转换为Property让其可以在外部被修改。 这样我们修改这个变量值，已经能看到一个大概的效果了！基本已经达到了可以使用的状态。

---

补充完善：

项目中使用，仅仅这样肯定还是不够的，接下来要解决几个问题：
● 黑色区域需要是半透明的。
● 矩形变成圆形。
● 起始点的问题。
● 自动填充。

1. 黑色半透：

● 原理很简单 - 把0重映射到非0的值就行，这里我们重映射为0.2。

2. 矩形变圆形：

● 原理也很简单 - 把黑色部分利用透明裁剪给裁掉。
● 首先ShaderGraph给我们提供了现成的圆形形状：空格 - Ellipse，默认大小0.5，修改为1。
● 然后进行Multiply分量相乘，得到一个圆。
● 最后需要修改以下Shader Type改为Transparent有透明度的，并开启透明度裁剪。

● 这里Alpha Clip给个小于1的数值就行，意味着小于这个值的颜色都会被裁掉，那么黑色就会裁掉，白色会保留下来。

3. 起始点：

● 原理就是修改UV坐标的正负值从而达到修改方向的目的。
● 我们回到UV那个地方，让Y值乘以一个负1，这样就OK了，其他方向也同理调整。

4. 自动填充：

● 原理是使用Time节点来乘以或除以一个控制变量达到自动填充的效果。
● 在原控制变量处做如下修改：

● Divide节点是除法，这样就是5秒填充一周。

总结：

最后可以选一张合适的贴图文件，利用Sample Texture 2D节点进行采样，然后再与上面的效果混合。

最终效果如下：