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;
}