使用具有多个附件的帧缓冲区时片段着色器的默认渲染颜色矢量？

Question

ChatGPT 坚持认为，当使用帧缓冲区并附加多个绘制缓冲区时，0 索引缓冲区将是您在着色器中写入时将在画布上渲染的缓冲区。但我觉得事实并非如此。

这是我的设置方法：

   // Create and bind framebuffer
    multiFrameBuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, multiFrameBuffer);

    // Create textures for color attachments
    const textureRender = createTexture(gl);
    const textureSmoothed = createTexture(gl);
    const textureWithChangeMarks = createTexture(gl);

    // Attach textures to framebuffer
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureRender, 0);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, textureSmoothed, 0);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT2, gl.TEXTURE_2D, textureWithChangeMarks, 0);

    // Specify draw buffers
    gl.drawBuffers([
        gl.COLOR_ATTACHMENT0,
        gl.COLOR_ATTACHMENT1, 
        gl.COLOR_ATTACHMENT2
    ]);

在我的片段着色器中我定义：

layout(location = 0) out vec4 fragColor;
layout(location = 1) out vec4 mergedColor;
layout(location = 2) out vec4 changedColor;

我将颜色写入所有向量，我希望写入

fragColor

将是画布上与 webgl 上下文关联的渲染像素，但不会渲染任何内容。 如果我从其他两个中

readPixels

- 我会按预期得到缓冲区。 我还没有尝试像这样阅读

attachment0

- 但我希望能够直接渲染到画布上。

Answer 1

您只能执行任一操作：渲染到帧缓冲区或渲染到画布（默认帧缓冲区）。据我所知，默认帧缓冲区（调用

gl.bindFramebuffer(gl.FRAMEBUFFER, null)

时绑定）无法在上下文创建期间给定的参数之外进行配置。

如果您使用的是 webgl2，您可以使用

blitFramebuffer

将内容从

READ_FRAMEBUFFER

复制到

DRAW_FRAMEBUFFER

，使用

COLOR_BUFFER_BIT

这会将第一个颜色附件的内容复制到画布。在 WebGL1 中，您需要绘制一个屏幕空间矩形并使用简单的片段着色器手动位图纹理。