mirror of
https://github.com/bevyengine/bevy
synced 2024-09-20 06:22:01 +00:00
e1e2407091
# Objective
The `post_processing` example is currently broken when run with webgl2.
```
cargo run --example post_processing --target=wasm32-unknown-unknown
```
```
wasm.js:387 panicked at 'wgpu error: Validation Error
Caused by:
In Device::create_render_pipeline
note: label = `post_process_pipeline`
In the provided shader, the type given for group 0 binding 2 has a size of 4. As the device does not support `DownlevelFlags::BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED`, the type must have a size that is a multiple of 16 bytes.
```
I bisected the breakage to c7eaedd6a1.
## Solution
Add padding when using webgl2
52 lines
1.7 KiB
WebGPU Shading Language
52 lines
1.7 KiB
WebGPU Shading Language
// 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 FullscreenVertexOutput
|
||
|
||
@group(0) @binding(0)
|
||
var screen_texture: texture_2d<f32>;
|
||
@group(0) @binding(1)
|
||
var texture_sampler: sampler;
|
||
struct PostProcessSettings {
|
||
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: 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
|
||
);
|
||
}
|
||
|