開發(fā)平臺：Unity 6.0
開發(fā)工具：Shader Graph
參考視頻：Unity Shader Graph 旗幟飄動特效
?

一、效果圖

---

?

二、Shader Graph 路線圖

---

?

三、案例分析

---

核心思路：頂點偏移計算 與 頂點偏移忽略

3.1 紋理偏移

---

視覺上讓旗幟保持動態(tài)飄動，需要 Time（時間節(jié)點）做持續(xù)性更新。（等同于 Update 中每幀執(zhí)行一次更新）最終的目的是多次向后續(xù)流程輸出 UV 信息。而非僅一次。
?

3.2 噪點

在模擬旗幟浮動表現(xiàn)上，引入 Gradient Noise（漸變噪聲節(jié)點）- 按比例隨機(jī)生成的隨機(jī)值。來達(dá)到其效果。
?
Remap（線性插值節(jié)點）：限制 Gradient Noise（漸變噪聲節(jié)點）輸出值范圍。如下圖所示區(qū)別

圖1 Out Min Max = 0 - 1

圖2 Out Min Max = 0 - 0.3

在 Time（時間節(jié)點）加持下的動態(tài)噪聲值 作為頂點偏移的最終使用值。
?

3.3 頂點偏移

視覺表現(xiàn)上，模型頂點的最終位置信息 = 模型頂點位置 + 頂點偏移位置。
?
注意：此處僅使用模型法線方向 * 噪聲值作為 頂點偏移位置。故旗幟漂浮表現(xiàn)多為水平方向。

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

替換 Normal Vector（法線坐標(biāo)節(jié)點）為 變量 Vector3 作為輸入。

圖1 使用 Vector3 輸入

圖2 使用 Normal Vector 輸入

?

3.3 限制偏移

---

對偏移進(jìn)行限制是因為之前的 “旗幟飄動” 是基于整張 Texture2D 進(jìn)行。效果比對如下：

圖1 增加限制

圖2 無限制

Lerp（插值節(jié)點）用于限制值域與插值表現(xiàn)。
?
已知 漂浮偏移后的頂點位置 ≥ 旗幟飄動的幅度時的頂點偏移位置值 ≥ 默認(rèn)平面頂點位置。目的是限制旗幟橫向上偏移幅度。將 UV 值按照該插值計算，截取 U 值，可得到當(dāng) U = 0 時，旗幟最左邊頂點保持不動。

關(guān)于使用 Step（限制最小值節(jié)點）

將 UV 中的 U 值接入 Step（限制最小值節(jié)點） 中，交由 Lerp（插值節(jié)點）依然可以實現(xiàn)上述效果，改變 Strep（限制最小值節(jié)點）下 Edge 值可適當(dāng)影響旗幟變化。但效果上不如前者更易調(diào)整。

?

3.4 紋理貼圖加入

---

加入 Texture2D 與 Sample Texture2D（紋理采樣節(jié)點） 即可。

?

四、關(guān)于其他問題

---

僅依靠 Unity 內(nèi)置 Plane 是無法制作旗幟模型。其原因是定點數(shù)少導(dǎo)致的變形無法或效果不如意。

如何解決
在 Blender \ Maya 等專業(yè)建模軟件中準(zhǔn)備一個表面細(xì)分高的模型導(dǎo)入至 Unity 中即可。