Read pixels in WebGLTexture (Rendering WebGL to texture)

Question

I'm generating a texture on the GPU and rendering it to my own framebuffer object. It works fine and the texture is rendered to a WebGLTexture that I can pass to other shaders. However I want to access the WebGLTexture pixels in javascript. Is there a way to accomplish that?

At the moment I'm using gl.ReadPixels to read the pixels after I've drawn the texture to my framebuffer. That works fine but wouldn't it be better if I could directly access the pixels in the WebGLTextureObject?

What I'm trying to accomplish is this: I have GLSL perlin noise shader that can render high def heightmap and normal map on the GPU. I want to pass the heightmap to the CPU so that I can generate the vertices for the mesh. I could of course just position the vertices in the vertex shader but I need it in the CPU for collision detection.

I hope my question is clear. Any feedback is welcome!

Thanks!

Answer 1

You can read the pixels out of most textures by attaching them to a framebuffer.

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