【Unity】从零使用ShaderGraph - 花草简单摇曳效果

搭建环境：

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

创建材质：

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

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

初步实现：

今天我们来尝试制作一个2D游戏中，花草树木等风吹摇曳的效果。
思路讲解：

按照我们之前的学习方法，第一步还是去思考，现实中花草随风飘动的特点：

• 根部基本不会动，越靠近上方边缘的地方浮动越大。
• 方向不确定。
• 速度通常较低。

因为本章shader较之前的稍微复杂，所有采用分解的方式来讲解。有了上面的思路，我们基本可以确定几个之前学过重要的节点。

• Time节点：粗暴的说会动的shader几乎都用它。
• Noise节点：粗暴的说有随机内容的shader大概率会用它。

---

那么我们了解Shader渲染过程包含顶点着色阶段与片元着色阶段，今天的效果主要产生在顶点着色阶段，因为我们采用的是顶点位置偏移的方式来实现，因此介绍一个新节点：

• Position节点: 保证基本图形内容不变的情况下，顶点位置发生偏移的时候基本都会用到它。

既然主要在顶点着色中实现，那么片元着色部分就简单带过，具体如下，贴图采样以后，颜色与透明度赋给片元着色器即可：

第二步，顶点偏移如何实现呢？实际上，原理也非常容易理解，我们还是拆分的来看：

Position节点获取到顶点位置以后，通过Transform节点来讲Object坐标转换到了世界坐标，然后通过Add节点给他加一个值，使顶点坐标产生了变化，然后再通过Transform节点转换回Object坐标，最后赋给顶点着色器。

跟进实现

到此为止，顶点偏移原理在ShaderGraph中的实现已经足够理解了。接下要你要知道的，只剩下一件事情，那就是让顶点坐标随机移动。然后将结果连接到上述Add节点即可。

该部分的内容如下：

• Time和Noise节点来进行的就是循环与随机的控制，联系前面的文章理解即可。
• 其他的比如windDir和windSpeed是控制变量，控制方向与速度以及归一化之类的。
• 重要要说的是这个顶点贴图，我们上文中提到了，摇曳是根部不动，上方移动。我们又知道在shader中，黑色为0，白色为1，从1 - 0也就是从有到无的过程，那么我们就能得出，我们需要的是一张由上至下的白到黑色渐变贴图。这样顶部就是1，底部就是0了：（白话的说就是越靠近底部数值越小，根部为0参与计算相乘后也是0了，不会产生任何变化。）
  

至此，基本的效果已经可以看到了。

最终ShaderGraph展示：

效果展示：

总结：

顶点偏移可以用于实现许多类似于摇曳、摆动等动画。控制顶点位置则可以使用顶点色贴图。Position节点、Time节点、Noise节点是实现该效果的核心节点。