Start a built-in postprocessing stack, and implement chromatic aberration in it. (#13695)

This commit creates a new built-in postprocessing shader that's designed
to hold miscellaneous postprocessing effects, and starts it off with
chromatic aberration. Possible future effects include vignette, film
grain, and lens distortion.

[Chromatic aberration] is a common postprocessing effect that simulates
lenses that fail to focus all colors of light to a single point. It's
often used for impact effects and/or horror games. This patch uses the
technique from *Inside* ([Gjøl & Svendsen 2016]), which allows the
developer to customize the particular color pattern to achieve different
effects. Unity HDRP uses the same technique, while Unreal has a
hard-wired fixed color pattern.

A new example, `post_processing`, has been added, in order to
demonstrate the technique. The existing `post_processing` shader has
been renamed to `custom_post_processing`, for clarity.

[Chromatic aberration]:
https://en.wikipedia.org/wiki/Chromatic_aberration

[Gjøl & Svendsen 2016]:
https://github.com/playdeadgames/publications/blob/master/INSIDE/rendering_inside_gdc2016.pdf

![Screenshot 2024-06-04
180304](https://github.com/bevyengine/bevy/assets/157897/3631c64f-a615-44fe-91ca-7f04df0a54b2)

![Screenshot 2024-06-04
180743](https://github.com/bevyengine/bevy/assets/157897/ee055cbf-4314-49c5-8bfa-8d8a17bd52bb)

## Changelog

### Added

* Chromatic aberration is now available as a built-in postprocessing
effect. To use it, add `ChromaticAberration` to your camera.

Author: pcwalton

Cargo.toml

@@ -2237,11 +2237,11 @@ category = "Shaders"
 wasm = true
 
 [[example]]
-name = "post_processing"
-path = "examples/shader/post_processing.rs"
+name = "custom_post_processing"
+path = "examples/shader/custom_post_processing.rs"
 doc-scrape-examples = true
 
-[package.metadata.example.post_processing]
+[package.metadata.example.custom_post_processing]
 name = "Post Processing - Custom Render Pass"
 description = "A custom post processing effect, using a custom render pass that runs after the main pass"
 category = "Shaders"
@@ -3284,6 +3284,17 @@ description = "Handles input, physics, and rendering in an industry-standard way
 category = "Movement"
 wasm = true
 
+[[example]]
+name = "post_processing"
+path = "examples/3d/post_processing.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.post_processing]
+name = "Built-in postprocessing"
+description = "Demonstrates the built-in postprocessing features"
+category = "3D Rendering"
+wasm = true
+
 [profile.wasm-release]
 inherits = "release"
 opt-level = "z"

crates/bevy_core_pipeline/src/core_2d/mod.rs

@@ -18,6 +18,7 @@ pub mod graph {
         MainTransparentPass,
         EndMainPass,
         Bloom,
+        PostProcessing,
         Tonemapping,
         Fxaa,
         Smaa,

crates/bevy_core_pipeline/src/core_3d/mod.rs

@@ -30,6 +30,7 @@ pub mod graph {
         Bloom,
         AutoExposure,
         DepthOfField,
+        PostProcessing,
         Tonemapping,
         Fxaa,
         Smaa,

crates/bevy_core_pipeline/src/lib.rs

@@ -19,6 +19,7 @@ pub mod fullscreen_vertex_shader;
 pub mod fxaa;
 pub mod motion_blur;
 pub mod msaa_writeback;
+pub mod post_process;
 pub mod prepass;
 mod skybox;
 pub mod smaa;
@@ -60,6 +61,7 @@ use crate::{
     fxaa::FxaaPlugin,
     motion_blur::MotionBlurPlugin,
     msaa_writeback::MsaaWritebackPlugin,
+    post_process::PostProcessingPlugin,
     prepass::{DeferredPrepass, DepthPrepass, MotionVectorPrepass, NormalPrepass},
     smaa::SmaaPlugin,
     tonemapping::TonemappingPlugin,
@@ -99,6 +101,7 @@ impl Plugin for CorePipelinePlugin {
                 MotionBlurPlugin,
                 DepthOfFieldPlugin,
                 SmaaPlugin,
+                PostProcessingPlugin,
             ));
     }
 }

crates/bevy_core_pipeline/src/post_process/chromatic_aberration.wgsl

@@ -0,0 +1,92 @@
+// The chromatic aberration postprocessing effect.
+//
+// This makes edges of objects turn into multicolored streaks.
+
+#define_import_path bevy_core_pipeline::post_processing::chromatic_aberration
+
+// See `bevy_core_pipeline::post_process::ChromaticAberration` for more
+// information on these fields.
+struct ChromaticAberrationSettings {
+    intensity: f32,
+    max_samples: u32,
+    unused_a: u32,
+    unused_b: u32,
+}
+
+// The source framebuffer texture.
+@group(0) @binding(0) var chromatic_aberration_source_texture: texture_2d<f32>;
+// The sampler used to sample the source framebuffer texture.
+@group(0) @binding(1) var chromatic_aberration_source_sampler: sampler;
+// The 1D lookup table for chromatic aberration.
+@group(0) @binding(2) var chromatic_aberration_lut_texture: texture_2d<f32>;
+// The sampler used to sample that lookup table.
+@group(0) @binding(3) var chromatic_aberration_lut_sampler: sampler;
+// The settings supplied by the developer.
+@group(0) @binding(4) var<uniform> chromatic_aberration_settings: ChromaticAberrationSettings;
+
+fn chromatic_aberration(start_pos: vec2<f32>) -> vec3<f32> {
+    // Radial chromatic aberration implemented using the *Inside* technique:
+    //
+    // <https://github.com/playdeadgames/publications/blob/master/INSIDE/rendering_inside_gdc2016.pdf>
+
+    let end_pos = mix(start_pos, vec2(0.5), chromatic_aberration_settings.intensity);
+
+    // Determine the number of samples. We aim for one sample per texel, unless
+    // that's higher than the developer-specified maximum number of samples, in
+    // which case we choose the maximum number of samples.
+    let texel_length = length((end_pos - start_pos) *
+        vec2<f32>(textureDimensions(chromatic_aberration_source_texture)));
+    let sample_count = min(u32(ceil(texel_length)), chromatic_aberration_settings.max_samples);
+
+    var color: vec3<f32>;
+    if (sample_count > 1u) {
+        // The LUT texture is in clamp-to-edge mode, so we start at 0.5 texels
+        // from the sides so that we have a nice gradient over the entire LUT
+        // range.
+        let lut_u_offset = 0.5 / f32(textureDimensions(chromatic_aberration_lut_texture).x);
+
+        var sample_sum = vec3(0.0);
+        var modulate_sum = vec3(0.0);
+
+        // Start accumulating samples.
+        for (var sample_index = 0u; sample_index < sample_count; sample_index += 1u) {
+            let t = (f32(sample_index) + 0.5) / f32(sample_count);
+
+            // Sample the framebuffer.
+            let sample_uv = mix(start_pos, end_pos, t);
+            let sample = textureSampleLevel(
+                chromatic_aberration_source_texture,
+                chromatic_aberration_source_sampler,
+                sample_uv,
+                0.0,
+            ).rgb;
+
+            // Sample the LUT.
+            let lut_u = mix(lut_u_offset, 1.0 - lut_u_offset, t);
+            let modulate = textureSampleLevel(
+                chromatic_aberration_lut_texture,
+                chromatic_aberration_lut_sampler,
+                vec2(lut_u, 0.5),
+                0.0,
+            ).rgb;
+
+            // Modulate the sample by the LUT value.
+            sample_sum += sample * modulate;
+            modulate_sum += modulate;
+        }
+
+        color = sample_sum / modulate_sum;
+    } else {
+        // If there's only one sample, don't do anything. If we don't do this,
+        // then this shader will apply whatever tint is in the center of the LUT
+        // texture to such pixels, which is wrong.
+        color = textureSampleLevel(
+            chromatic_aberration_source_texture,
+            chromatic_aberration_source_sampler,
+            start_pos,
+            0.0,
+        ).rgb;
+    }
+
+    return color;
+}