WebGL帧缓冲渲染到纹理问题：新手纹理像素复制失败求助

嘿，作为WebGL新手碰到帧缓冲和渲染到纹理的问题太正常啦！我来帮你梳理下最容易踩的坑，再给你一个能跑通的2x2纹理复制示例，你可以对照着自己的代码排查问题～

这些是新手用帧缓冲时最容易忽略的点：

• 帧缓冲完整性检查：绑定帧缓冲后一定要调用gl.checkFramebufferStatus(gl.FRAMEBUFFER)，确认返回值是gl.FRAMEBUFFER_COMPLETE。很多时候纹理格式不兼容（比如源纹理用RGB，目标纹理用RGBA）、纹理没设置正确的过滤方式，都会导致帧缓冲不完整，直接渲染失败。
• 纹理参数完全匹配：源纹理和目标纹理的尺寸、内部格式、数据类型必须完全一致！比如源纹理是gl.RGBA+gl.UNSIGNED_BYTE，目标纹理也得一模一样，不然复制时会出现颜色错乱或者全黑的情况。
• 视口设置正确：渲染到纹理时，必须把视口改成纹理的尺寸（也就是2x2），不然WebGL会用默认的画布尺寸渲染，导致只有部分像素被写入到目标纹理里。
• 着色器和纹理单元绑定正确：要确保顶点着色器正确传递纹理坐标，片元着色器正确采样纹理，还要记得激活对应的纹理单元并传递给uniform变量。

下面是完整的流程代码，你可以直接参考：

1. 创建填充随机颜色的源纹理 #

function createSourceTexture(gl) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  
  // 生成2x2的随机RGBA颜色数据
  const colorData = new Uint8Array(2 * 2 * 4);
  for (let i = 0; i < colorData.length; i += 4) {
    colorData[i] = Math.floor(Math.random() * 255);     // R
    colorData[i+1] = Math.floor(Math.random() * 255);   // G
    colorData[i+2] = Math.floor(Math.random() * 255);   // B
    colorData[i+3] = 255;                               // A
  }
  
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, colorData);
  
  // 小尺寸纹理不需要mipmap，设置合适的过滤和包裹方式
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  
  return texture;
}

2. 创建绑定目标纹理的帧缓冲 #

function createFramebufferWithTargetTexture(gl, width, height) {
  // 创建空的目标纹理
  const targetTexture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, targetTexture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  
  // 和源纹理设置相同的参数
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  
  // 创建并绑定帧缓冲
  const framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, targetTexture, 0);
  
  // 关键：检查帧缓冲是否完整
  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  if (status !== gl.FRAMEBUFFER_COMPLETE) {
    console.error(`帧缓冲创建失败，状态码：${status}`);
    return null;
  }
  
  // 解绑资源，避免干扰后续操作
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.bindTexture(gl.TEXTURE_2D, null);
  
  return { framebuffer, targetTexture };
}

3. 渲染到纹理的核心逻辑 #

// 假设你已经编译并链接好了着色器程序
function copyTextureToFramebuffer(gl, shaderProgram, sourceTexture, fbInfo) {
  // 绑定帧缓冲，切换渲染目标到纹理
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbInfo.framebuffer);
  // 设置视口为纹理尺寸（2x2）
  gl.viewport(0, 0, 2, 2);
  
  // 使用着色器程序
  gl.useProgram(shaderProgram);
  
  // 绑定源纹理到纹理单元0
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
  // 告诉片元着色器使用纹理单元0
  const samplerLoc = gl.getUniformLocation(shaderProgram, "uSampler");
  gl.uniform1i(samplerLoc, 0);
  
  // 创建全屏四边形的顶点数据（位置+纹理坐标）
  const fullscreenVertices = new Float32Array([
    // 位置坐标       // 纹理坐标
    -1.0, -1.0,      0.0, 0.0,
     1.0, -1.0,      1.0, 0.0,
    -1.0,  1.0,      0.0, 1.0,
     1.0,  1.0,      1.0, 1.0,
  ]);
  
  // 上传顶点数据到缓冲区
  const vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, fullscreenVertices, gl.STATIC_DRAW);
  
  // 启用并配置顶点属性
  const posAttribLoc = gl.getAttribLocation(shaderProgram, "aPosition");
  gl.enableVertexAttribArray(posAttribLoc);
  gl.vertexAttribPointer(posAttribLoc, 2, gl.FLOAT, false, 16, 0);
  
  const texCoordAttribLoc = gl.getAttribLocation(shaderProgram, "aTexCoord");
  gl.enableVertexAttribArray(texCoordAttribLoc);
  gl.vertexAttribPointer(texCoordAttribLoc, 2, gl.FLOAT, false, 16, 8);
  
  // 清除帧缓冲（可选，但建议执行，避免残留数据）
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  // 绘制全屏四边形，完成纹理复制
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  
  // 恢复默认状态
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
  gl.bindTexture(gl.TEXTURE_2D, null);
  gl.useProgram(null);
  // 把视口改回画布尺寸
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
}

4. 对应的着色器代码 #

顶点着色器 #

attribute vec2 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;

void main() {
  gl_Position = vec4(aPosition, 0.0, 1.0);
  vTexCoord = aTexCoord;
}

片元着色器 #

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

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

你可以把自己的代码和上面的示例对比，看看是不是哪一步漏了。如果还是没解决，可以把你的代码片段贴出来，我再帮你定位问题～

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