读取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);
}