Add low level post process example using a custom render pass (bevyengine#6909)

Co-authored-by: JMS55 <[email protected]>
Co-authored-by: Robert Swain <[email protected]>

Author: 3 people

Cargo.toml

@@ -1385,11 +1385,21 @@ name = "post_processing"
 path = "examples/shader/post_processing.rs"
 
 [package.metadata.example.post_processing]
-name = "Post Processing"
+name = "Post Processing - Render To Texture"
 description = "A custom post processing effect, using two cameras, with one reusing the render texture of the first one"
 category = "Shaders"
 wasm = true
 
+[[example]]
+name = "post_process_pass"
+path = "examples/shader/post_process_pass.rs"
+
+[package.metadata.example.post_process_pass]
+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"
+wasm = true
+
 [[example]]
 name = "shader_defs"
 path = "examples/shader/shader_defs.rs"

assets/shaders/post_process_pass.wgsl

@@ -0,0 +1,48 @@
+// This shader computes the chromatic aberration effect
+
+#import bevy_pbr::utils
+
+// Since post processing is a fullscreen effect, we use the fullscreen vertex shader provided by bevy.
+// This will import a vertex shader that renders a single fullscreen triangle.
+//
+// A fullscreen triangle is a single triangle that covers the entire screen.
+// The box in the top left in that diagram is the screen. The 4 x are the corner of the screen
+//
+// Y axis
+//  1 |  x-----x......
+//  0 |  |  s  |  . ´
+// -1 |  x_____x´
+// -2 |  :  .´
+// -3 |  :´
+//    +---------------  X axis
+//      -1  0  1  2  3
+//
+// As you can see, the triangle ends up bigger than the screen.
+//
+// You don't need to worry about this too much since bevy will compute the correct UVs for you.
+#import bevy_core_pipeline::fullscreen_vertex_shader
+
+@group(0) @binding(0)
+var screen_texture: texture_2d<f32>;
+@group(0) @binding(1)
+var texture_sampler: sampler;
+struct PostProcessSettings {
+    intensity: f32,
+}
+@group(0) @binding(2)
+var<uniform> settings: PostProcessSettings;
+
+@fragment
+fn fragment(in: FullscreenVertexOutput) -> @location(0) vec4<f32> {
+    // Chromatic aberration strength
+    let offset_strength = settings.intensity;
+
+    // Sample each color channel with an arbitrary shift
+    return vec4<f32>(
+        textureSample(screen_texture, texture_sampler, in.uv + vec2<f32>(offset_strength, -offset_strength)).r,
+        textureSample(screen_texture, texture_sampler, in.uv + vec2<f32>(-offset_strength, 0.0)).g,
+        textureSample(screen_texture, texture_sampler, in.uv + vec2<f32>(0.0, offset_strength)).b,
+        1.0
+    );
+}
+

examples/README.md

@@ -278,7 +278,8 @@ Example | Description
 [Material - GLSL](../examples/shader/shader_material_glsl.rs) | A shader that uses the GLSL shading language
 [Material - Screenspace Texture](../examples/shader/shader_material_screenspace_texture.rs) | A shader that samples a texture with view-independent UV coordinates
 [Material Prepass](../examples/shader/shader_prepass.rs) | A shader that uses the various textures generated by the prepass
-[Post Processing](../examples/shader/post_processing.rs) | A custom post processing effect, using two cameras, with one reusing the render texture of the first one
+[Post Processing - Custom Render Pass](../examples/shader/post_process_pass.rs) | A custom post processing effect, using a custom render pass that runs after the main pass
+[Post Processing - Render To Texture](../examples/shader/post_processing.rs) | A custom post processing effect, using two cameras, with one reusing the render texture of the first one
 [Shader Defs](../examples/shader/shader_defs.rs) | A shader that uses "shaders defs" (a bevy tool to selectively toggle parts of a shader)
 [Texture Binding Array (Bindless Textures)](../examples/shader/texture_binding_array.rs) | A shader that shows how to bind and sample multiple textures as a binding array (a.k.a. bindless textures).