【案例】旗帜飘动

开发平台：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 中即可。