Fix motion blur on wasm (#13099)

# Objective

Fixes #13097 and other issues preventing the motion blur example from
working on wasm

## Solution

- Use a vec2 for padding
- Fix error initializing the `MotionBlur` struct on wasm+webgl2
- Disable MSAA on wasm+webgl2
- Fix `GlobalsUniform` padding getting added on the shader side for
webgpu builds

## Notes

The motion blur example now runs, but with artifacts. In addition to the
obvious black artifacts, the motion blur or dithering seem to just look
worse in a way I can't really describe. That may be expected.

```
AdapterInfo { name: "ANGLE (Apple, ANGLE Metal Renderer: Apple M1 Max, Unspecified Version)", vendor: 4203, device: 0, device_type: IntegratedGpu, driver: "", driver_info: "", backend: Gl }
```
<img width="1276" alt="Screenshot 2024-04-25 at 6 51 21 AM"
src="https://github.com/bevyengine/bevy/assets/200550/65401d4f-92fe-454b-9dbc-a2d89d3ad963">

crates/bevy_core_pipeline/src/motion_blur/mod.rs

@@ -98,9 +98,9 @@ pub struct MotionBlur {
     /// Setting this to `3` will result in `3 * 2 + 1 = 7` samples. Setting this to `0` is
     /// equivalent to disabling motion blur.
     pub samples: u32,
-    #[cfg(all(feature = "webgl", target_arch = "wasm32"))]
+    #[cfg(all(feature = "webgl", target_arch = "wasm32", not(feature = "webgpu")))]
     // WebGL2 structs must be 16 byte aligned.
-    pub _webgl2_padding: bevy_math::Vec3,
+    pub _webgl2_padding: bevy_math::Vec2,
 }
 
 impl Default for MotionBlur {
@@ -108,8 +108,8 @@ impl Default for MotionBlur {
         Self {
             shutter_angle: 0.5,
             samples: 1,
-            #[cfg(all(feature = "webgl", target_arch = "wasm32"))]
-            _webgl2_padding: bevy_math::Vec3::default(),
+            #[cfg(all(feature = "webgl", target_arch = "wasm32", not(feature = "webgpu")))]
+            _webgl2_padding: Default::default(),
         }
     }
 }

crates/bevy_core_pipeline/src/motion_blur/motion_blur.wgsl

@@ -18,7 +18,7 @@ struct MotionBlur {
     samples: u32,
 #ifdef SIXTEEN_BYTE_ALIGNMENT
     // WebGL2 structs must be 16 byte aligned.
-    _webgl2_padding: vec3<f32>
+    _webgl2_padding: vec2<f32>
 #endif
 }
 @group(0) @binding(4) var<uniform> settings: MotionBlur;

crates/bevy_core_pipeline/src/motion_blur/pipeline.rs

@@ -113,7 +113,7 @@ impl SpecializedRenderPipeline for MotionBlurPipeline {
             shader_defs.push(ShaderDefVal::from("MULTISAMPLED"));
         }
 
-        #[cfg(all(feature = "webgl", target_arch = "wasm32"))]
+        #[cfg(all(feature = "webgl", target_arch = "wasm32", not(feature = "webgpu")))]
         {
             shader_defs.push("NO_DEPTH_TEXTURE_SUPPORT".into());
             shader_defs.push("SIXTEEN_BYTE_ALIGNMENT".into());

examples/3d/motion_blur.rs

@@ -7,8 +7,13 @@ use bevy::{
 };
 
 fn main() {
-    App::new()
-        .add_plugins(DefaultPlugins)
+    let mut app = App::new();
+
+    // MSAA and Motion Blur together are not compatible on WebGL
+    #[cfg(all(feature = "webgl2", target_arch = "wasm32", not(feature = "webgpu")))]
+    app.insert_resource(Msaa::Off);
+
+    app.add_plugins(DefaultPlugins)
         .add_systems(Startup, (setup_camera, setup_scene, setup_ui))
         .add_systems(Update, (keyboard_inputs, move_cars, move_camera).chain())
         .run();
@@ -24,6 +29,8 @@ fn setup_camera(mut commands: Commands) {
             motion_blur: MotionBlur {
                 shutter_angle: 1.0,
                 samples: 2,
+                #[cfg(all(feature = "webgl2", target_arch = "wasm32", not(feature = "webgpu")))]
+                _webgl2_padding: Default::default(),
             },
             ..default()
         },