Need an advice on how to implement a feature like backdrop-filter in CSS

[st0rmbtw]

Hi! I got a little bored, so I decided to make a GUI library with LLGL as a low-level rendering engine.
To test my GUI library I decided to recreate the desktop screen of macOS.
Everything was fine until I got to the point when I needed to draw a rectangle with the blurred background.

I've looked around for an example for this in any programming language and with any rendering API on the internet, but haven't find one.

So I've implemented it myself and it works. The algorithm I came up with is:

Init Phase:

1. Create two ping-pong framebuffers with 4 times lower resolution than swap chain's for a gaussian blur pass.
2. Create one framebuffer with native resolution for upscaling the result of the blur pass.

Blur Phase

1. Copy current swap chain image into the framebuffer with native resolution;
2. Do horizontal gaussian blur pass reading from the native resolution framebuffer and writing to ping-pong framebuffer A.
3. Do vertical gaussian blur pass reading from the ping-pong framebuffer A and writing to ping-pong framebuffer B.
4. Upscale the ping-pong framebuffer B with a simple blit shader writing to the framebuffer with native resolution.

Render Phase:

1. Gather all rectangles with blur effect that are on the same layer.
2. Go to the Blur Phase.
3. Render the rectangles we gathered to the native resolution framebuffer writing to the stencil buffer.
4. Most terrible part: Blit the native resolution framebuffer to itself with the mask in the stencil buffer.
5. Blit the native resolution framebuffer to the swap chain with blending.

But I really don't like my solution. I can't think of a better approach.
Please, help me.

[st0rmbtw]

My progress so far:

[LukasBanana]

In that code I'm writing to the texture at the same time as reading it. It just feels wrong to me.

That definitely is wrong. You can only read and write a texture at the same time if you bind it with BindFlags::Storage flags, but you cannot bind it to the output-merger stage, i.e. as a render pass target while also reading the texture.

The warning you're seeing should actually be a thing of the past in LLGL, but perhaps the binding table gets confused when you try to bind the resources to BeginRenderPass and SetResource within the same render pass.

With the bounding box, I just meant that you can find a rectangle that effectively defines a scissor rectangle. So instead of drawing a fullscreen triangle you can run your shaders only on a portion of your framebuffer. You would still need a stencil buffer to mask out pixels for rounded corners, but the bounding box can reduce the size of compute/pixel shader invocations. Since SetViewport and SetScissor have to known their parameters at the time you record the command, you won't be able to use the bounding box that your compute shader determined, but you can forward those parameters to an indirect dispatch command:

1. Dispatch compute shader to determine the extent of the shape (i.e. a bounding box/rect) and generate the parameters for the next compute invocation
2. Dispatch an indirect compute command using the previously determined parameters.

The IndirectDraw example makes use of indirect draw commands, but the idea is the same for indirect compute commands.

[st0rmbtw]

You would still need a stencil buffer to mask out pixels for rounded corners, but the bounding box can reduce the size of compute/pixel shader invocations.

Ah, now I get this part.

One thing I don't understand though is how it will be faster? I would need to use fragment shader anyway to blit the texture that was generated with compute shader into the swap chain, since I can't access the swap chain's texture.

[LukasBanana]

Yes, you would still need to blit it back into the swap-chain, but if you have to read and write a texture at the same time, you can hardly avoid an extra step. Do you have any performance measures so far? I can image that this is indeed quite an expensive task, if you truly need each layer to blur its previous layer, e.g. when you have 10 layers (windows or other GUI widgets) stacked on top of each other and each of these have to blur the previous layer. Not sure how Windows 7 used to render this, but I recall you could see such effects.

[st0rmbtw]

I haven't made a deep performance profiling yet, but the maximum number of blurred quads I could have at stable 60 FPS is 200 (each on a different layer, so it's 200 draw calls with 200 blur passes).

UPD:

Forgot to mention my PC's specs.
GPU: RTX 2060
CPU: Ryzen 7 2700x

[LukasBanana]

200 blur passes sounds rather demanding if you run over the entire framebuffer in full resolution. I suggest you try to reduce the size of each blur pass if you only need to cover a portion of the framebuffer. Maybe also think about a maximum number of blur layers. Why would you need to blur the background 200 times if you can't see a difference after maybe 16 layers?