Fix blurry borders on antialiased StyleBoxFlat #76132
Merged
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.
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: