GLSL顶点着色器使用cos与time变量实现模型缩放动画问题

问题背景 #

需要使用time时间变量搭配cos()函数实现兔子模型的周期性放大缩小动画，目前time变量已成功传入顶点着色器，但套用网络找到的公式始终无法实现预期效果。

说明：英语非提问者母语

现有问题代码 #

C++端animate传参实现 #

void MaterialTP2::animate(Node* o, const float elapsedTime) {
    Camera * test = Scene::getInstance()->camera(); 
    glProgramUniformMatrix4fv(m_ProgramPipeline->getId(), l_View, 1, GL_FALSE, glm::value_ptr(test->getViewMatrix()));
    glProgramUniformMatrix4fv(m_ProgramPipeline->getId(), l_Model, 1, GL_FALSE, glm::value_ptr(o->frame()->getModelMatrix()));
    glProgramUniformMatrix4fv(m_ProgramPipeline->getId(), l_Proj, 1, GL_FALSE, glm::value_ptr(test->getProjectionMatrix()));
    glProgramUniform1f(m_ProgramPipeline->getId(), glGetUniformLocation(vp->getId(), "time"), elapsedTime);
}

顶点着色器代码 #

#version 460

#define PI 3.1415926538
uniform mat4 Model;
uniform mat4 View;
uniform mat4 Proj;
uniform float time;

out gl_PerVertex {
    vec4 gl_Position;
    float gl_PointSize;
    float gl_ClipDistance[];
};

layout (location = 0) in vec3 Position;
layout(location = 2) in vec3 normal;
varying vec3 out_color;

void main()
{
    float scaleFactor = 0.2 * cos((2 * PI) / time * 100 );
    gl_Position = Proj * View * Model  * vec4(Position  ,1.0) ;
    out_color = 0.5 * normal  + vec3(0.5, 0.5, 0.5);
} 

错误点排查 #

• 核心逻辑遗漏：计算出的scaleFactor缩放因子完全没有参与顶点位置计算，顶点坐标直接传入MVP矩阵转换，自然不会有任何缩放效果。
• 周期公式错误：cos()内的周期计算逻辑写反，(2 * PI) / time * 100在time趋近于0时数值会趋于无穷大，完全不符合周期性动画的计算逻辑，正确的周期参数格式应为2*PI*动画频率*time。
• 缩放取值范围错误：计算出的scaleFactor取值范围为[-0.2, 0.2]，既没有以1为基础缩放基准，还会出现负缩放导致模型翻面、尺寸过小的问题。

修正后代码 #

直接替换顶点着色器的main函数逻辑即可：

void main()
{
    // 动画参数：0.5为频率（即每2秒完成一次缩放循环），0.2为缩放浮动幅度
    float scaleFactor = 1.0 + 0.2 * cos(2 * PI * 0.5 * time);
    // 对顶点位置执行缩放后再做MVP矩阵变换
    vec3 scaledPosition = Position * scaleFactor;
    gl_Position = Proj * View * Model * vec4(scaledPosition, 1.0);
    out_color = 0.5 * normal + vec3(0.5, 0.5, 0.5);
}

参数调整说明 #

• 调整动画速度：修改2 * PI * 0.5 * time中的0.5数值即可，数值越大动画循环速度越快，例如改为1则每1秒完成一次缩放循环。
• 调整缩放幅度：修改公式中的0.2系数即可，数值越大模型缩放的尺寸变化越明显。
• 调整缩放中心：当前写法以模型局部坐标原点为缩放中心，如果需要以自定义点为中心缩放，先将顶点坐标减去中心点坐标，完成缩放后再加回中心点坐标即可。

内容的提问来源于stack exchange，提问作者Clement Brct