anti-alias outside the edges of UI nodes, not across them (#17631)

# Objective

Fixes #17561

## Solution

The anti-aliasing function used by the UI fragment shader is this:
```wgsl
fn antialias(distance: f32) -> f32 {
    return saturate(0.5 - distance);      // saturate clamps between 0 and 1
}
```
The returned value is multiplied with the alpha channel value to get the
anti-aliasing effect.

The `distance` is a signed distance value. A positive `distance` means
we are outside the shape we're drawing and a negative `distance` means
we are on the inside.

So with `distance` at `0` (on the edge of the shape):
```
antialias(0) = saturate(0.5 - 0) = saturate(0.5) = 0.5
```
but we want it to be `1` at this point, so the entire interior of the
shape is given a solid colour, and then decrease as the signed distance
increases.

So in this PR we change it to:
```wgsl
fn antialias(distance: f32) -> f32 {
    return saturate(1. - distance);
}
```
Then:
```
antialias(-0.5) = saturate(1 - (-1)) = saturate(2) = 1
antialias(1) = saturate(1 - 0) = 1
antialias(0.5) = saturate(1 - 0.5) = 0.5
antialias(1) = saturate(1 - 1) = 0
```
as desired.

## Testing

```cargo run --example button```

On main:
<img width="400" alt="bleg" src="https://github.com/user-attachments/assets/314994cb-4529-479d-b179-18e5c25f75bc" />

With this PR:
<img width="400" alt="bbwhite" src="https://github.com/user-attachments/assets/072f481d-8b67-4fae-9a5f-765090d1713f" />

Modified the `button` example to draw a white background to make the bleeding more obvious.
This commit is contained in:
ickshonpe 2025-02-02 14:44:31 +00:00 committed by GitHub
parent 7774a624c2
commit 74acb95ed3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -117,7 +117,7 @@ fn sd_inset_rounded_box(point: vec2<f32>, size: vec2<f32>, radius: vec4<f32>, in
// get alpha for antialiasing for sdf
fn antialias(distance: f32) -> f32 {
// Using the fwidth(distance) was causing artifacts, so just use the distance.
return saturate(0.5 - distance);
return saturate(1.0 - distance);
}
fn draw(in: VertexOutput, texture_color: vec4<f32>) -> vec4<f32> {