Read pixels from a WebGL texture

by

You can try attaching the texture to a framebuffer and then calling readPixels on the frame buffer.

at init time

// make a framebuffer
fb = gl.createFramebuffer();

// make this the current frame buffer
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

// attach the texture to the framebuffer.
gl.framebufferTexture2D(
    gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
    gl.TEXTURE_2D, texture, 0);

// check if you can read from this type of texture.
let canRead = (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE);

// Unbind the framebuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

at read time

if (canRead) {
   // bind the framebuffer
   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

   // read the pixels
   gl.readPixels(......);

   // Unbind the framebuffer
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

For textures of format = gl.RGBA, type = gl.UNSIGNED_BYTE canRead should always be true. For other formats and types canRead might be false.

More Related Contents:

  1. Multiple transparent textures on the same mesh face in Three.js
  2. Transparent textures behaviour in WebGL
  3. DAE files image texture doesn’t show up in Aframe when exported from Maya
  4. WebGL – wait for texture to load
  5. Rendering meshes with multiple indices
  6. Learning WebGL and three.js [closed]
  7. Canvas toDataURL() returns blank image
  8. How does the calculation of the light model work in a shader program?
  9. How to stop a requestAnimationFrame recursion/loop?
  10. How to get the absolute position of a vertex in three.js?
  11. What is the logic of binding buffers in webgl?
  12. Android OpenGL Texture Compression
  13. webgl readpixels is always returning 0,0,0,0
  14. Three.js/WebGL: Large spheres appear broken at intersection
  15. Saving canvas to image via canvas.toDataURL results in black rectangle
  16. How to get object in WebGL 3d space from a mouse click coordinate
  17. Javascript Typed Arrays and Endianness
  18. Bitmap too large to be uploaded into a texture
  19. Proper way to detect WebGL support?
  20. How to load a bmp on GLUT to use it as a texture?
  21. Alpha rendering difference between OpenGL and WebGL
  22. How to detect if user has enabled full screen in browser
  23. Bump-map a sphere with a texture map
  24. Multiple textures in GLSL – only one works
  25. Threejs: assign different colors to each vertex in a geometry
  26. Texture splatting with Three.js
  27. CUDA allocation alignment is 256 bytes – seriously?
  28. “Tainted canvases may not be loaded” Cross domain issue with WebGL textures
  29. How do I convert a vec4 rgba value to a float?
  30. Convert an UIImage in a texture

Leave a Comment