[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?