-
-
Notifications
You must be signed in to change notification settings - Fork 21.3k
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
Fix blurry borders on antialiased StyleBoxFlat #76132
Conversation
e87383d
to
3c595c3
Compare
3c595c3
to
7c3ce00
Compare
Resolves #75707 |
There was a problem hiding this 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.
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 |
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.
7c3ce00
to
2ef2004
Compare
Thanks! And congrats on your first merged Godot PR! |
Cherry-picked for 4.0.3. |
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 ? |
It is still there, just checked. This issue would require a different fix. |
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.
Reference rendering in a vector graphics software
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: