【Shader特效6】膨胀效果顶点着色器的实现

膨胀效果顶点着色器的实现

说在开始：

最近使用顶点着色器开发了一个膨胀效果的例子，在这里进行总结一些算法和开发过程。

作者：尹豆（憨豆酒），联系我yindou97@163.com，熟悉图形学，图像处理领域，本章代码： https://github.com/douysu/computer-graphics-notes

• 我的知乎
• 个人主页

参考内容：

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

运行效果

第一幅图片为人头膨胀的效果，第二幅图为炸弹炸开的效果。此效果可以应用于加热膨胀，游戏膨胀死亡等效果。

基本原理

其基本原理很简单。
只是将物体的顶点沿着法向量的方向移动一定距离后就产生了这种效果。
注意：
人头沿着顶点法向量的方向移动了一段距离，炸弹是沿着面法向量移动了一段距离。

代码部分

#version 400
#extension GL_ARB_separate_shader_objects : enable //开启separate_shader_objects
#extension GL_ARB_shading_language_420pack : enable //开启shading_language_420pack
layout (push_constant) uniform constantVals { //推送常量块
    mat4 mvp; //总变换矩阵
} myConstantVals;
layout (std140,set = 0, binding = 0) uniform bufferVals { //一致块
    float uFatFactor; //吹气膨胀系数
} myBufferVals;
layout (location = 0) in vec3 pos; //输入的顶点位置
layout (location = 1) in vec2 inTexCoor; //输入的纹理坐标
layout (location = 2) in vec3 inNormal; //输入的顶点法向量
layout (location = 0) out vec2 outTexCoor; //输出到片元着色器的纹理坐标
out gl_PerVertex { //输出接口块
    vec4 gl_Position; //内建变量gl_Position
};
void main() {
    outTexCoor = inTexCoor; //输出到片元着色器的纹理坐标
    gl_Position = myConstantVals.mvp* vec4(pos+inNormal*myBufferVals.uFatFactor,1.0); //根据吹气膨胀系数计算顶点最终位置  
}

代码部分最重要的就是最后一行沿着法向量的方向移动一段距离的代码了。

最后：

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