REGL中更新framebuffer纹理失败：初始纹理为何未变红？

嘿，我帮你找出了两个核心问题，导致你看不到FBO更新后的红色纹理：

1. 你读取的是默认帧缓冲，不是自定义FBO #

你在updateColor的回调里调用regl.read()，但这个方法默认读取的是屏幕的默认帧缓冲，而不是你创建的fbo。要获取FBO内的纹理内容，必须在read时明确指定framebuffer: fbo参数。

2. 颜色值范围不匹配 #

你的初始纹理用了[0,255,0,255]这种0-255的整数颜色，但REGL默认的纹理格式是UNSIGNED_BYTE，对应的片段着色器输出应该用0-1之间的归一化值。你当前写的vec4(255.0, 0.0, 0.0, 255.0)会被OpenGL自动截断为vec4(1.0, 0.0, 0.0, 1.0)，虽然最终能得到红色，但这是不规范的写法，容易引发其他兼容性问题。

另外，你启用了OES_texture_float扩展，但初始纹理没指定浮点格式，不过这不是当前问题的核心，规范起见可以明确纹理的格式参数。

修正后的完整代码 #

const regl = createREGL({ extensions: 'OES_texture_float' })

// 明确指定纹理格式（可选，但更清晰规范）
const initialTexture = regl.texture({
  data: [[[0, 255, 0, 255]]],
  type: 'unsigned byte',
  format: 'rgba'
})

const fbo = regl.framebuffer({
  color: initialTexture,
  depth: false,
  stencil: false,
})

const updateColor = regl({
  framebuffer: () => fbo,
  vert: `
precision mediump float;
attribute vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}
`,
  frag: `
precision mediump float;
void main() {
  // 使用0-1范围的归一化颜色值，匹配纹理格式
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`,
  attributes: {
    position: [
      -4, 0,
      4, 4,
      4, -4
    ],
  },
  count: 3,
})

// 清除默认帧缓冲（不影响FBO更新，只是清空屏幕）
regl.clear({
  color: [0, 0, 0, 1],
  depth: 1,
});

// 执行FBO渲染并读取更新后的内容
updateColor(() => {
  // 指定读取目标为我们的自定义FBO
  const pixelData = regl.read({ framebuffer: fbo })
  console.log('FBO内的像素数据:', pixelData)
  // 现在你会看到输出的是红色对应的RGBA值：[255, 0, 0, 255]
});

补充说明 #

• 当你把initialTexture绑定到FBO作为颜色附着后，渲染到FBO的内容会直接写入这个纹理，所以initialTexture确实已经被更新为红色了，只是你之前没读取对目标。
• 如果之后需要把FBO里的纹理显示到屏幕上，可以再写一个REGL命令，把fbo的颜色纹理作为uniform传入片段着色器，绘制到默认帧缓冲即可。

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