Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix blurry borders on antialiased StyleBoxFlat #76132

Merged

Conversation

davthedev
Copy link
Contributor

@davthedev davthedev commented Apr 16, 2023

This is a fix of the antialiasing logic of StyleBoxFlat. It is now possible to have smooth rounded corners while keeping the edges sharp on the pixel, and remove the bleeding on the edges.

The problem is subtle but noticeable. In the current version, when the antialiasing is enabled on a StyleBoxFlat, the rounded corners are smoothed as expected. But, the sides also bleed a bit and lose their sharpness.

As the style boxes are mostly used to render UI components, it looks better when the sides are sharp on the pixel.

Before After
Capture d’écran du 2023-04-16 14-20-17 Capture d’écran du 2023-04-16 14-06-33

Reference rendering in a vector graphics software
Capture d’écran du 2023-04-16 14-08-25

Since the box is rendered using colored GL triangles, the already-implemented trick to make the edges smooth is to use extra polygons with a fade-to-transparent. I have adjusted the positioning of those polygons so that the middle of the gradient matches the "hard" border, on both the ring and the infill.

This is based on principles found here: https://blog.mapbox.com/drawing-antialiased-lines-with-opengl-8766f34192dc

As the rendering principle may not be obvious, here is a visual explanation of how it works and the changes I have done to improve the rendering:

border_antialiasing_principle

@davthedev davthedev changed the title Fix blurry borders on antialiased FlatStyleBox Fix blurry borders on antialiased StyleBoxFlat Apr 16, 2023
@Calinou Calinou added this to the 4.1 milestone Apr 16, 2023
@davthedev davthedev force-pushed the stylebox-flat-antialiasing-fix branch from e87383d to 3c595c3 Compare April 16, 2023 15:38
@davthedev davthedev requested a review from a team as a code owner April 16, 2023 15:38
@davthedev davthedev force-pushed the stylebox-flat-antialiasing-fix branch from 3c595c3 to 7c3ce00 Compare April 16, 2023 15:50
@davthedev
Copy link
Contributor Author

Resolves #75707

Copy link
Member

@Calinou Calinou left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. I'm slightly concerned about the default value change for antialiasing size, but most people don't change this particular property so it's probably not an issue for 4.1.

@davthedev
Copy link
Contributor Author

If the previous value of 0.625 is used, you will get a slightly sharper corner edge. No big deal.

@Calinou
Copy link
Member

Calinou commented Apr 16, 2023

If the previous value of 0.625 is used, you will get a slightly sharper corner edge. No big deal.

The default value isn't serialized in scene/resource files, so it's fine to have it set to 0.625 currently. This is only a concern for people who have changed the value from the default to any other value.

@davthedev
Copy link
Contributor Author

This one should also be possible to backport to 3.x

This is a fix of the antialiasing logic of FlatStyleBox.
It is now possible to have smooth rounded corners while keeping
the edges sharp on the pixels.

The antialiasing gradient positioning is ajusted so that the "hard"
border corresponds to the middle of that gradient instead of one end.
Checked against rendering of rounded rectangles in a vector graphics
software.
@davthedev davthedev force-pushed the stylebox-flat-antialiasing-fix branch from 7c3ce00 to 2ef2004 Compare April 17, 2023 18:23
@YuriSizov YuriSizov merged commit 3db4035 into godotengine:master Apr 17, 2023
@YuriSizov
Copy link
Contributor

Thanks! And congrats on your first merged Godot PR!

@davthedev davthedev deleted the stylebox-flat-antialiasing-fix branch April 17, 2023 22:53
@YuriSizov
Copy link
Contributor

Cherry-picked for 4.0.3.

@lostminds
Copy link

If this changes the anti-aliasing of stylebox radius borders, does this also fix the old bug with incorrect overlaps with antialiasing on radius downsizing #68514 ?

@davthedev
Copy link
Contributor Author

It is still there, just checked. This issue would require a different fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The new default UI theme has blurry edges
4 participants