OpenGL乒乓反馈纹理清除不全 残留拖尾问题排查

实现目标 #

实现类似Shadertoy缓冲区的同纹理高效读写效果。

实现架构 #

搭建基础反馈系统，使用2个纹理分别绑定到独立帧缓冲，执行逻辑如下：

• 渲染到帧缓冲1时，着色器绑定纹理2作为采样输入
• 渲染到帧缓冲2时，绑定纹理1作为采样输入，循环交替执行
• 最后通过独立着色器将纹理1输出到绑定默认帧缓冲的全屏

故障现象 #

目前反馈链路基本可正常运行，着色器可正常读取纹理并输出，实现预期的反馈循环，但帧缓冲似乎无法完全清除为纯黑色。
为验证问题，实现了简单的移动圆形拖尾效果：

• Shadertoy中拖尾可按预期完全消失：
  
  Shadertoy在线示例
• 自研应用中拖尾开始消退后，会始终残留少量印记：
  
  初步怀疑是帧缓冲清除逻辑有误，或是GLFW双缓冲使用方式不当，已尝试所有可能的帧缓冲清除组合均未解决问题。

相关代码 #

移动圆形拖尾效果着色器（与上述测试效果一致） #

#version 330
precision highp float;

uniform sampler2D samplerA; // 纹理采样器

uniform float uTime; // 当前运行时间
uniform vec2 uResolution; // 窗口分辨率

void main()
{
    vec2 uv = gl_FragCoord.xy / uResolution.xy; // 归一化到0-1坐标
    vec3 tex = texture(samplerA, uv).xyz;// 读取乒乓纹理作为输入

    vec2 pos = .3*vec2(cos(uTime), sin(uTime)); // 圆形位置（绕屏幕做圆周运动）
    vec3 c = mix(vec3(1.), vec3(0), step(.0, length(uv - pos)-.07)); // 圆形颜色

    tex = mix(c, tex, .981); // 将圆形颜色和历史纹理颜色混合
    gl_FragColor = vec4(tex, 1.0); // 输出到纹理
}

帧缓冲与纹理创建代码 #

// -- 生成帧缓冲1 --
glGenFramebuffers(1, &frameBuffer1);
glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer1);

// 生成纹理1
glGenTextures(1, &texture1);
glBindTexture(GL_TEXTURE_2D, texture1);
// 申请空纹理内存
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 1920, 1080, 0, GL_RGBA, GL_FLOAT, 0);
// 设置最近邻过滤
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
// 将纹理挂载到帧缓冲颜色附着点
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture1, 0);


// -- 生成帧缓冲2 --
glGenFramebuffers(1, &frameBuffer2);
glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer2);

// 生成纹理2
glGenTextures(1, &texture2);
glBindTexture(GL_TEXTURE_2D, texture2);
// 申请空纹理内存
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 1920, 1080, 0, GL_RGBA, GL_FLOAT, 0);
// 设置最近邻过滤
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
// 将纹理挂载到帧缓冲颜色附着点
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture2, 0);

主循环代码 #

while(programIsRunning){
    // 分两次渲染，分别写入帧缓冲1和帧缓冲2
    for (int i = 0; i < 2; i++)
    {
        glUseProgram(program);
        glViewport(0, 0, platform.windowWidth(), platform.windowHeight());

        if (i == 0) // 写入帧缓冲1
        {
            glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer1); 
            glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
            glClear(GL_COLOR_BUFFER_BIT);
            // 绑定纹理2作为采样输入
            glActiveTexture(GL_TEXTURE0 + 0);
            glBindTexture(GL_TEXTURE_2D, texture2); 
            glUniform1i(uniforms.samplerA, 0);
        }
        else // 写入帧缓冲2
        {
            glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer2);
            glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
            glClear(GL_COLOR_BUFFER_BIT);
            // 绑定纹理1作为采样输入
            glActiveTexture(GL_TEXTURE0 + 0);
            glBindTexture(GL_TEXTURE_2D, texture1);
            glUniform1i(uniforms.samplerA, 0);
        }

        glDrawArrays(GL_TRIANGLES, 0, 6);
    }

    // 启用最终输出着色器
    glUseProgram(screenProgram);
    // 绑定默认帧缓冲（窗口缓冲）
    glBindFramebuffer(GL_FRAMEBUFFER, 0);
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    glViewport(0, 0, platform.windowWidth(), platform.windowHeight());

    // 绑定纹理1输出到屏幕
    glActiveTexture(GL_TEXTURE0 + 0);
    glBindTexture(GL_TEXTURE_2D, texture1);
    glUniform1i(uniforms.samplerA, 0);

    glDrawArrays(GL_TRIANGLES, 0, 6);
    // 交换GLFW双缓冲
    glfwSwapBuffers(platform.window());
}

问题根因 #

该问题和帧缓冲清除逻辑、GLFW双缓冲机制无关，核心是两个实现细节错误：

• 纹理格式精度不足
  创建帧缓冲附着纹理时，内部格式使用了GL_RGBA，对应每通道8位归一化无符号整数存储，单通道最小可表示非零值为1/255≈0.0039。拖尾逻辑每帧将历史颜色乘以0.981衰减，当颜色值衰减到小于0.0039时，会被量化截断到固定值，无法继续衰减到0，因此会永久残留淡灰色印记。而Shadertoy的缓冲区默认使用16位浮点格式纹理，精度足够支撑颜色持续衰减到0，因此拖尾可以完全消失。
• 冗余的帧缓冲清除操作不符合Shadertoy逻辑
  每次向乒乓FBO写入内容前都执行glClear将缓冲清为纯黑，这和Shadertoy的运行逻辑不符：Shadertoy的缓冲区不会在每帧自动清空，当前帧的内容完全由着色器输出覆盖。代码中绘制的全屏三角形已经覆盖了整个视口的所有像素，清除操作完全多余，还会改变颜色混合的实际计算逻辑，放大低精度带来的残留问题。

修复方案 #

1. 更换帧缓冲纹理的内部格式为16位浮点格式，对齐Shadertoy的存储精度，将两处glTexImage2D调用的内部格式参数从GL_RGBA修改为GL_RGBA16F：

   glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA16F, 1920, 1080, 0, GL_RGBA, GL_FLOAT, 0);
   

2. 删除主循环中两处FBO绑定后的glClearColor、glClear调用，全屏三角形渲染会覆盖所有像素，无需额外清除缓冲。
3. 检查OpenGL上下文配置，确认未开启sRGB帧缓冲选项，避免自动伽马校正改变颜色衰减曲线，导致效果和Shadertoy不一致。

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