Add border radius to UI nodes (adopted)

[chompaa]

Objective

Implements border radius for UI nodes. Adopted from #8973, but excludes shadows.

Solution

• Add a component BorderRadius which contains a radius value for each corner of the UI node.
• Use a fragment shader to generate the rounded corners using a signed distance function.

Changelog

• BorderRadius: New component that holds the border radius values.
• NodeBundle & ButtonBundle: Added a border_radius: BorderRadius field.
• extract_uinode_borders: Stripped down, most of the work is done in the shader now. Borders are no longer assembled from multiple rects, instead the shader uses a signed distance function to draw the border.
• UiVertex: Added size, border and radius fields.
• UiPipeline: Added three vertex attributes to the vertex buffer layout, to accept the UI node's size, border thickness and border radius.
• Examples: Added rounded corners to the UI element in the button example, and a rounded_borders example.

[viridia]

I think UiBorderRadius should be its own component. There has been a lot of confusion around the Style component, as to what exactly should and should not go in it, and part of the problem is that it's not well named. There's a proposal on the table to rename Style to LayoutConstraints: #10497 which should hopefully make it clearer - otherwise Style becomes a dumping ground for random properties that don't have an obvious home. All of the properties currently in Style are in fact layout constraints, but border radius is not a layout constraint.

[alice-i-cecile]

From previous conversation with @viridia about the precursor:

I looked at the rounded rect PR some more today, and have some further thoughts:

1. The changes to UiRect seem unnecessary, and are not required for rounded corners.
2. Part of what the PR is doing is changing how borders are rendered in general. Traditionally, borders have been rendered as a separate primitive. The PR instead changes it so that a single shader renders both borders and background, passing in separate colors for each. Assuming you want to go down that path, you could split out a separate PR to do just that part. However, you can also expect some push-back due to the extra per-vertex overhead needed.
3. I disagree with the author's decision to make border_radius part of Style, I think it should be a separate component as others have suggested.
4. As someone who uses rounded corners, my opinions on this PR are somewhat mixed. In my own work, about half of the use cases for rounded corners also require clipping, which this PR doesn't address (and which is really difficult to do without a full 2d clipping solution such as Vello provides).
5. I can get around the lack of clipping by writing my own custom UiMaterial for rounded corners, but if I'm going to do that, then I don't need rounded corner support in Bevy.

[alice-i-cecile]

I don't want to delay this unnecessarily, but here are my initial thoughts:

1. I really like your generated test cases in the PR description: can you add a variant of this as an example so users and maintainers can quickly check how this works?
2. I think that clipping out the background is required for this to be shippable: right now it looks fundamentally buggy.
3. Adjusting hit detection would be nice, but can be moved to future work.
4. Definitely agree on moving this out to its own component.

[viridia]

Assuming that you can get the rendering folks to sign off on the extra overhead involved in adding additional vertex params to UI node rendering, I would support this PR. It doesn't do everything I need, but a lot of people have wanted this for a long time, and as mentioned, I can always write custom shaders to fill the gaps.

What would be helpful, I think, is if we could post some actual perf data showing the impact. I'm not so familiar on how to do this, but I know that for my previous PR @cart posted some numbers.

[chompaa]

I don't want to delay this unnecessarily, but here are my initial thoughts:

1. I've added an example rounded_borders analogous to borders, does this suffice?
2. Should be fixed now.
3. I'm not really sure how to approach this right now unfortunately.
4. I've moved UiBorderRadius to a component. Should this just be BorderRadius to be in line with BorderColor now?

[pablo-lua]

Just a reflection comment.

[alice-i-cecile]

Awesome, merging now: we can refine this more before 0.14 if issues come up <3

Thank you, I've wanted this feature for literally years.