Modern OpenGL中如何实现带延迟的逐顶点平滑渲染动画

需求可行性说明 #

这个需求完全可实现，你当前代码无法生效的核心问题是对顶点着色器的执行逻辑理解有误，以下是具体问题梳理和修改方案：

现有代码的问题 #

• 你在顶点着色器中定义的delay是顶点级局部变量，每个顶点执行着色器代码时都会重新初始化为0，无法累计时间，也不能在不同顶点、不同帧之间共享状态。
• 你已经定义了全局时间uniform u_time但没有实际传入使用，仅传帧间隔u_deltaTime无法实现时间累计判断。
• 顶点属性配置存在错误：纹理坐标是vec2类型，但glVertexAttribPointer的第二个参数设为了3，会导致纹理坐标采样异常。
• 没有为每个顶点设置独立的延迟判定参数，无法实现逐个出现的效果。

简单实现方案（无需修改顶点数据） #

1. 主循环新增全局时间传递

while (!glfwWindowShouldClose(window))
{
    float currentFrame = glfwGetTime();
    deltaTime = currentFrame - lastFrame;
    lastFrame = currentFrame;

    graphShader.use();
    // 传入累计全局时间
    GLint timeUni = glGetUniformLocation(graphShader.ID, "u_time");
    glUniform1f(timeUni, currentFrame);
    
    // 其余原有代码保持不变
}

2. 修正顶点属性配置

glBindVertexArray(VAO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 位置属性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)0);
glEnableVertexAttribArray(0);
// 纹理坐标属性修正：第二个参数改为2，对应vec2类型
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
glEnableVertexAttribArray(1);

3. 修改顶点着色器代码

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoord;

out vec2 TexCoord;
out float vAlpha;

uniform float u_time;
uniform mat4 transform;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main()
{
    gl_Position = projection * view * model * transform * vec4(aPos, 1.0);
    TexCoord = vec2(aTexCoord.x, 1.0 - aTexCoord.y);
    // 按顶点索引计算延迟，每50个顶点晚1秒出现，可自行调整系数修改间隔
    float delay = gl_VertexID * 0.02;
    // 计算透明度，设置0.2秒平滑过渡区间，避免出现硬切效果
    vAlpha = clamp((u_time - delay) / 0.2, 0.0, 1.0);
}

4. 修改片元着色器，开启混合

片元着色器新增透明度控制：

#version 330 core
in vec2 TexCoord;
in float vAlpha;
out vec4 FragColor;
uniform sampler2D tex;

void main()
{
    FragColor = texture(tex, TexCoord) * vec4(1.0, 1.0, 1.0, vAlpha);
}

渲染前开启alpha混合：

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

如果需要更灵活的延迟规则，比如按轨迹长度而非顶点索引设置延迟，可以给每个顶点新增一个延迟偏移属性写入顶点缓冲，逻辑和上述方案一致。

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