WebGL 帧缓冲区 ClearColor 仅影响 (0,0) 像素

Posted 2023-02-22

【中文标题】WebGL 帧缓冲区 ClearColor 仅影响 (0,0) 像素

【英文标题】：WebGL Framebuffer ClearColor Only Affects (0,0) Pixel

【发布时间】：2014-12-03 09:26:03

【问题描述】：

我正在尝试使用 WebGL 将场景渲染到帧缓冲区并查看指定像素（被点击的像素）的颜色值。问题是当我尝试使用 gl.readPixels 所有像素但 (0,0) 返回空值 (0,0,0,0) 获取像素数据时。 (0,0) 像素（左上角）返回预期的颜色，这是用于帧缓冲区的清晰颜色。这是我正在使用的代码的主要部分：

gl.bindFramebuffer( gl.FRAMEBUFFER, fbo );
gl.viewport( 0, 0, canvas.width, canvas.height );

gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
gl.clearDepth( 1.0 );
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

// render code goes here

var pixelData = new Uint8Array( 4 );
gl.readPixels( screenPositionX, screenPositionY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixelData );

gl.bindFramebuffer( gl.FRAMEBUFFER, null );

如果我在渲染场景上使用 gl.readPixels，我会得到正确的结果，但当我在帧缓冲区上使用它时不会。我想这意味着我可以渲染帧缓冲区，然后使用 gl.readPixels，但我不希望这样做，因为帧缓冲区不应该被看到，而是用于数据收集。有什么信息或建议吗？

编辑： 我找到了解决方案并在下面发布。

【问题讨论】：

你设置了视口吗？

我在使用和不使用 gl.viewport 的情况下都试过了，得到了相同的结果，但我会继续更新上面的代码以显示这一点。

你能显示你在帧缓冲区中添加了哪些附件吗？帧缓冲区只是附件（渲染缓冲区和/或纹理）的集合。渲染缓冲区和纹理用于保存您尝试读取的像素。

【参考方案1】：

我找到了解决方案，这是那些愚蠢的错误之一。当我为颜色附件附加纹理时，我附加的纹理只有 1x1 像素。这可以解释为什么 (0,0) 坐标是唯一获得准确数据的坐标。所有其他像素都被认为在纹理范围之外。一旦我将纹理大小固定到画布的大小，一切正常。感谢 gman 为我指明了查看附件的正确方向。