关于javascript：读取WebGLTexture中的像素(将WebGL渲染为纹理)


Read pixels in WebGLTexture (Rendering WebGL to texture)

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

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

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

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

谢谢！

相关讨论

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

1
2
3
4
5
6
7
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);
}

相关讨论