From ca25a67d0d298b6b5d635bff9454f4c245aca98a Mon Sep 17 00:00:00 2001
From: Gilles Henaux <gill.henaux@gmail.com>
Date: Mon, 7 Jul 2025 21:34:12 +0200
Subject: [PATCH] Fix the extended_material example on WebGL2 (#18812)

# Objective

- Fixes #13872 (also mentioned in #17167)

## Solution

- Added conditional padding fields to the shader uniform

## Alternatives

### 1- Use a UVec4

Replace the `u32` field in `MyExtension` by a `UVec4` and only use the
`x` coordinate.

(This was the original approach, but for consistency with the rest of
the codebase, separate padding fields seem to be preferred)

### 2- Don't fix it, unlist it

While the fix is quite simple, it does muddy the waters a tiny bit due
to `quantize_steps` now being a UVec4 instead of a simple u32. We could
simply remove this example from the examples that support WebGL2.

## Testing

- Ran the example locally on WebGL2 (and native Vulkan) successfully
---
 assets/shaders/extended_material.wgsl |  6 ++++++
 examples/shader/extended_material.rs  | 22 ++++++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/assets/shaders/extended_material.wgsl b/assets/shaders/extended_material.wgsl
index 7bad24a331..ae89f7dfea 100644
--- a/assets/shaders/extended_material.wgsl
+++ b/assets/shaders/extended_material.wgsl
@@ -17,6 +17,12 @@
 
 struct MyExtendedMaterial {
     quantize_steps: u32,
+#ifdef SIXTEEN_BYTE_ALIGNMENT
+    // Web examples WebGL2 support: structs must be 16 byte aligned.
+    _webgl2_padding_8b: u32,
+    _webgl2_padding_12b: u32,
+    _webgl2_padding_16b: u32,
+#endif
 }
 
 @group(3) @binding(100)
diff --git a/examples/shader/extended_material.rs b/examples/shader/extended_material.rs
index 3c5102db8a..7253d22949 100644
--- a/examples/shader/extended_material.rs
+++ b/examples/shader/extended_material.rs
@@ -41,7 +41,7 @@ fn setup(
                 // change the above to `OpaqueRendererMethod::Deferred` or add the `DefaultOpaqueRendererMethod` resource.
                 ..Default::default()
             },
-            extension: MyExtension { quantize_steps: 3 },
+            extension: MyExtension::new(1),
         })),
         Transform::from_xyz(0.0, 0.5, 0.0),
     ));
@@ -69,12 +69,30 @@ fn rotate_things(mut q: Query<&mut Transform, With<Rotate>>, time: Res<Time>) {
     }
 }
 
-#[derive(Asset, AsBindGroup, Reflect, Debug, Clone)]
+#[derive(Asset, AsBindGroup, Reflect, Debug, Clone, Default)]
 struct MyExtension {
     // We need to ensure that the bindings of the base material and the extension do not conflict,
     // so we start from binding slot 100, leaving slots 0-99 for the base material.
     #[uniform(100)]
     quantize_steps: u32,
+    // Web examples WebGL2 support: structs must be 16 byte aligned.
+    #[cfg(feature = "webgl2")]
+    #[uniform(100)]
+    _webgl2_padding_8b: u32,
+    #[cfg(feature = "webgl2")]
+    #[uniform(100)]
+    _webgl2_padding_12b: u32,
+    #[cfg(feature = "webgl2")]
+    #[uniform(100)]
+    _webgl2_padding_16b: u32,
+}
+impl MyExtension {
+    fn new(quantize_steps: u32) -> Self {
+        Self {
+            quantize_steps,
+            ..default()
+        }
+    }
 }
 
 impl MaterialExtension for MyExtension {