UI Node Border Radius and Shadows #8973

ickshonpe · 2023-06-27T20:44:40Z

Objective

Implement border radius and shadows for Bevy UI nodes.

closely related PRs #7795, #8381, #3991

Solution

Add a component UiBorderRadius which contains a radius value for each corner of the UI node.
The fragment shader uses a signed distance function to generate the rounded corners effect.

Remaining issues and Limitations

* UiBorderRadius only takes values in logical pixels. Supporting all the Val variants shouldn't be a problem. Mainly just need to work out sensible rules for how percentage values should be resolved.

* The border radius value is clamped before being sent to the shader but with very unbalanced opposing borders you can get weird-looking results.

Clipping and Interaction still use unrounded rects.

* Anti-aliasing still seems slightly off.

Changelog

Style
Added border_radius: UiBorderRadius field.
UiBorderRadius
New struct that holds the border radius values.
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.
ExtractedUiNode
Added border and corner_radius fields.
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 UI elements in the button, ui, size_constraints and borders examples.

Migration Guide

`UiCornerRadius` * New component that sets the radius of rounded corners for nodes. Wraps an f32 value. * Currently all corners of a node share the same radius. * Not tested yet, but should be broken for UI texture atlas images. Need to make changes to `prepare_uinodes`. `node_bundles` module * Added the `UiCornerRadius` component to all UI node bundles except for `TextBundle`. `ExtractedUiNode` * Added a `corner_radius` field. `extract_uinode_borders` * Repurposed the UV coords to control which part of the border is drawn. `UiVertex` * Added `radius` and `size` fields which are needed to draw the rounded corners. `UiPipeline` * Added vertex attributes for radius and size. `ui.wgsl` * Checks to see if we are outside a corner edge and if so sets the alpha channel to zero.

…only have min = zero, max = size.

…e otherwise it always draws a border middle section

Replaced the multiple if statements with a switch statement.

* Refactored to remove duplicate code. `ui.wgsl` * Switched colors for the inverted mix function, which were in the wrong the wrong order. `button` example * Added a rounded border to the button.

Fixes bulging in corner curves. Updates examples to use new features. `UiCornerRadius` * Now wraps a `[f32; 4]` value. * Added a method `all` that sets all four corners to the same radius. `UiPipeline` * Added a `Float32x4` attribute to take the border thickness. * Radius attribute changed to a `Float32x4` `extract_uinode_borders` * No longer assembles a border from multiple rects, much simpler now. Most of this function was deleted. `ExtractedUiNode` * Added an [f32; 4] `thickness` field * Type of `corner_radius` changed to `[f32; 4]` `ui.wgsl` * Reworked to support new features and bug fixes.

…ed edges. `UiCornerRadius` * Now has named fields `top_left`, `top_right`, `bottom_left` and `bottom_right`. * Added lots of helper functions. * Implemented `From<UiCornerRadius>` for `[f32; 4] `prepare_uinodes` * Changed order of thickness values when added to `UiVertex`. Don't remember why. `ui.wgsl` * Cleaned up and fixed some bugs where corners and edges were taking wrong radius and thickness values.

ickshonpe · 2023-06-28T23:02:32Z

Fixed all the obvious bugs. Just percentage and viewport Val support left to implement.

The fields are now type `Val`. Full support for all variants, `Auto` maps to `0.` `ExtractUiNodes`: `thickness` field renamed to `border`. `UiVertex`: `thickness` field renamed to `border`.

nicoburns · 2023-06-30T09:03:49Z

The inner radii don't look right to me. I think the inner radius should be the outer radius minus the border width. So if you have a 5px border and a corner radius of 5px or less then the inner corner shouldn't be rounded at all.

ickshonpe · 2023-06-30T09:19:21Z

The inner radii don't look right to me. I think the inner radius should be the outer radius minus the border width. So if you have a 5px border and a corner radius of 5px or less then the inner corner shouldn't be rounded at all.

That is how I'm calculating the inner radius:

commands.spawn(NodeBundle {
    style: Style {
        width: Val::Px(400.),
        height: Val::Px(400.),                
        border: UiRect::px(100., 100., 100., 100.),
        border_radius: UiBorderRadius::px(50., 100., 150., 200.),
        ..Default::default()
    },
    border_color: Color::RED.into(),
    background_color: Color::WHITE.into(),
    ..Default::default()
});

It's because of problems with the anti-aliasing that some of the example images look a little bit off. I'm leaving fixing the AA until last.

* `UiBorderRadius` no longer a component and removed from all node bundles. `UiBorderRadius` * Renamed from `UiCornerRadius` * No longer a component, moved to a field of `Style` instead. * Added a const DEFAULT. * Default radii changed to `Val::Px(0.)` from `Val::Auto`. `Style` * Added `border_radius: UiBorderRadius` field. `ExtractedUiNodes` * `corner_radius` renamed to `border_radius` `extract_uinodes`, `extract_uinode_borders`, and `extract_atlas_uinodes`: Now query for `Style` instead of `UiBorderRadius`.

* Added a border to each button. * Borders can be disabled with the "no-borders" commandline argument.

tadeohepperle · 2023-08-11T22:13:31Z

I think there might be some weird interactions with UiScale resource. Setting the UiScale.scale to values other than 1 causes the borders to be rendered differently. The images below use border_radius: UiBorderRadius::MAX
scale = 0.5:

scale = 1.0:

scale = 2.0:

superdump · 2023-10-01T20:23:41Z

Random question - why does the shadow on the light, transparent circle increase the brightness? That's not a shadow :)

gabriel-gheorghe · 2023-10-09T11:51:13Z

It would also be nice to be able to choose the shadow color.

Bcompartment · 2023-11-05T12:35:42Z

Squircles
I propose to add option to use squircle corner rounding.
The rounding starts deep within the straight line and gradually grows into a visible curve.
Squircles are complex curves that remove the discontinuity between the straight and curved sections of a surface. Look at a curved surface that isn’t a squircle and you’ll be able to see where the straight line ends and the curve starts.

https://en.wikipedia.org/wiki/Squircle#/media/File:Squircle_rounded_square.svg

viridia · 2023-12-11T03:50:34Z

I just wanted to add that if clipping is holding up this PR, I would say go ahead and commit even if clipping is not there yet, and finish it in a future PR. While round-corner clipping is very handy to have, there are lots of use cases that don't require clipping. And since no one is forced to use rounded corners, it is "strictly no worse" than what they had previously.

The same logic holds for shadows.

JMS55 · 2023-12-30T07:12:36Z

Found an article on how to render box shadows well on the GPU https://madebyevan.com/shaders/fast-rounded-rectangle-shadows

doonv

Looks pretty good!
I have a lot of nitpicks here, so I wanted to tell you that the main problem is examples/games/game_menu.rs:709. Here you used UiBorderRadius::max() which doesn't exist. Use UiBorderRadius::MAX instead.

doonv · 2023-12-31T21:27:35Z

examples/games/game_menu.rs

@@ -698,6 +706,7 @@ mod menu {
            width: Val::Px(200.0),
            height: Val::Px(65.0),
            margin: UiRect::all(Val::Px(20.0)),
+            border_radius: UiBorderRadius::max(),


UiBorderRadius::max() doesn't exist, did you mean UiBorderRadius::MAX?

Suggested change

border_radius: UiBorderRadius::max(),

border_radius: UiBorderRadius::MAX,

doonv · 2023-12-31T21:32:39Z

crates/bevy_ui/src/geometry.rs

+    /// assert_eq!(ui_rect.bottom, Val::Vw(25.0));
+    /// ```
+    #[inline]
+    pub fn with_left(mut self, left: Val) -> UiRect {


You should probably use Self instead of UiRect here. (Repeat with similar methods)

Suggested change

pub fn with_left(mut self, left: Val) -> UiRect {

pub fn with_left(mut self, left: Val) -> Self {

doonv · 2023-12-31T21:35:34Z

crates/bevy_ui/src/layout/convert.rs

@@ -465,6 +465,7 @@ mod tests {
            ],
            grid_column: GridPlacement::start(4),
            grid_row: GridPlacement::span(3),
+            border_radius: Default::default(),


Suggested change

border_radius: Default::default(),

border_radius: UiBorderRadius::default(),

doonv · 2023-12-31T21:38:59Z

examples/ui/size_constraints.rs

@@ -163,7 +168,7 @@ fn spawn_button_row(parent: &mut ChildBuilder, constraint: Constraint, text_styl
                align_items: AlignItems::Stretch,
                ..Default::default()
            },
-            background_color: Color::BLACK.into(),
+            //background_color: Color::BLACK.into(),


Suggested change

//background_color: Color::BLACK.into(),

doonv · 2023-12-31T21:40:18Z

crates/bevy_ui/src/ui_node.rs

+    pub const MAX: Self = Self {
+        top_left: Val::Px(f32::MAX),
+        top_right: Val::Px(f32::MAX),
+        bottom_right: Val::Px(f32::MAX),
+        bottom_left: Val::Px(f32::MAX),
+    };


Suggested change

pub const MAX: Self = Self {

top_left: Val::Px(f32::MAX),

top_right: Val::Px(f32::MAX),

bottom_right: Val::Px(f32::MAX),

bottom_left: Val::Px(f32::MAX),

};

pub const MAX: Self = Self::all(Val::Px(f32::MAX)),

doonv · 2023-12-31T21:43:19Z

examples/ui/ui.rs

+                                    height: Val::Px(100.0),
+                                    left: Val::Px(-10.),
+                                    bottom: Val::Px(-10.),
+                                    border_radius: UiBorderRadius::all(Val::Px(f32::MAX)),
