多附着帧缓冲下片元着色器输出无法渲染到画布的问题

你遇到的核心问题是：自定义帧缓冲的颜色附着不会自动渲染到画布——当你绑定了自己创建的multiFrameBuffer后，所有绘制指令的输出都会被写入到这个帧缓冲的附着纹理中，而非WebGL默认的画布帧缓冲。另外两个附着能读取到数据，说明多绘制缓冲的配置本身是正常的，只是缺少了将目标纹理内容渲染到画布的步骤。

解决步骤 #

要把COLOR_ATTACHMENT0对应的textureRender内容显示到画布，需要分两步完成：

1. 保持原有离屏渲染流程（写入多附着帧缓冲） #

你的现有代码已经正确实现了将数据写入三个纹理附着，这部分无需修改：

// 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
]);

// 执行你的渲染逻辑（写入三个输出变量）
// ...你的绘制代码...

2. 切换到默认帧缓冲，将纹理渲染到画布 #

完成离屏渲染后，需要解绑自定义帧缓冲，然后通过全屏四边形将textureRender的内容绘制到画布：

2.1 解绑自定义帧缓冲，切换到默认帧缓冲

gl.bindFramebuffer(gl.FRAMEBUFFER, null);

2.2 配置纹理采样与全屏绘制

首先准备一个简单的着色器程序，用于采样纹理并输出到画布：
顶点着色器：

precision mediump float;
attribute vec2 aPosition;
varying vec2 vTexCoord;

void main() {
    vTexCoord = vec2(aPosition.x * 0.5 + 0.5, -aPosition.y * 0.5 + 0.5);
    gl_Position = vec4(aPosition, 0.0, 1.0);
}

片元着色器：

precision mediump float;
uniform sampler2D uTexture;
varying vec2 vTexCoord;

void main() {
    gl_FragColor = texture2D(uTexture, vTexCoord);
}

然后执行绘制：

// 激活纹理单元0，绑定textureRender
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, textureRender);

// 设置着色器uniform，指定使用纹理单元0
const textureLoc = gl.getUniformLocation(yourFullScreenProgram, 'uTexture');
gl.uniform1i(textureLoc, 0);

// 使用全屏顶点数据（覆盖整个画布的矩形）
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1.0, -1.0,
     1.0, -1.0,
    -1.0,  1.0,
     1.0,  1.0
]), gl.STATIC_DRAW);

// 启用顶点属性并绘制
const positionLoc = gl.getAttribLocation(yourFullScreenProgram, 'aPosition');
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);

gl.useProgram(yourFullScreenProgram);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

关键说明 #

• WebGL的默认帧缓冲是与画布关联的，只有当你没有绑定自定义帧缓冲时，绘制才会直接输出到画布。
• 自定义帧缓冲的附着是离屏渲染的存储目标，必须手动将其内容复制或绘制到默认帧缓冲才能在画布上显示。

内容的提问来源于stack exchange，提问作者Yuval A.