0

In WebGL we are able to render to framebufferobject and then use it as a texture so that another shader module is able to load it and calculate bloom effect. In WebGPU we no longer get framebufferobject. The responsibilities of FBO are split into several feature. Now how do we perform bloom effect?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
jiyinyiyong
  • 4,586
  • 7
  • 45
  • 88
  • 2
    FBO's are a native feature of WebGPU, they're just called a "GPURenderPassDescriptor". The info you would have specified in an FBO is specified in the GPURenderPassDescriptor that you pass to [beginRenderPass](https://developer.mozilla.org/en-US/docs/Web/API/GPUCommandEncoder/beginRenderPass) – gman Apr 07 '23 at 02:37
  • also got some useful examples https://webgpu.github.io/webgpu-samples/samples/imageBlur#main.ts on combining renderPipeline and computePipeline. – jiyinyiyong Apr 07 '23 at 09:43

1 Answers1

0

Answering my own question. I did some experiments in https://github.com/Triadica/lagopus.ts/pull/14 and the prototype worked.

However the prototype is really SLOW at current.

I used multiple passes,

  1. render shapes to a texture,
  2. screen out bright pixels to new texture,
  3. move data to pingpong texture,
  4. pingpong rendering maybe,
  5. mix data and render into a real canvas.

since we don't have FBO now, I created a texture for holding render results:

let texture = device.createTexture({
  size: [width, height],
  format: "bgra8unorm",
  usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
});

then I reused large part of code from https://webgpu.github.io/webgpu-samples/samples/imageBlur#main.ts which was used for blur, to make bloom effect. That made the prototype. For the demo of blur, it looks like https://r.tiye.me/Triadica/lagopus.ts-220409/ .

jiyinyiyong
  • 4,586
  • 7
  • 45
  • 88