From 02985c3d5654653ba99424d912952535ba058f6d Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 13 Feb 2025 20:52:26 +0000
Subject: [PATCH] `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/
```
---
 assets/shaders/custom_ui_material.wgsl | 4 ++--
 examples/ui/ui_material.rs             | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/assets/shaders/custom_ui_material.wgsl b/assets/shaders/custom_ui_material.wgsl
index 815fceb5fc..528fa55302 100644
--- a/assets/shaders/custom_ui_material.wgsl
+++ b/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 {
diff --git a/examples/ui/ui_material.rs b/examples/ui/ui_material.rs
index 2ad6e5a532..68a63446f7 100644
--- a/examples/ui/ui_material.rs
+++ b/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();
         }