011f71a245
# Objective - Some people have asked how to do image masking in UI. It's pretty easy to do using a `UiMaterial` assuming you know how to write shaders. ## Solution - Update the ui_material example to show the bevy banner slowly being revealed like a progress bar ## Notes I'm not entirely sure if we want this or not. For people that would be comfortable to use this for their own games they would probably have already figured out how to do it and for people that aren't familiar with shaders this isn't really enough to make an actual slider/progress bar. --------- Co-authored-by: François Mockers <francois.mockers@vleue.com>
19 lines
612 B
WebGPU Shading Language
19 lines
612 B
WebGPU Shading Language
// This shader draws a circle with a given input color
|
|
#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(2) var material_color_texture: texture_2d<f32>;
|
|
@group(1) @binding(3) var material_color_sampler: sampler;
|
|
|
|
|
|
@fragment
|
|
fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
|
|
if in.uv.x < slider {
|
|
let output_color = textureSample(material_color_texture, material_color_sampler, in.uv) * color;
|
|
return output_color;
|
|
} else {
|
|
return vec4(0.0);
|
|
}
|
|
}
|