Add multisampled framebuffer support

[vorg]

This can be achieved by adding multisampled render buffer as render target and then blitting it to a fbo with normal texture as explained in webgl-framebuffer-multisampling on StackOverflow.

There is a WIP msaa example that uses raw gl calls for renderbuffers and blitting. ctx.renderbuffer is already implemented so code could be simplified.

My idea for ideal api would be probable single samples param and allocation of intermediate render buffers happening automatically.

const captureCmd = {
   pass: ctx.pass({
      color: [colorTexture],
      depth: depthTexture,
      samples: 4
   })
}

ctx.submit(captureCmd, () => {
  //draw scene
})

otherwise we would need to invent new blit pass type and do sth like

const colorRenderbuffer = ctx.renderBuffer({ width, height, pixelFormat: ctx.PixelFormat.RGBA8, samples: 4 })
const depthRenderbuffer = ctx.renderBuffer({ width, height, pixelFormat: ctx.PixelFormat.DEPTH_COMPONENT16, samples: 4 })
const multisampledFbo = ctx.framebuffer({ color: [colorRenderbuffer], depth: depthRenderbuffer })
const captureCmd = {
   pass: ctx.pass({
      framebuffer: multisampledFbo
   })
}

ctx.submit(captureCmd, () => {
  //draw scene
})

const blitPassCmd = {
   pass: ctx.pass({
      readFramebuffer: multisampledFbo
      color: [colorTexture],
      depth: depthTexture,
   })
}

ctx.submit(blitPassCmd)

[vorg]

I wonder what's the way to do it in WebGPU. Maybe it could provide some guidance for the API.

[dmnsgn]

115

[vorg]

Closed as duplicate