Adds Box, Gaussian, Kawase and Bokeh Blur

[joelawm]

Objective

The goal of this PR is to introduce several different Blurs to Bevy. The Blur Algorithms added are Box, Gaussian, Kawase, and Bokeh (Frostbite Engines implementation kinda). The reason I added so many is that they're easy to add and very cheap to keep in the engine, and secondly, to give the most artistic freedom to blurs we can use in our games.

This PR solves #24411.

Solution

The solution was to add in 4 seperate WGSL shaders algorithms to be able to blur the screen. Each algorithm has its trade-offs between speed and visual fidelity.

Box Blur

A separable box blur, every pixel in the kernel contributes equally. A somewhat expensive and visually crude, producing visible streaks for large radii. Runs as a horizontal and a vertical pass.

Gaussian Blur

A separable Gaussian blur. An expensive but way more beautiful blur algorithm. Uses bilinear filtering to halve the number of texture samples. Runs as a horizontal and a vertical pass.

Kawase Blur

A dual Kawase blur: downsamples the scene through a chain of progressively half-resolution textures and upsamples back, blurring at each step. Produces very smooth, wide blurs at a fraction of the cost of an equally wide Gaussian, since most passes run at reduced resolution. The strength grows roughly exponentially with mip_count.

Bokeh Blur

A bokeh blur that mimics a camera aperture: out-of-focus highlights bloom into bright, hard-edged discs instead of smearing out.

Research

When doing research for this, I already had an updated Bevy Blur Regions Plugin, so that was my starting point. I then followed the article in the issue to implement the rest. I also utilized this Video by Computerphiles to get a good explanation on how the Bokeh Blur from DICE's Frostbite engine 'probably' works. All that being said, this was a culmination of a lot of information that has been added to this PR. So when reviewing if something doesn't make sense, feel free to add a review and I'll fix it or explain it better.

Testing

• Testing done?
  Testing was done using the added example in the /examples folder. The example demonstrates what values can be changed to affect the strength of the blur.

• Are there any parts that need more testing?
  I would like to test with some harder examples like Bloom and Depth of Field so that we can make sure lights work as expected, as well as being able to blur out distant objects but keep closer ones in focus. This isn't a blocker to using the PR, though, and can come in subsequent patches if needed.

• How can other people (reviewers) test your changes? Is there anything specific they need to know?
  I am utilizing Bevy Feathers just so I can add a built-in slider for changing the values easily.
  cargo run --example blur --features bevy_feathers

---

Showcase

Box Blur

Gaussian Blur

Kawase Blur

Bokeh Blur

Coding Showcase

Minimum Code Snippet

use bevy::prelude::*;
use bevy::ui_render::{BlurRegion, BlurRegionCamera, BlurSetting};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands) {
    // 3D scene (or Camera2d works too)
    commands.spawn((
        Camera3d::default(),
        BlurRegionCamera::new(BlurSetting::GAUSSIAN),
    ));

    // Any UI node tagged with BlurRegion becomes a frosted-glass pane
    commands.spawn((
        BlurRegion,
        Node {
            width: Val::Px(300.0),
            height: Val::Px(200.0),
            ..default()
        },
        BackgroundColor(Color::srgba(1.0, 1.0, 1.0, 0.1)),
    ));
}

[SludgePhD]

(fyi, the images for the box blur and gaussian blur are swapped)

Is there an explanation for the hue shift introduced by the bokeh blur? Maybe the clamping in the shader isn't working right?

[joelawm]

(fyi, the images for the box blur and gaussian blur are swapped)

Is there an explanation for the hue shift introduced by the bokeh blur? Maybe the clamping in the shader isn't working right?

Good callout, after staring at blurs for so long, everything sort of blended together haha. Before, I was just clamping to 0.0 value, which I thought would just stabilize the color. Now I am clamping to BT.709, which should allow for stabilizing of the colors.

The screenshots still look a little off, but when you run the example, the color shift does appear to be gone now. I think my example with the moving lights is just hard to capture how it looks in a static state.