WebGL中Framebuffer附件初始化纹理后出现异常采样结果的问题

看起来你遇到的问题根源在于纹理过滤模式和mipmap配置不匹配，下面我来拆解原因并给出修复方案：

问题原因分析 #

1. 默认纹理过滤模式触发无效mipmap访问：
   你通过twgl.createTexture创建初始颜色纹理时，没有指定minFilter参数，WebGL默认的minFilter是gl.LINEAR_MIPMAP_LINEAR——这个模式要求纹理必须生成完整的mipmap层级，但你没有调用gl.generateMipmap。当你的噪声采样使用偏移后的坐标时，GPU会尝试读取不存在的mipmap层级，导致获取到未定义的内存数据，出现混乱的采样结果。

2. 空附件的默认行为隐藏了问题：
   当你注释初始化代码只传空数组时，twgl.createFramebufferInfo会自动创建符合FBO要求的默认纹理，其中默认设置了minFilter: gl.LINEAR（不需要mipmap），因此采样逻辑能正常工作。

3. 噪声类型影响采样行为：
   移除位置相关噪声或使用常量噪声时，采样坐标要么刚好对齐纹理像素，要么GPU的mipmap选择逻辑没有触发错误层级，因此结果恢复正常——但这只是巧合，不是根本解决办法。

修复方案 #

修改你的纹理创建代码，显式设置过滤模式为不需要mipmap的类型，同时添加边缘钳制避免超出纹理范围的采样错误：

const fbi = twgl.createFramebufferInfo(
  gl,
  [
    {
      attachment: twgl.createTexture(gl, {
        src: Array(dim[0] * dim[1])
          .fill([128, 128, 0, 0])
          .flat(),
        minFilter: gl.LINEAR, // 关键：禁用mipmap依赖的过滤
        magFilter: gl.LINEAR,
        wrapS: gl.CLAMP_TO_EDGE, // 避免采样偏移超出纹理范围
        wrapT: gl.CLAMP_TO_EDGE,
      })
    }
  ],
  ...dim
);

额外验证点 #

• 如果你确实需要使用mipmap（比如后续有缩放场景），可以在创建纹理后调用gl.generateMipmap(gl.TEXTURE_2D)，但对于你的FBO渲染+噪声采样场景，不需要mipmap，所以直接设置LINEAR过滤更高效。
• 确认纹理的格式和数据匹配：你传入的src是RGBA格式的字节数据（0-255），twgl默认会用gl.RGBA作为内部格式，这没问题；如果后续用浮点纹理，需要额外设置type参数。

这样修改后，你的噪声采样就能正确读取FBO中的渲染结果，不会再出现混乱分布的问题了。

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