Reading pixels in WebGLTexture (WebGL rendering for texture)

Question

I create the texture on the GPU and pass it to my own framebuffer object. It works fine, and the texture is displayed in WebGLTexture, which I can pass to other shaders. However, I want to access the WebGLTexture pixels in javascript. Is there any way to do this?

I am currently using gl.ReadPixels to read pixels after I have drawn a texture for my framebuffer. This works fine, but wouldn’t it be better for me to directly access pixels in a WebGLTextureObject?

I'm trying to accomplish this: I have a Perlin noise reduction shaker that can display a high def heightmap graphic file and a normal map on the screen. I want to pass a height map to the CPU so that I can generate vertices for the grid. I could, of course, just position the vertices in the vertex shader, but I need this on the CPU to detect collisions.

Hope my question is clear. Any feedback is appreciated!

Thanks!

Answer 1

You can read pixels from most textures by attaching them to the 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); }