Support Warning
WebGPU is currently only supported on Chrome starting with version 113, and only on desktop. If they don't work on your configuration, you can check the WebGL2 examples here.
post_processing.rs:
//! This example shows how to create a custom render pass that runs after the main pass
//! and reads the texture generated by the main pass.
//!
//! The example shader is a very simple implementation of chromatic aberration.
//! To adapt this example for 2D, replace all instances of 3D structures (such as `Core3D`, etc.) with their corresponding 2D counterparts.
//!
//! This is a fairly low level example and assumes some familiarity with rendering concepts and wgpu.
use ;
/// It is generally encouraged to set up post processing effects as a plugin
;
;
// The post process node used for the render graph
;
// The ViewNode trait is required by the ViewNodeRunner
// This contains global data used by the render pipeline. This will be created once on startup.
// This is the component that will get passed to the shader
/// Set up a simple 3D scene
;
/// Rotates any entity around the x and y axis
// Change the intensity over time to show that the effect is controlled from the main world
shaders/post_processing.wgsl:
// 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 FullscreenVertexOutput
@group @binding var screen_texture: ;
@group @binding var texture_sampler: sampler;
@group @binding settings: PostProcessSettings;
@fragment
@location