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?
-
2FBO'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 beginRenderPassuser128511– user1285112023-04-07 02:37:26 +00:00Commented Apr 7, 2023 at 2:37
-
also got some useful examples webgpu.github.io/webgpu-samples/samples/imageBlur#main.ts on combining renderPipeline and computePipeline.jiyinyiyong– jiyinyiyong2023-04-07 09:43:11 +00:00Commented Apr 7, 2023 at 9:43
Add a comment
|
1 Answer
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,
- render shapes to a texture,
- screen out bright pixels to new texture,
- move data to pingpong texture,
- pingpong rendering maybe,
- 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/ .