【Shader特效3】旋转扭动效果顶点着色器实现

#旋转扭动效果顶点着色器实现
##说在开头：
此小节基于顶点着色器开发一个旋转扭动的效果，本小节的着色器代码都可以在我的github上找到https://github.com/ModestBean/ShaderSample，本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。
#####参考内容：

《OpenGL ES 3.X 游戏开发下卷》
##运行效果
首先看一下这个案例的运行效果。

##基本原理
#####前提：立方体摆放在XOY平面内，摄像机位置在Z轴正方向。
首先看一下基本的原理的图片。

1、首先需要构建一个类似图中所示的几何体，几何体中的顶点用于在顶点着色器中动态改变顶点的位置。
2、根据当前顶点的Y值-起始Y值，得到Y坐标的偏移量，在通过偏移量计算当前的旋转角度值。
3、根据角度，计算新的顶点位置。
公式为x’=xcos角-zsin角
z’=xsin角+zcos角
##代码部分

#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 angleSpan;//本帧扭曲总角度
    float yStart;//Y坐标起始点
    float ySpan;//Y坐标总跨度
} 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 currAngle= myBufferVals.angleSpan*(pos.y-myBufferVals.yStart)/myBufferVals.ySpan;//计算当前顶点扭动(绕中心点选择)的角度
   vec3 tPosition=pos;
   if(pos.y>myBufferVals.yStart){//若不是最下面一层的顶点则计算扭动后的X、Z坐标
     tPosition.x=(cos(currAngle)*pos.x-sin(currAngle)*pos.z);
     tPosition.z=(sin(currAngle)*pos.x+cos(currAngle)*pos.z);
   }
    outTexCoor = inTexCoor;
    gl_Position = myConstantVals.mvp * vec4(tPosition,1.0);
}

在这里，我传入了三个Uniform变量angleSpan，yStart，ySpan。angleSpan为中间变量，将Y的偏移量转换为旋转角度，Y的偏移量与旋转角度是成正比的，公式为：旋转角度=Y偏移量*angleSpan。yStart代表起始Y坐标，在顶点着色器中我们很难去计算物体的边界值，直接由渲染管线传入能够提高我们的效率。最后传入的是ySpan，此值代表立方体的高度，计算比值时使用。
##最后：
本小节基于顶点着色器得到了一种旋转扭动的效果，本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。

【Shader特效3】旋转扭动效果顶点着色器实现

猜你喜欢