GPU-accelerated UI toolkit (Vulkan)
git clone https://git.lucas.co/cce-ui.git
shader2d: the tinted focus ring ends at its silhouette
A tinted free carve (the focus treatment on a recessed TextBox, the
network page's rings) renders as a plate silhouette's glint swept around
the outline — but nothing cut it off past that silhouette. Outside the
ring `u` saturates at 0, so `roll_slope(1)` — the profile's steepest
point — fed the glint for every remaining pixel of the overlay's cover
quad: a flat tinted block, square-cornered because the quad is, drawn
around the rounded ring. The untinted carve profiles never showed it
because their slope and curvature are zero on both plateaus.
Fade the ring to nothing at the silhouette (rect outset by t/2) with the
same 1px anti-aliasing a plate's own silhouette gets.
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01AxEbg3N3GndoetpY7LThEA
src/vk/shader2d.wgsl | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/vk/shader2d.wgsl b/src/vk/shader2d.wgsl
index f4f9e58..e7f1218 100644
--- a/src/vk/shader2d.wgsl
+++ b/src/vk/shader2d.wgsl
@@ -709,7 +709,14 @@ fn plate_shade(frag: vec2f, vcol: vec4f) -> vec4f {
// angle twice and drew two concentric lines. With roll_slope the ring
// is exactly a plate silhouette's glint — one line, same position.
let fr = clamp(1.0 - u, 0.0, 1.0);
- v = roll_spec_wrap(fgd * roll_slope(fr)) * strength * att;
+ // ...and ENDS at that silhouette (the rect outset by t/2), 1px
+ // anti-aliased like a plate's own. Past it `u` saturates at 0 and
+ // roll_slope(1) is the profile's steepest point, so every pixel of
+ // the cover quad outside the ring drew the full glint — a flat
+ // tinted block, square-cornered (the quad's own shape), around the
+ // rounded ring.
+ let sil = clamp(fd + 0.5 * t + 0.5, 0.0, 1.0);
+ v = roll_spec_wrap(fgd * roll_slope(fr)) * strength * att * sil;
}
if (v >= 0.0) {
// Highlight: the white screen mixes toward the tint color, slightly