forestia/bevy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui_material example webgl2 fix (#17852)

Browse Source 
# 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/
```
This commit is contained in:
ickshonpe 2025-02-13 20:52:26 +00:00 committed by GitHub
parent 101fcaa619
commit 02985c3d56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/shaders/custom_ui_material.wgsl
View File

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

7
examples/ui/ui_material.rs
View File

@ -44,7 +44,7 @@ fn setup(
}, },
MaterialNode(ui_materials.add(CustomUiMaterial { MaterialNode(ui_materials.add(CustomUiMaterial {
color: LinearRgba::WHITE.to_f32_array().into(), color: LinearRgba::WHITE.to_f32_array().into(),
slider: 0.5, slider: Vec4::splat(0.5),
color_texture: asset_server.load("branding/banner.png"), color_texture: asset_server.load("branding/banner.png"),
border_color: LinearRgba::WHITE.to_f32_array().into(), border_color: LinearRgba::WHITE.to_f32_array().into(),
})), })),
@ -66,8 +66,9 @@ struct CustomUiMaterial {
color: Vec4, color: Vec4,
/// Represents how much of the image is visible /// Represents how much of the image is visible
/// Goes from 0 to 1 /// 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)] #[uniform(1)]
slider: f32, slider: Vec4,
/// Image used to represent the slider /// Image used to represent the slider
#[texture(2)] #[texture(2)]
#[sampler(3)] #[sampler(3)]
@ -97,7 +98,7 @@ fn animate(
let new_color = Color::hsl((time.elapsed_secs() * 60.0) % 360.0, 1., 0.5); 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); 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.color = new_color.to_linear().to_vec4();
material.slider = material.slider.x =
((time.elapsed_secs() % (duration * 2.0)) - duration).abs() / duration; ((time.elapsed_secs() % (duration * 2.0)) - duration).abs() / duration;
material.border_color = border_color.to_linear().to_vec4(); material.border_color = border_color.to_linear().to_vec4();
} }