I'm trying to do picking with openGL. In a first time, before trying ray tracing, I'm trying to use the alpha channel (I only have a few items in my scene) to select the item corresponding to the cursor.

I saw that ReadPixels allows to get back the colors from a pixel, so i tried it. Here is a part of my code (context initialization, mouseDown event function).

Code :
	  var lastMouseX = null;
	  var lastMouseY = null;
	  var buff = new Uint8Array(4);
	  var currentSelection=0.0;
	  function handleMouseDown(event) {
	    mouseDown = true;
	    lastMouseX = event.clientX;
	    lastMouseY = event.clientY;
	    gl.readPixels(lastMouseX,lastMouseY,1,1,RGBA,gl.UNSIGNED_BYTE, buff);

Code :
var gl;
    function initGL(canvas) {
        try {
            gl = canvas.getContext("experimental-webgl",{preserveDrawingBuffer: true}) || canvas.getContext("webgl",{preserveDrawingBuffer: true});
            gl.viewportWidth = canvas.width;
            gl.viewportHeight = canvas.height;
        } catch (e) {
        if (!gl) {
            alert("Could not initialise WebGL, sorry :-(");

So i define an item with a buffer color fulled of (x.x,y.y,z.z,0.6), and put a rotation conditioned by a "if (currentSelection==0.6 || currentSelection==153)". But when I test it it doesn't work. After a few tries, it seems than my readPixels() makes the handleMouseDown(event) bug, indeed every line I add after readPixel() doesn't work. And I don't understand where the issue is as my buffer has good format and as I make sure of keeping the drawing buffer.

Anyone has an idea ?

PS : the mozOpaque for the context is for Firefox, to the canvas remains opaque.