【案例】旗帜飘动

开发平台：Unity 6.0
开发工具：Shader Graph
参考视频：Unity Shader Graph 旗帜飘动特效
 

一、效果图

---

 

二、Shader Graph 路线图

---

 

三、案例分析

---

核心思路：顶点偏移计算 与 顶点偏移忽略

3.1 纹理偏移

---

视觉上让旗帜保持动态飘动，需要 Time（时间节点）做持续性更新。（等同于 Update 中每帧执行一次更新）最终的目的是多次向后续流程输出 UV 信息。而非仅一次。
 

3.2 噪点

在模拟旗帜浮动表现上，引入 Gradient Noise（渐变噪声节点）- 按比例随机生成的随机值。来达到其效果。
 
Remap（线性插值节点）：限制 Gradient Noise（渐变噪声节点）输出值范围。如下图所示区别

图1 Out Min Max = 0 - 1

图2 Out Min Max = 0 - 0.3

在 Time（时间节点）加持下的动态噪声值 作为顶点偏移的最终使用值。
 

3.3 顶点偏移

视觉表现上，模型顶点的最终位置信息 = 模型顶点位置 + 顶点偏移位置。
 
注意：此处仅使用模型法线方向 * 噪声值作为 顶点偏移位置。故旗帜漂浮表现多为水平方向。

如果需要有XYZ三方向的变化

替换 Normal Vector（法线坐标节点）为 变量 Vector3 作为输入。

图1 使用 Vector3 输入

图2 使用 Normal Vector 输入

 

3.3 限制偏移

---

对偏移进行限制是因为之前的 “旗帜飘动” 是基于整张 Texture2D 进行。效果比对如下：

图1 增加限制

图2 无限制

Lerp（插值节点）用于限制值域与插值表现。
 
已知 漂浮偏移后的顶点位置 ≥ 旗帜飘动的幅度时的顶点偏移位置值 ≥ 默认平面顶点位置。目的是限制旗帜横向上偏移幅度。将 UV 值按照该插值计算，截取 U 值，可得到当 U = 0 时，旗帜最左边顶点保持不动。

关于使用 Step（限制最小值节点）

将 UV 中的 U 值接入 Step（限制最小值节点） 中，交由 Lerp（插值节点）依然可以实现上述效果，改变 Strep（限制最小值节点）下 Edge 值可适当影响旗帜变化。但效果上不如前者更易调整。

 

3.4 纹理贴图加入

---

加入 Texture2D 与 Sample Texture2D（纹理采样节点） 即可。

 

四、关于其他问题

---

仅依靠 Unity 内置 Plane 是无法制作旗帜模型。其原因是定点数少导致的变形无法或效果不如意。

如何解决
在 Blender \ Maya 等专业建模软件中准备一个表面细分高的模型导入至 Unity 中即可。