Why does this use of the WebGL framebuffer force FRAMEBUFFER_UNSUPPORTED?

Question

I am trying to create a WebGL selection buffer;

Can anyone see what I'm doing wrong here?

I get "Incomplete framebuffer: FRAMEBUFFER_UNSUPPORTED" in Mozilla / 5.0 (X11; Linux x86_64; rv: 2.0b3pre). Gecko / 20100724 Minefield / 4.0b3pre and Chrome 5.0.375.99. It should be obvious and look directly at me, but I can’t see it. It seems to have power, has texture ... but is "unsupported"?

var gl = canvas.context; var frameBuf = gl.createFramebuffer(); var renderBuf = gl.createRenderbuffer(); var pickTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, pickTexture); var width = 400; var height = 400; try { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, width, height, 0, gl.RGB, gl.UNSIGNED_BYTE, null); } catch (e) { // Null rejected var tex = new WebGLUnsignedByteArray(width * height * 3); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, width, height, 0, gl.RGB, gl.UNSIGNED_BYTE, tex); } gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuf); gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuf); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height); gl.bindRenderbuffer(gl.RENDERBUFFER, null); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, pickTexture, 0); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderBuf); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuf); if (!gl.isFramebuffer(frameBuf)) { throw("Invalid framebuffer"); } var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER); switch (status) { case gl.FRAMEBUFFER_COMPLETE: break; case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT: throw("Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_ATTACHMENT"); break; case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: throw("Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT"); break; case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS: throw("Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_DIMENSIONS"); break; case gl.FRAMEBUFFER_UNSUPPORTED: throw("Incomplete framebuffer: FRAMEBUFFER_UNSUPPORTED"); break; default: throw("Incomplete framebuffer: " + status); } 

Answer 1

The solution provided by Kenneth Russell is fixed by specifying these settings for the texture:

 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 

Answer 2

Change width / height to 512 instead of 400? ES needs a two-phase iirc framebuffer structure.