javascript - 读取 WebGLTexture 中的像素（将 WebGL 渲染到纹理）

Question

我在 GPU 上生成纹理并将其渲染到我自己的帧缓冲区对象。它工作正常，纹理被渲染到 WebGLTexture，我可以传递给其他着色器。但是我想在 javascript 中访问 WebGLTexture 像素。有没有办法做到这一点？

目前，在将纹理绘制到帧缓冲区后，我正在使用 gl.ReadPixels 读取像素。这很好，但如果我可以直接访问 WebGLTextureObject 中的像素不是更好吗？

我想要完成的是：我有 GLSL perlin 噪声着色器，可以在 GPU 上渲染高清高度图和法线贴图。我想将高度图传递给 CPU，以便为网格生成顶点。我当然可以将顶点定位在顶点着色器中，但我需要它在 CPU 中进行碰撞检测。

我希望我的问题很清楚。欢迎任何反馈！

谢谢！

Answer 1

您可以通过将像素附加到帧缓冲区来从大多数纹理中读取像素。

var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
  var pixels = new Uint8Array(width * height * 4);
  gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
}