This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.
//! Demonstrates the use of [`UiMaterials`](UiMaterial) 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
// This shader draws a circle with a given input color
#import bevy_ui::ui_vertex_output::UiVertexOutput
(1) (0) var<uniform> color: vec4<f32>;
(1) (1) var<uniform> slider: 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 r = in.uv - 0.5;
let b = ;
if {
return border_color;
}
if in.uv.x < slider {
let output_color = * color;
return output_color;
} else {
return ;
}
}