How to properly pass a f32 uniform to WGSL shader using WebGL2 target

[0xffdcaa]

What I'm trying to achieve mostly lies within this shader:

#import bevy_sprite::mesh2d_vertex_output::VertexOutput

@group(2) @binding(0)
var<uniform> time: f32;

@group(2) @binding(1)
var texture: texture_2d<f32>;

@group(2) @binding(2)
var texture_sampler: sampler;

@fragment
fn fragment(mesh: VertexOutput) -> @location(0) vec4<f32> {
    let orig = textureSample(texture, texture_sampler, mesh.uv);

    if (orig.a < 0.01) {
        discard;
    }

    let wave = sin(time * 2.0 + mesh.uv.x * 5.0) * 0.5 + 0.5;
    let shift = vec3<f32>(wave, 1.0 - wave, sin(time) * 0.5 + 0.5);
    let rgb  = mix(orig.rgb, shift, 0.5);
    return vec4<f32>(rgb, orig.a);
}

And here's the code that uses it:

use bevy::{
    prelude::*,
    reflect::TypePath,
    render::render_resource::{AsBindGroup, ShaderRef},
    sprite::{Material2d, Material2dPlugin},
    time::Time,
};

#[derive(Component)]
struct MySprite;

#[derive(Asset, TypePath, AsBindGroup, Debug, Clone)]
struct CustomMaterial {
    #[uniform(0)]
    time: f32,

    #[texture(1)]
    #[sampler(2)]
    texture: Handle<Image>,
}

impl Material2d for CustomMaterial {
    fn fragment_shader() -> ShaderRef {
        "shader.wgsl".into()
    }
}

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(Material2dPlugin::<CustomMaterial>::default())
        .add_systems(Startup, setup)
        .add_systems(Update, update_time_uniform)
        .run();
}

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<CustomMaterial>>,
) {
    commands.spawn(Camera2d::default());

    let image_handle: Handle<Image> = asset_server.load("image.png");

    let material_handle = materials.add(CustomMaterial {
        time: 0.,
        texture: image_handle,
    });

    let quad_handle = meshes.add(Rectangle::from_size(Vec2::new(512., 512.)));

    commands.spawn((
        Mesh2d(quad_handle),
        MeshMaterial2d(material_handle),
        Transform::default(),
        MySprite,
    ));
}

fn update_time_uniform(mut materials: ResMut<Assets<CustomMaterial>>, time: Res<Time>) {
    for (_, material) in materials.iter_mut() {
        material.time = time.elapsed_secs();
    }
}

When I compile and run targeting WASM, nothing happens on the canvas. And the console says:

wgpu error: Validation Error

Caused by:
  In Device::create_render_pipeline, label = 'opaque_mesh2d_pipeline'
    In the provided shader, the type given for group 2 binding 0 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.

I have seen similar issues reported, but I still don't get how to overcome this. Is this a bug or a known thing which requires certain workaround?

[0xffdcaa]

I have tried changing the time f32 to vec4, so theoretically it would be a multiple of 16, but it didn't help.

[Henauxg]

Try setting 4 separate f32 fields instead of a Vec4. You just won't use the 3 other fields of padding. See #18812 for an example.

Kinda like this, in rust:

struct CustomMaterial {
    #[uniform(0)]
    your_data: f32,
    // Web examples WebGL2 support: structs must be 16 byte aligned.
    #[cfg(feature = "webgl2")]
    #[uniform(0)]
    _webgl2_padding_8b: u32,
    #[cfg(feature = "webgl2")]
    #[uniform(0)]
    _webgl2_padding_12b: u32,
    #[cfg(feature = "webgl2")]
    #[uniform(0)]
    _webgl2_padding_16b: u32,
}

in WGSL:

struct CustomMaterial {
    your_data: f32,
#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(2) @binding(0)
var<uniform> custom_mat: CustomMaterial;