UI anti-aliasing fix #16181
Merged
UI anti-aliasing fix #16181
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ickshonpe
added
A-UI
alice-i-cecile
added
the
S-Needs-Review
Member
|
@ickshonpe is this ready or is it still a draft? |
BenjaminBrienen
added
the
D-Modest
BenjaminBrienen
approved these changes
Nov 13, 2024
Contributor
Author
Ready for review now, though the implementation sucks so much as it passes in the inverse scale factor with every vertex 😓. That could be removed later by switching to physical coordinates internally in a follow up. I've got some before and after test examples but I need to go to sleep, I'll put them up when I wake up. |
mockersf
approved these changes
Nov 13, 2024
mockersf
pushed a commit
that referenced
this pull request
Nov 16, 2024
UI Anti-aliasing is incorrectly implemented. It always uses an edge radius of 0.25 logical pixels, and ignores the physical resolution. For low dpi screens 0.25 is is too low and on higher dpi screens the physical edge radius is much too large, resulting in visual artifacts. Multiply the distance by the scale factor in the `antialias` function so that the edge radius stays constant in physical pixels. To see the problem really clearly run the button example with `UiScale` set really high. With `UiScale(25.)` on main if you examine the button's border you can see a thick gradient fading away from the edges: <img width="127" alt="edgg" src="https://github.com/user-attachments/assets/7c852030-c0e8-4aef-8d3e-768cb2464cab"> With this PR the edges are sharp and smooth at all scale factors: <img width="127" alt="edge" src="https://github.com/user-attachments/assets/b3231140-1bbc-4a4f-a1d3-dde21f287988">
ecoskey
pushed a commit
to ecoskey/bevy
that referenced
this pull request
Dec 2, 2024
# Objective UI Anti-aliasing is incorrectly implemented. It always uses an edge radius of 0.25 logical pixels, and ignores the physical resolution. For low dpi screens 0.25 is is too low and on higher dpi screens the physical edge radius is much too large, resulting in visual artifacts. ## Solution Multiply the distance by the scale factor in the `antialias` function so that the edge radius stays constant in physical pixels. ## Testing To see the problem really clearly run the button example with `UiScale` set really high. With `UiScale(25.)` on main if you examine the button's border you can see a thick gradient fading away from the edges: <img width="127" alt="edgg" src="https://github.com/user-attachments/assets/7c852030-c0e8-4aef-8d3e-768cb2464cab"> With this PR the edges are sharp and smooth at all scale factors: <img width="127" alt="edge" src="https://github.com/user-attachments/assets/b3231140-1bbc-4a4f-a1d3-dde21f287988">
ecoskey
pushed a commit
to ecoskey/bevy
that referenced
this pull request
Jan 6, 2025
# Objective UI Anti-aliasing is incorrectly implemented. It always uses an edge radius of 0.25 logical pixels, and ignores the physical resolution. For low dpi screens 0.25 is is too low and on higher dpi screens the physical edge radius is much too large, resulting in visual artifacts. ## Solution Multiply the distance by the scale factor in the `antialias` function so that the edge radius stays constant in physical pixels. ## Testing To see the problem really clearly run the button example with `UiScale` set really high. With `UiScale(25.)` on main if you examine the button's border you can see a thick gradient fading away from the edges: <img width="127" alt="edgg" src="https://github.com/user-attachments/assets/7c852030-c0e8-4aef-8d3e-768cb2464cab"> With this PR the edges are sharp and smooth at all scale factors: <img width="127" alt="edge" src="https://github.com/user-attachments/assets/b3231140-1bbc-4a4f-a1d3-dde21f287988">
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Objective
UI Anti-aliasing is incorrectly implemented. It always uses an edge radius of 0.25 logical pixels, and ignores the physical resolution. For low dpi screens 0.25 is is too low and on higher dpi screens the physical edge radius is much too large, resulting in visual artifacts.
Solution
Multiply the distance by the scale factor in the
antialiasfunction so that the edge radius stays constant in physical pixels.Testing
To see the problem really clearly run the button example with
UiScaleset really high. WithUiScale(25.)on main if you examine the button's border you can see a thick gradient fading away from the edges:With this PR the edges are sharp and smooth at all scale factors: