Extended material example fails in browser

[torsteingrindvik]

Bevy version

Whichever Bevy version runs on the website, 0.13.2

[Optional] Relevant system information

Linux, firefox

What you did

https://bevyengine.org/examples/Shaders/extended-material/

What went wrong

Crashes, console states:

panicked at /Users/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/wgpu-0.19.3/src/backend/wgpu_core.rs:3006:5:
wgpu error: Validation Error

Caused by:
    In Device::create_render_pipeline
      note: label = `pbr_opaque_mesh_pipeline`
    In the provided shader, the type given for group 2 binding 100 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.

The problem is the lack of padding in the example: https://github.com/bevyengine/bevy/blob/main/examples/shader/extended_material.rs#L76-L81

should have something like this: https://github.com/bevyengine/bevy/blob/aaccbe88aa0d591c9c741f690ab472785c7bac09/crates/bevy_render/src/globals.rs#L60

as well as the shader side needing the same padding.

[altunenes]

same error: Win 11; AMD GPU; chrome + mozilla.

[altunenes]

https://bevyengine.org/examples/3D%20Rendering/lines/

this also doesn't work.

[rparrett]

Same issue with Bevy 0.14 and current Bevy main.

AdapterInfo { name: "ANGLE (Apple, ANGLE Metal Renderer: Apple M1 Max, Unspecified Version)", vendor: 4203, device: 0, device_type: IntegratedGpu, driver: "WebGL 2.0 (OpenGL ES", driver_info: "3.0 Chromium)", backend: Gl }