Godot Engine：用Shader實現旗幟飄飄的效果

本文是《【手把手帶你Godot遊戲開發 第二彈】名場面臨摹》的一部分。老王將手把手教大家如何使用Godot引擎的Shader，實現一個遊戲中常見的旗幟飄飄的效果。
Godot Engine 3.2.1stable
Blender 2.82a

效果圖

步驟

建模

建一個三角形

增加細分

退回到物體模式再做一個旗杆和底座

將旗杆底座與旗幟合併成一個物體，進入UV工作間。

進入編輯模式選擇旗幟部分，切換到一個垂直於旗幟平面的視角，按U選擇從視角投影，這樣展開的旗幟是沒有變形的

把旗杆和底座分別縮成小點，放到左邊

導出UV佈局圖

導出的佈局圖如下

導出glTF格式模型，注意這回我們不用導出材質。

製作貼圖

在任意圖像處理軟件中，參照UV佈局圖，做如下的圖片：

基礎色貼圖：base_color

隱藏UV佈局層，導出後如下：

位移遮罩：offset_mask

這個圖分爲兩個區域：左側全黑區域 右側由黑到白的漸變區域

越黑代表位移越小，越白代表位移越大，旗杆、旗杆座以及旗幟的最根部應該都是不動的。這也是爲什麼旗幟的根部一定要放到純黑色區域一部分。

隱藏UV佈局層，導出後如下：

導入引擎

將下面三個文件直接導入Godot引擎

着色器

這段着色器代碼的原理還是很簡單的，可以通過各個參數微調旗幟隨風飄揚的效果，利用了一個正弦函數製造出波動的效果。

shader_type spatial;
render_mode cull_disabled;//兩面都要渲染，所以要將禁用剔除模式

uniform sampler2D base_color;//基礎色貼圖
uniform sampler2D offset_mask;//遮罩貼圖
uniform float speed = 0.1;//UV移動速度
uniform float amplitude = 10.0;//振幅
uniform float frequency = 0.01;//頻率



void vertex(){
	vec2 uv = UV - speed*vec2(1.0,0.0)*TIME;
	float mask = texture(offset_mask,UV).z;
	float wave = sin(TIME*uv.x*frequency);
	VERTEX.z += mask*wave*amplitude;
}


void fragment(){
	vec4 color = texture(base_color,UV);
	ALBEDO = color.rgb;
}

爲旗幟模型添加一個ShaderMaterial然後加上上面的着色器代碼。在Shader Param處將兩張貼圖分別賦值到相應的位置。