Why does this WebGL framebuffer usage throw FRAMEBUFFER_UNSUPPORTED?

Question

I'm trying to create a WebGL pick buffer;

Can anyone see what I'm doing wrong here?

I'm getting "Incomplete framebuffer: FRAMEBUFFER_UNSUPPORTED" on Mozilla/5.0 (X11; Linux x86_64; rv:2.0b3pre) Gecko/20100724 Minefield/4.0b3pre and Chrome 5.0.375.99. Must be obvious and staring right at me but I cant see it. It's apparently valid, has a texture..but "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

Change width/height to 512 instead of 400 maybe? ES needs power-of-two framebuffer textures iirc.

Answer 2

Solution provided by Kenneth Russell - 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);