2

I'm porting a C++/OpenGL application into WebGL and I'm trying to create and configure a framebuffer.

The framebuffer has 3 textures we can write into of types : vec2, vec2, uint. (gl.RG32F, gl.RG32F, gl.R32UI)

Here is how I initialize the framebuffer :

var gbuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, gbuffer);

var z0_texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, z0_texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, output_canvas.width, output_canvas.height, 0, gl.RG, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, z0_texture, 0);

var zn_texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, zn_texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, output_canvas.width, output_canvas.height, 0, gl.RG, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, zn_texture, 0);

var n_texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, n_texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32UI, output_canvas.width, output_canvas.height, 0, gl.RED_INTEGER, gl.UNSIGNED_INT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT2, gl.TEXTURE_2D, n_texture, 0);

gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]);

The framebuffer is incomplete : gl.checkFramebufferStatus(gl.FRAMEBUFFER) returns gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT and shows a warning : Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT1: Attachment has an effective format of RG32F, which is not renderable.

Any idea on what's wrong with my code?

bamia
  • 333
  • 3
  • 15
  • *"Attachment has an effective format of RG32F, which is not renderable"* - What you do not understand? `gl.RG32F` is not a renderable format. Therefore you cannot use it for a framebuffer. You must use a color renderable format. See [OpenGL ES 3.0 Specification - Table 3.13](https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf#page=143&zoom=100,168,666) ([WebGL 2.0](https://www.khronos.org/registry/webgl/specs/latest/2.0/) conforms closely to OpenGL ES 3.0) – Rabbid76 Sep 01 '21 at 16:13
  • I don't want to render these textures. I am using them in post-processing. That's what I did in C++ but can't do the same in WebGL. – bamia Sep 01 '21 at 19:28
  • 1
    No. You cannot do the same in WebGL. In OpenGL `RG32F` is color renderable. However, WebGL is based on OpenGL ES. In OpenGL ES `gl.RG32F` is not a color renderable format. "color renderable" does not mean that you can render these textures. That means you can render into a texture using this format. – Rabbid76 Sep 03 '21 at 20:00
  • @Rabbid76 ok thanks. Good to know – bamia Sep 04 '21 at 13:43

1 Answers1

2

I don't want to render these textures. I am using them in post-processing. That's what I did in C++ but can't do the same in WebGL.

No. You cannot do the same in WebGL.

The error meassage "Attachment has an effective format of RG32F, which is not renderable" - means that gl.RG32F is not a renderable format. Therefore you cannot use it for a framebuffer. You must use a color renderable format. See OpenGL ES 3.0 Specification - Table 3.13 (WebGL 2.0 conforms closely to OpenGL ES 3.0).
You can't do the same thing in WebGL as you can in desktop OpenGL. In desktop OpenGL RG32F is color renderable. However, WebGL is based on OpenGL ES. In OpenGL ES RG32 is not a color renderable format. "color renderable" does not mean that you can render these textures. That means you can render into a texture using this format.

Rabbid76
  • 202,892
  • 27
  • 131
  • 174