Demonstrates the use of UiMaterials
and how to change material values
use ;
/// This example uses a shader source file from the assets subdirectory
const SHADER_ASSET_PATH: &str = "shaders/custom_ui_material.wgsl";
// Fills the slider slowly over 2 seconds and resets it
// Also updates the color of the image to a rainbow color
// Draws a progress bar with properties defined in CustomUiMaterial
#import bevy_ui::ui_vertex_output::UiVertexOutput
(1) (0) var<uniform> color: vec4<f32>;
(1) (1) var<uniform> slider: vec4<f32>;
(1) (2) var material_color_texture: texture_2d<f32>;
(1) (3) var material_color_sampler: sampler;
(1) (4) var<uniform> border_color: vec4<f32>;
fn -> (0) vec4<f32> {
let output_color = * color;
// half size of the UI node
let half_size = 0.5 * in.size;
// position relative to the center of the UI node
let p = in.uv * in.size - half_size;
// thickness of the border closest to the current position
let b = ;
// select radius for the nearest corner
let rs = ;
let radius = ;
// distance along each axis from the corner
let d = half_size - ;
// if the distance to the edge from the current position on any axis
// is less than the border width on that axis then the position is within
// the border and we return the border color
if d.x < b.x || d.y < b.y {
// select radius for the nearest corner
let rs = ;
let radius = ;
// determine if the point is inside the curved corner and return the corresponding color
let q = radius - d;
if radius < + {
return ;
} else {
return border_color;
}
}
// sample the texture at this position if it's to the left of the slider value
// otherwise return a fully transparent color
if in.uv.x < slider.x {
let output_color = * color;
return output_color;
} else {
return ;
}
}