Add border radius to UI nodes (adopted) (#12500)

# 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.

<img width="50%"
src="https://github.com/bevyengine/bevy/assets/26204416/16b2ba95-e274-4ce7-adb2-34cc41a776a5"></img>

## 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.

---------

Co-authored-by: Alice Cecile <[email protected]>
Co-authored-by: Zachary Harrold <[email protected]>
Co-authored-by: Pablo Reinhardt <[email protected]>

Cargo.toml

@@ -2340,6 +2340,17 @@ description = "Demonstrates how to create a node with a border"
 category = "UI (User Interface)"
 wasm = true
 
+[[example]]
+name = "rounded_borders"
+path = "examples/ui/rounded_borders.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.rounded_borders]
+name = "Rounded Borders"
+description = "Demonstrates how to create a node with a rounded border"
+category = "UI (User Interface)"
+wasm = true
+
 [[example]]
 name = "button"
 path = "examples/ui/button.rs"

crates/bevy_ui/src/lib.rs

@@ -112,6 +112,7 @@ impl Plugin for UiPlugin {
             .register_type::<UiRect>()
             .register_type::<UiScale>()
             .register_type::<BorderColor>()
+            .register_type::<BorderRadius>()
             .register_type::<widget::Button>()
             .register_type::<widget::Label>()
             .register_type::<ZIndex>()

crates/bevy_ui/src/node_bundles.rs

@@ -6,8 +6,8 @@
 use crate::widget::TextFlags;
 use crate::{
     widget::{Button, UiImageSize},
-    BackgroundColor, BorderColor, ContentSize, FocusPolicy, Interaction, Node, Style, UiImage,
-    UiMaterial, ZIndex,
+    BackgroundColor, BorderColor, BorderRadius, ContentSize, FocusPolicy, Interaction, Node, Style,
+    UiImage, UiMaterial, ZIndex,
 };
 use bevy_asset::Handle;
 use bevy_color::Color;
@@ -34,6 +34,8 @@ pub struct NodeBundle {
     pub background_color: BackgroundColor,
     /// The color of the Node's border
     pub border_color: BorderColor,
+    /// The border radius of the node
+    pub border_radius: BorderRadius,
     /// Whether this node should block interaction with lower nodes
     pub focus_policy: FocusPolicy,
     /// The transform of the node
@@ -62,6 +64,7 @@ impl Default for NodeBundle {
             // Transparent background
             background_color: Color::NONE.into(),
             border_color: Color::NONE.into(),
+            border_radius: BorderRadius::default(),
             node: Default::default(),
             style: Default::default(),
             focus_policy: Default::default(),
@@ -314,6 +317,8 @@ pub struct ButtonBundle {
     pub focus_policy: FocusPolicy,
     /// The color of the Node's border
     pub border_color: BorderColor,
+    /// The border radius of the node
+    pub border_radius: BorderRadius,
     /// The image of the node
     pub image: UiImage,
     /// The transform of the node
@@ -344,6 +349,7 @@ impl Default for ButtonBundle {
             interaction: Default::default(),
             focus_policy: FocusPolicy::Block,
             border_color: BorderColor(Color::NONE),
+            border_radius: BorderRadius::default(),
             image: Default::default(),
             transform: Default::default(),
             global_transform: Default::default(),