【Shader特效4】波动效果顶点着色器的实现
着色器实现水面波动和和旗帜飘扬效果
本节案例是基于顶点着色器开发的水面波动和旗帜飘扬的效果，其原理非常简单，只需要一个正弦函数就可以实现此种效果了
作者：憨豆酒（YinDou），联系我[email protected]，熟悉图形学，图像处理领域，本章的源代码可在此仓库中找到： https://github.com/douysu/person-summary 如果对您有帮助还请帮忙点一个star。如果大家发现错误以及不合理之处，还希望多多指出。
- 我的Github
- 我的CSDN
- 我的知乎
参考内容：
- 本节的内容参考于《OpenGL ES 3.X 游戏开发 下卷》
1 运行效果
2 基本原理
这次创建的平面和以往的平面不再相同，各位朋友们应该很清楚顶点着色器时每顶点执行一次的，要想创建一个简单的平面最少需要6个顶点。而用于实现波动的平面应为此种情况。如下。
需要多个三角形去创建平面，这样才可以动态的改变顶点的位置。
然后基于正弦函数计算当前顶点的姿态即可。
3 计算步骤
前提：摄像机的位置在Z轴的正半轴，片面在XOY平面上。
1、根据当前的X位置减去初始X位置，得到X轴的偏移量。
2、根据X轴的偏移量计算tempAngle的值，可以理解为角度的偏移量，XSpan（X偏移量）与tempAngle的值是成正比的。
3、计算startAngle+tempAngle的值，通过正弦函数计算顶点的最终姿态。
4 代码部分
我传入了两个Uniform变量：uWidthSpan和uStartAngle。uWidthSpan为这个平面的起始X坐标，也就是最左边点的X坐标的值，为什么要传入这个值，因为在顶点着色器中，我们很难判断一个物体的边界值，直接传入可以有更好的效果。其次是uStartAngle，该值是动态改变的，这样才实现了动态波动的效果，如果这个值是不变的，那么我们看到的只是一个类似于静态正弦函数的效果。当然，值的范围是需要你自己去设置的。我的顶点着色器的代码如下：
#version 400
#extension GL_ARB_separate_shader_objects : enable
#extension GL_ARB_shading_language_420pack : enable
layout (push_constant) uniform constantVals {
mat4 mvp;
} myConstantVals;
layout (std140,set = 0, binding =0 ) uniform bufferVals {//输入的一致块
float uWidthSpan;//横向长度总跨度
float uStartAngle;//起始角度
} myBufferVals;
layout (location = 0) in vec3 pos;//传入的物体坐标系顶点位置
layout (location = 1) in vec2 inTexCoor;//传入的纹理坐标
layout (location = 0) out vec2 outTexCoor;//传到片元着色器的顶点位置
out gl_PerVertex {
vec4 gl_Position;
};
void main() {
float angleSpanH=4.0*3.14159265;//横向角度总跨度，用于进行X距离与角度的换算
float startX=-myBufferVals.uWidthSpan/2.0;//起始X坐标(即最左侧顶点的X坐标)
float currAngle=myBufferVals.uStartAngle+((pos.x-startX)/myBufferVals.uWidthSpan)*angleSpanH;
float tz=sin(currAngle)*0.5;//通过正弦函数求出当前点的Z坐标
outTexCoor = inTexCoor;
gl_Position = myConstantVals.mvp * vec4(pos.x,pos.y,tz,1.0);//计算顶点最终位置
}
上述代码中还有一个angleSpanH值，用XSpan（X轴的偏移量）*angleSpanH等到就是tempAngle。这个值的目的是为了将距离转换成角度的中间过程值。通过以上代码就实现了水面波动和旗帜飘扬的效果了。
5 最后
本节实现了水面波动和旗帜飘扬的效果，本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。