Unity 之 ShaderGraph 实现小旗随风飘扬效果入门级教程

Posted 2021-08-14 陈言必行

Unity 之 ShaderGraph 实现小旗随风飘扬效果入门级教程

• 前言
• 一，效果展示
• 二，原理介绍
• 三，制作步骤
• 四，使用示例
• 五，完整图示

前言

若你的工程还没有进行基础配置，请查看我的博文Unity 之 ShaderGraph入门使用详解，按照步骤操作完成配置即可，还能顺便学习一下基础操作流程哦~
本文手把手教你制作模拟小旗随风飘扬效果入门级教程，还不快动手试试？有经验的童鞋可以直接跳到最后一步，按照图示搭建即可。

一，效果展示

老规矩，直接上效果图：

没学习Shader Graph之前：我靠😱 ！这效果有点牛啊，那个大佬写的？
学习了Shader Graph之后：我去😒 ！就这？岂不是有手就行？

---

二，原理介绍

1. 通过Posinton节点使Y轴前后移动，注意需要节点上的的Space调整为Object：

2. 然后通过Sine节点，其前后移动变成波浪形成，进而模拟随风飘的效果：
   

3. 最后通过拆分UV节点，使得小旗的左边不动，达到绑定在旗杆上的效果：
   

---

三，制作步骤

1. 准备工作
   在Project面板右键 --> Create --> Shader --> PBRGraph（我这里命名为“RedFlagPBRGraph”），然后双击打开编辑器面板：
   

2. 通过Posinton节点保证X，Z轴顶点不变
   通过上面的原理介绍可以知道，最终效果只需要修改模型顶点的Y轴位置，所以这里我们使用Split拆分节点对Posinton节点进行拆分，并将拆分后的结果的X，Z值，分别赋值给Vector 3节点，并将Vector 3节点输出连接到主节点的Vertex Position上：（PS：将需要Posinton节点的Space调整为Object）
   

3. 通过Posinton控制Y轴的前后移动
   再次创建Posinton和Split节点，将需要Posinton节点的Space调整为Object，并连接如下：
   
   然后我们创建一个通常使用的自动时间控制节点，创建Time时间节点，Vector 1节点并将其设置为公开属性，创建Multiply乘法节点，将其连接起来：
   

4. 使用Sine节点模拟飘动
   创建Add加法节点，将3步骤中的两个节点连接起来，然后创建Sine节点，将Add节点的输出和Sine节点的输入连接起来：
   
   这时将Sine节点输出连接到2步骤中，留的Y轴输入，即可在预览图中看到一个漂浮的效果：
   
   在”Main Preview“面板右键，选择”Custom Mesh“，然后选择”Plane“，此时预览结果就是小旗飘飘的样子的：
   

5. 通过UV节点控制其绕杆扇形移动
   由4步骤中的预览图我们可以看到整个模型都在上下浮动，这与现实中的旗子🚩 是不一样的，我们需要将其左边固定，让其越往右浮动效果越明显。
   创建UV节点，创建Split拆分节点对UV进行拆分，然后将拆分后的值，和4步骤中的Sine节点使用Multiply乘法节点连接起来，再赋值给2步骤中预览的Y轴输入：
   

6. 添加贴图节点显示旗帜
   至此小旗飘飘的效果已经制作完成了，下面为小旗添加一个贴图：创建Sample Texture 2D节点作为贴图输入和Texture 2D Asset节点作为公开属性（选中节点右键选择“Convert To Property”），然后将其连接起来即可：
   

最后记得点击右上角的"Save Asset"保存一下，至此小旗飘飘的Shader就制作完成了。【文末完整图示】

---

四，使用示例

1. 创建材质球并使用刚制作的Shader
   这里提供一个快捷创建材质球的方法，鼠标选中我们保存的“RedFlagPBRGraph”文件，然后右键创建材质球，这样我们创建出来的材质球，就自动使用这个Shader了。
   

2. 在“Hierarchy”面板创建Plane，并将刚刚创建的材质球赋值给它，得到结果如下：
   

3. 为材质球的公开属性赋值，调试效果：(为了展示效果我运行之后录的)
   

---

五，完整图示

小旗飘飘ShaderGraph面板完整图示：