如何存储OpenGL片段着色器已渲染帧？FFGL插件视频延迟实现问询

绝对可以实现你要的视频延迟效果！在OpenGL（包括FFGL插件场景）中，我们不会直接从片段着色器写入外部CPU缓冲区（效率太低），而是利用帧缓冲对象（FBO）+ 纹理缓冲区的组合，把过往帧存储在GPU纹理中，后续帧直接从这些纹理采样即可——这和ShaderToy里的buffer机制是完全对应的，非常适合你的移植需求。

下面分两部分解答你的问题，再给出具体实现步骤：

一、能否从片段着色器写入外部缓冲区并在30帧后调用？ #

简单说：不能直接写入外部CPU缓冲区，但可以写入GPU纹理缓冲区，后续帧直接采样复用。

片段着色器的执行是GPU并行化的，直接读写CPU内存会带来巨大的性能开销。正确的做法是：

1. 把当前帧的渲染结果输出到一个绑定了纹理的FBO（相当于把帧数据存在GPU纹理里）
2. 30帧后，把这个纹理作为uniform变量传递给片段着色器，直接采样其中的像素数据用于计算

整个流程完全在GPU内部完成，效率极高，也是实时视频特效的标准做法。

二、如何存储已渲染的帧以供后续使用？ #

最实用的方案是创建一个环形纹理队列（也就是多个FBO+纹理的组合，按顺序循环使用），具体步骤如下：

1. 初始化阶段：创建环形缓冲队列 #

首先根据你的延迟需求（比如30帧），创建对应数量的纹理和FBO：

// 假设我们需要存储30帧，定义全局/类成员变量
std::vector<GLuint> delayFBOS;
std::vector<GLuint> delayTextures;
int currentFrameIdx = 0;
const int BUFFER_COUNT = 30;

// 在插件初始化时调用（比如FFGL的InitGL方法）
void initDelayBuffers(int width, int height) {
    delayFBOS.resize(BUFFER_COUNT);
    delayTextures.resize(BUFFER_COUNT);

    for (int i = 0; i < BUFFER_COUNT; i++) {
        // 创建帧纹理
        glGenTextures(1, &delayTextures[i]);
        glBindTexture(GL_TEXTURE_2D, delayTextures[i]);
        // 纹理格式和尺寸要和输入/输出一致，这里用RGBA8兼容大多数场景
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, nullptr);
        // 设置纹理过滤和包裹模式，避免边缘异常
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

        // 创建并配置FBO，绑定纹理作为颜色附着点
        glGenFramebuffers(1, &delayFBOS[i]);
        glBindFramebuffer(GL_FRAMEBUFFER, delayFBOS[i]);
        glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, delayTextures[i], 0);
        
        // 检查FBO完整性，避免渲染错误
        if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {
            // 这里可以加错误日志或处理逻辑
        }
    }
    // 解绑FBO，回到默认帧缓冲
    glBindFramebuffer(GL_FRAMEBUFFER, 0);
}

2. 每帧渲染流程：更新缓冲 + 复用延迟帧 #

在FFGL的ProcessOpenGL方法中，按以下步骤处理：

void processFrame(GLuint inputTexture, int width, int height) {
    // 第一步：把当前输入帧渲染到环形队列的当前位置纹理
    int writeIdx = currentFrameIdx % BUFFER_COUNT;
    glBindFramebuffer(GL_FRAMEBUFFER, delayFBOS[writeIdx]);
    glViewport(0, 0, width, height);
    
    // 这里用一个简单的着色器把输入纹理渲染到FBO（你也可以替换成自己的帧渲染逻辑）
    renderTextureToFBO(inputTexture);
    
    // 解绑FBO
    glBindFramebuffer(GL_FRAMEBUFFER, 0);

    // 第二步：计算30帧前的缓冲索引（取模确保循环，加BUFFER_COUNT避免负数）
    int readIdx = (currentFrameIdx - 30 + BUFFER_COUNT) % BUFFER_COUNT;
    GLuint delayTexture = delayTextures[readIdx];

    // 第三步：使用延迟纹理和当前输入纹理渲染最终输出
    glUseProgram(yourDelayShaderProgram);
    // 传递延迟纹理到着色器
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, delayTexture);
    glUniform1i(glGetUniformLocation(yourDelayShaderProgram, "u_delayTex"), 0);
    // 传递当前输入纹理
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, inputTexture);
    glUniform1i(glGetUniformLocation(yourDelayShaderProgram, "u_currentTex"), 1);
    // 传递分辨率等其他uniform
    glUniform2f(glGetUniformLocation(yourDelayShaderProgram, "u_resolution"), width, height);

    // 渲染到FFGL的输出纹理（或屏幕）
    renderFullscreenQuad();

    // 更新当前帧索引
    currentFrameIdx++;
}

3. 片段着色器示例：混合当前帧与延迟帧 #

你的延迟效果着色器可以这样写，类似ShaderToy的逻辑：

uniform sampler2D u_currentTex;
uniform sampler2D u_delayTex;
uniform vec2 u_resolution;

void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution;
    // 采样当前帧和30帧前的帧
    vec4 currentCol = texture(u_currentTex, uv);
    vec4 delayCol = texture(u_delayTex, uv);

    // 实现简单的延迟混合效果，你可以根据需求修改
    // 比如只显示延迟帧：gl_FragColor = delayCol;
    // 或者叠加混合：gl_FragColor = currentCol + 0.7 * delayCol;
    gl_FragColor = mix(currentCol, delayCol, 0.5);
}

关键注意事项 #

• FFGL适配：FFGL插件会提供输入纹理和输出纹理的接口，你需要确保FBO的尺寸和输入/输出纹理一致，避免拉伸或裁剪。
• 性能优化：如果延迟帧数较多（比如超过60帧），可以考虑使用压缩纹理格式（比如GL_COMPRESSED_RGBA_S3TC_DXT1_EXT）减少GPU内存占用。
• 初始化时机：一定要在OpenGL上下文创建完成后再初始化FBO和纹理，FFGL中通常在InitGL方法中处理。

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