This example is running in WebGL2 and should work in most browsers. You can check the WebGPU 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