ui_material example webgl2 fix (#17852)

# Objective

Fixes #17851

## Solution

Align the `slider` uniform to 16 bytes by making it a `vec4`.

## Testing

Run the example using:
```
cargo run -p build-wasm-example -- --api webgl2 ui_material
basic-http-server examples/wasm/
```

Author: ickshonpe

assets/shaders/custom_ui_material.wgsl

@@ -2,7 +2,7 @@
 #import bevy_ui::ui_vertex_output::UiVertexOutput
 
 @group(1) @binding(0) var<uniform> color: vec4<f32>;
-@group(1) @binding(1) var<uniform> slider: f32;
+@group(1) @binding(1) var<uniform> slider: vec4<f32>;
 @group(1) @binding(2) var material_color_texture: texture_2d<f32>;
 @group(1) @binding(3) var material_color_sampler: sampler;
 @group(1) @binding(4) var<uniform> border_color: vec4<f32>;
@@ -50,7 +50,7 @@ fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
 
     // sample the texture at this position if it's to the left of the slider value
     // otherwise return a fully transparent color
-    if in.uv.x < slider {
+    if in.uv.x < slider.x {
         let output_color = textureSample(material_color_texture, material_color_sampler, in.uv) * color;
         return output_color;
     } else {

examples/ui/ui_material.rs

@@ -44,7 +44,7 @@ fn setup(
                 },
                 MaterialNode(ui_materials.add(CustomUiMaterial {
                     color: LinearRgba::WHITE.to_f32_array().into(),
-                    slider: 0.5,
+                    slider: Vec4::splat(0.5),
                     color_texture: asset_server.load("branding/banner.png"),
                     border_color: LinearRgba::WHITE.to_f32_array().into(),
                 })),
@@ -66,8 +66,9 @@ struct CustomUiMaterial {
     color: Vec4,
     /// Represents how much of the image is visible
     /// Goes from 0 to 1
+    /// A `Vec4` is used here because Bevy with webgl2 requires that uniforms are 16-byte aligned but only the first component is read.
     #[uniform(1)]
-    slider: f32,
+    slider: Vec4,
     /// Image used to represent the slider
     #[texture(2)]
     #[sampler(3)]
@@ -97,7 +98,7 @@ fn animate(
             let new_color = Color::hsl((time.elapsed_secs() * 60.0) % 360.0, 1., 0.5);
             let border_color = Color::hsl((time.elapsed_secs() * 60.0) % 360.0, 0.75, 0.75);
             material.color = new_color.to_linear().to_vec4();
-            material.slider =
+            material.slider.x =
                 ((time.elapsed_secs() % (duration * 2.0)) - duration).abs() / duration;
             material.border_color = border_color.to_linear().to_vec4();
         }