[Q]Draw to screen works good but FBO not.

[budblack]

Problem

When I use regl command with a simple shader code, and set a framebuffer property.The result pixel always filled with ZERO.

I think there's sth went wrong in my code.

  async testReglFbo() {
    const { ctx, service } = this;
    const { tile } = service;
    const width = 256, height = 256, channels = 4;
    const gl = tile.createGl(width, height)
    const regl = tile.createRegl(gl);

    /** ************************************************
     *  Do not care about the above codes.
     ***************************************************/
    const fbo = regl.framebuffer({ width, height });
    const cmd = regl({
      // ONLY IF I DON'T SET `framebuffer` PROPERTY, I CAN GET THE PIXELS.
      framebuffer: fbo,
      vert: `
        attribute vec2 position;
        void main() {
            gl_Position = vec4(position, 0, 1);
        }
      `,
      frag: `
        void main() {
          gl_FragColor = vec4(1, 0, 0, 1);
        }
      `,
      attributes: {
        position: [
          [-.9, -.9],
          [-.9, .9],
          [.9, -.9]
        ],
      },
      viewport: { x: 0, y: 0, width, height, },
      count: 3,
      primitive: 'triangles'
    });
    const pixels: Uint8Array = await new Promise(resolve => {
      cmd({}, () => {
        regl.draw();
        // ONLY IF I DON'T SET `framebuffer` PROPERTY, I CAN GET THE PIXELS.
        const pixels = regl.read();
        resolve(pixels);
      });
    });
    /** ************************************************
     *  Do not care about the following codes.
     ***************************************************/
    const sp = sharp(pixels, { raw: { width, height, channels } });
    const data = await sp.clone().png().toBuffer();
    ctx.set({ 'Content-Type': "image/png" });
    ctx.body = data;
  }

With FBO

Without FBO

[budblack]

I want to read the fbo data. Should I call function regl.read() in a command call situation?
Or there is some mistake in my code cause fbo not be filled?

[budblack]

OMG, works if I set depth: false of fbo.

const fbo = regl.framebuffer({ width, height, depth: false });

BUT WHY?

[ltzehan]

Just as an FYI for anyone with the same issue: when depth: false, there is no depth attachment and all fragments will pass the depth test so this appears to work until more complex geometries come into the picture.

The issue here is that when the depth buffer is enabled, the default value of 0 is already representing an extremely close depth so no fragments are rendered