From e1e240709171e5a82ef9897b256fa1628d2c9d09 Mon Sep 17 00:00:00 2001
From: Rob Parrett <robparrett@gmail.com>
Date: Fri, 4 Aug 2023 10:44:29 -0700
Subject: [PATCH] Fix post_processing example on webgl2 (#9361)

# 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 c7eaedd6a1a2726e5425a15be64a8e514d07868d.

## Solution

Add padding when using webgl2
---
 assets/shaders/post_processing.wgsl |  4 ++++
 examples/shader/post_processing.rs  | 10 ++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/assets/shaders/post_processing.wgsl b/assets/shaders/post_processing.wgsl
index 9cfb83a68579d..4b1fed2aa2a15 100644
--- a/assets/shaders/post_processing.wgsl
+++ b/assets/shaders/post_processing.wgsl
@@ -28,6 +28,10 @@ var screen_texture: texture_2d<f32>;
 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;
diff --git a/examples/shader/post_processing.rs b/examples/shader/post_processing.rs
index a61b1c8f63528..3c49cd94945a9 100644
--- a/examples/shader/post_processing.rs
+++ b/examples/shader/post_processing.rs
@@ -283,7 +283,7 @@ impl FromWorld for PostProcessPipeline {
                     ty: BindingType::Buffer {
                         ty: bevy::render::render_resource::BufferBindingType::Uniform,
                         has_dynamic_offset: false,
-                        min_binding_size: None,
+                        min_binding_size: Some(PostProcessSettings::min_size()),
                     },
                     count: None,
                 },
@@ -338,6 +338,9 @@ impl FromWorld for PostProcessPipeline {
 #[derive(Component, Default, Clone, Copy, ExtractComponent, ShaderType)]
 struct PostProcessSettings {
     intensity: f32,
+    // WebGL2 structs must be 16 byte aligned.
+    #[cfg(feature = "webgl2")]
+    _webgl2_padding: Vec3,
 }
 
 /// Set up a simple 3D scene
@@ -359,7 +362,10 @@ fn setup(
         },
         // Add the setting to the camera.
         // This component is also used to determine on which camera to run the post processing effect.
-        PostProcessSettings { intensity: 0.02 },
+        PostProcessSettings {
+            intensity: 0.02,
+            ..default()
+        },
     ));
 
     // cube