Add FullscreenMaterial

Cargo.toml

@@ -3113,6 +3113,17 @@ description = "Demonstrates how to write a specialized mesh pipeline"
 category = "Shaders"
 wasm = true
 
+[[example]]
+name = "fullscreen_material"
+path = "examples/shader_advanced/fullscreen_material.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.fullscreen_material]
+name = "Fullscreen Material"
+description = "Demonstrates how to write a fullscreen material"
+category = "Shaders Advanced"
+wasm = true
+
 # Stress tests
 [[package.metadata.example_category]]
 name = "Stress Tests"
@@ -3992,6 +4003,9 @@ name = "fallback_image"
 path = "examples/shader/fallback_image.rs"
 doc-scrape-examples = true
 
+[package.metadata.example.fallback_image]
+hidden = true
+
 [[example]]
 name = "reflection_probes"
 path = "examples/3d/reflection_probes.rs"
@@ -4003,9 +4017,6 @@ description = "Demonstrates reflection probes"
 category = "3D Rendering"
 wasm = false
 
-[package.metadata.example.fallback_image]
-hidden = true
-
 [package.metadata.example.window_resizing]
 name = "Window Resizing"
 description = "Demonstrates resizing and responding to resizing a window"

assets/shaders/fullscreen_effect.wgsl

@@ -0,0 +1,50 @@
+// This shader computes the chromatic aberration effect
+
+// 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::FullscreenVertexOutput
+
+@group(0) @binding(0) var screen_texture: texture_2d<f32>;
+@group(0) @binding(1) var texture_sampler: sampler;
+
+struct FullScreenEffect {
+    intensity: f32,
+#ifdef SIXTEEN_BYTE_ALIGNMENT
+    // WebGL2 structs must be 16 byte aligned.
+    _webgl2_padding: vec3<f32>
+#endif
+}
+
+@group(0) @binding(2) var<uniform> settings: FullScreenEffect;
+
+@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
+    );
+}
+
+