Ui border is 1 pixel too large, or is getting aliased.

[ImDanTheDev]

Bevy version

Main, commit 0ec6347

Relevant system information

• Windows 11
• Rust Nightly, 1.80.0 (8387315ab 2024-05-14)
• Also tested on Rust Stable, 1.78.0 (9b00956e5 2024-04-29)

AdapterInfo { name: "NVIDIA GeForce RTX 2080 Ti", vendor: 4318, device: 7684, device_type: DiscreteGpu, driver: "NVIDIA", driver_info: "555.85", backend: Vulkan }

What you did

Create a NodeBundle with a 1 pixel wide border on all sides.

What went wrong

The border appears to be 1 pixel too large on all sides, or is getting aliased, causing it to blend into the node's background. I would expect a 1 pixel border to be exactly 1 pixel on the screen(see the 0.13.2 screenshot below).

This gist reproduces the issue on commit 0ec6347.
And this gist does not show the issue on 0.13.2.

Possible Fix

I'm not at all fluent with shader code, but while poking around in ui.wgsl, I found that on line 161, changing external_distance < internal_distance to external_distance > internal_distance fixes the issue. After doing that, the border appears exactly the same as the 0.13.2 screenshot below. I have no idea what the implications are for making that change, so it may very well break other things.

True scale:

Scaled up to highlight issue:

Expected(using bevy 0.13.2):

[mockersf]

could you try before and after #12725?

commit before: debcf3f
commit with that PR: 8da4fcb

[ImDanTheDev]

The issue still exists on both of those commits, with debcf3f looking slightly different.

[ImDanTheDev]

#12500, commit e7a31d0 has this issue.
The commit before that PR, 7c7d1e8, does not.

[hymm]

looking into this rn. I think there's a bug with how the sdfs are calculated. Visualizing external_distance(left) and internal_distance(right).

We see a darker red around the external_distance. It being darker is saying that the outside pixel is half in and half out of the border, but it should be bright red saying that the outside pixel is fully part of the border.

I think the calculations are off by half a pixel somewhere, but not sure how to fix it yet.

[hymm]

getting close. left is the border distance and right is the fwidth(border_distance). The border_distance looks correct. Notice that the borders have black pixels now and the darker red is gone. But the fwidth(border_distance) looks weird, which is making artifacts in the final rendering.

[hymm]

looks like something weird is going on on the diagonals of the sdf

[hymm]

I think I got it. Will do a little more testing tomorrow and then open a pr.

[ImDanTheDev]

Thanks for working on this issue! That looks much better, but there is still 1px of the border bleeding into the middle on some sides of some of those squares. It is visible only on the top right black/white square, the 2 green/orange, and the 2 purple/yellow squares. Is this an artifact caused by the screenshot?

[hymm]

Not an artifact. Here's a blown up screenshot.

For this I changed border_distance to be

let border_distance = select(external_distance, -internal_distance, internal_distance <= 0);

Which is more correct than it was before, but probably still a little wrong. I'll see if I can come up with a better formula.

[hymm]

Darn above formula is still pretty wrong. The red area should be darkening again as it gets closer to inner border in the below screenshot.

[hymm]

Using

    let border_distance = select(max(external_distance, -internal_distance), -internal_distance, internal_distance <= 0);

got me

just some single pixel artifacts left in the corners.