2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2024-12-25 04:23:08 +00:00
bevy/assets/shaders/custom_ui_material.wgsl
ickshonpe 09d2292016
Add a border to the UI material example ()
# Objective

There aren't any examples of how to draw a ui material with borders.

## Solution

Add border rendering to the `ui_material` example's shader.

## Showcase

<img width="395" alt="bordermat"
src="https://github.com/user-attachments/assets/109c59c1-f54b-4542-96f7-acff63f5057f">

---------

Co-authored-by: charlotte <charlotte.c.mcelwain@gmail.com>
2024-09-09 16:34:24 +00:00

29 lines
921 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;
@group(1) @binding(4) var<uniform> border_color: vec4<f32>;
@fragment
fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
let r = in.uv - 0.5;
let b = vec2(
select(in.border_widths.x, in.border_widths.y, r.x < 0.),
select(in.border_widths.z, in.border_widths.w, r.y < 0.)
);
if any(0.5 - b < abs(r)) {
return border_color;
}
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);
}
}