javascript - Unable to create a framebuffer with an RGBA32F texture - Stack Overflow

I'm unable to create a framebuffer from a texture with internal format RGBA32F.

The following code logs test.js:38 Framebuffer is incomplete. Status: 36054 in the console

function main() {
    const canvas = document.getElementById('canvas');
    const gl = canvas.getContext('webgl2'); // Use webgl2 for native RGBA32F support
    if (!gl) {
        console.error("WebGL 2.0 not supported.");
        return;
    }

    const targetTextureWidth = 256;
    const targetTextureHeight = 256;
    const targetTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, targetTexture);

    {
        const level = 0;
        const internalFormat = gl.RGBA32F;
        const border = 0;
        const format = gl.RGBA;
        const type = gl.FLOAT;
        const data = null;
        gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, targetTextureWidth, targetTextureHeight, border, format, type, data);
    }

    // Create and bind the framebuffer
    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

    // attach the texture as the first color attachment
    const attachmentPoint = gl.COLOR_ATTACHMENT0;
    const level = 0;
    gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);

    // Check framebuffer status
    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
    if (status !== gl.FRAMEBUFFER_COMPLETE) {
        console.error("Framebuffer is incomplete. Status: " + status);
        return;
    }
    console.log("Framebuffer is complete!");
}
main();

If I use a different combination of internalFormat, format and type from .0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE, which does not use 32 bit floats, the framebuffer will be completed.

I'm unable to create a framebuffer from a texture with internal format RGBA32F.

The following code logs test.js:38 Framebuffer is incomplete. Status: 36054 in the console

function main() {
    const canvas = document.getElementById('canvas');
    const gl = canvas.getContext('webgl2'); // Use webgl2 for native RGBA32F support
    if (!gl) {
        console.error("WebGL 2.0 not supported.");
        return;
    }

    const targetTextureWidth = 256;
    const targetTextureHeight = 256;
    const targetTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, targetTexture);

    {
        const level = 0;
        const internalFormat = gl.RGBA32F;
        const border = 0;
        const format = gl.RGBA;
        const type = gl.FLOAT;
        const data = null;
        gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, targetTextureWidth, targetTextureHeight, border, format, type, data);
    }

    // Create and bind the framebuffer
    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

    // attach the texture as the first color attachment
    const attachmentPoint = gl.COLOR_ATTACHMENT0;
    const level = 0;
    gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);

    // Check framebuffer status
    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
    if (status !== gl.FRAMEBUFFER_COMPLETE) {
        console.error("Framebuffer is incomplete. Status: " + status);
        return;
    }
    console.log("Framebuffer is complete!");
}
main();

If I use a different combination of internalFormat, format and type from https://registry.khronos.org/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE, which does not use 32 bit floats, the framebuffer will be completed.

• javascript
• webgl
• webgl2

Share Improve this question Follow edited 23 hours ago Rufus asked yesterday RufusRufus 4344 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

gl.getExtension('EXT_color_buffer_float'); Allows framebuffer creation with textures that have 32 bit float internal types.

EXT_color_buffer_float is not mentioned in the mdn web docs or the specification, despite 32 bit float types being listed in both.