From 6ea19ce21faf2e299be6aa03b26e4c410dd169d3 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Fri, 10 Jan 2025 15:21:10 +0000 Subject: [PATCH 1/2] Order of the border edges in `UiVertexOutput` is left, right, top, bottom but in `custom_ui_material` the selectors switch them so left is right and top is bottom. Reversed the conditions so the correct edge values are selected. --- assets/shaders/custom_ui_material.wgsl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/shaders/custom_ui_material.wgsl b/assets/shaders/custom_ui_material.wgsl index ef000aef7e87e..813ad2a30c906 100644 --- a/assets/shaders/custom_ui_material.wgsl +++ b/assets/shaders/custom_ui_material.wgsl @@ -12,8 +12,8 @@ fn fragment(in: UiVertexOutput) -> @location(0) vec4 { 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.) + select(in.border_widths.x, in.border_widths.y, 0. < r.x), + select(in.border_widths.z, in.border_widths.w, 0. < r.y) ); if any(0.5 - b < abs(r)) { From a3c0d05087f854852695be2572ee6e57a7349b52 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Fri, 10 Jan 2025 20:37:12 +0000 Subject: [PATCH 2/2] Added comments to the `custom_ui_material` shader. --- assets/shaders/custom_ui_material.wgsl | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/shaders/custom_ui_material.wgsl b/assets/shaders/custom_ui_material.wgsl index 813ad2a30c906..ae53b528d8cb2 100644 --- a/assets/shaders/custom_ui_material.wgsl +++ b/assets/shaders/custom_ui_material.wgsl @@ -10,16 +10,24 @@ @fragment fn fragment(in: UiVertexOutput) -> @location(0) vec4 { + // normalized position relative to the center of the UI node let r = in.uv - 0.5; + + // normalized size of the border closest to the current position let b = vec2( select(in.border_widths.x, in.border_widths.y, 0. < r.x), select(in.border_widths.z, in.border_widths.w, 0. < r.y) ); + // 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 any(0.5 - b < abs(r)) { 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 { let output_color = textureSample(material_color_texture, material_color_sampler, in.uv) * color; return output_color;