Question

I am trying to do picking in WebGl. I have two shapes rendered along with different texture mapped on each. I am trying to grab pixel on certain co-ordinates. Here is the example.

var pixelValues = new Uint8Array(4);
gl.readPixels(10, 35, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixelValues);
console.log(pixelValues);

But pixelValues always contain [0,0,0,0]. What am I doing wrong? Do I need to do something related to framebuffer?

Answer 1

According to WebGL specs, you need to call getContext setting the preserveDrawingBuffer flag, like:

var ctx = canvas.getContext("webgl", {preserveDrawingBuffer: true});

if you plan to read the pixels after exiting the event where the GL context is rendered. This prevents the drawing buffer (color, depth, stencil) from being cleared after they are draw to screen. Keep in mind that settings this may cause a performance penalty.

Alternatively, you can read the pixels before they are presented, which should also work.