【Shader特效1】关键帧实现的动画效果顶点着色器的开发

关键帧实现的动画效果顶点着色器的开发

说在开始

最近使用顶点着色器开发了一个根据三个关键帧动画的例子，在这里进行总结一些算法和开发过程。我都将我的代码放到了我的github上https://github.com/ModestBean/ShaderSample。本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。

参考内容：

• 《OpenGL ES 3.X 游戏开发 下卷》

运行效果

基本原理

其原理为加载三个不同的obj模型中的顶点数据，一个为翅膀扬起的模型，一个为翅膀平行的模型，一个为翅膀下降的模型。然后将顶点数据传到顶点着色器，在通过融合比例进行融合。

代码部分

#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 uBfb;
} myBufferVals;
layout (location = 0) in vec3 aPosition;//输入的1号关键帧顶点
layout (location = 1) in vec3 bPosition;//输入的2号关键帧顶点
layout (location = 2) in vec3 cPosition;//输入的3号关键帧顶点
layout (location = 3) in vec2 inTexCoor;//传入的纹理坐标
layout (location = 0) out vec2 outTexCoor;
out gl_PerVertex { 
	vec4 gl_Position;
};
void main() {
    vec3 tPosition;//融合后的结果顶点
    if(myBufferVals.uBfb<=1.0){//若融合比例小于等于1，则需要执行的是1、2号关键帧的融合
       	tPosition=mix(aPosition,bPosition,myBufferVals.uBfb);
    }else{//若融合比例大于1，则需要执行的是2、3号关键帧的融合
       	tPosition=mix(bPosition,cPosition,myBufferVals.uBfb-1.0);
    }
    outTexCoor = inTexCoor;
    gl_Position = myConstantVals.mvp * vec4(tPosition,1.0);//计算顶点最终位置
}

传入了一个融合比例uBfb，该值从0_{2动态变化，通过融合比例，使用mix函数得到关键动画。融合比例的范围为0}2,0_{1为翅膀下落，1}2为翅膀上扬。

最后：

本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。