Add Border and BorderRadius components to bevy_ui

Author: oceantume

crates/bevy_ui/src/node_bundles.rs

@@ -1,11 +1,10 @@
 //! This module contains basic node bundles used to build UIs
 
 #[cfg(feature = "bevy_text")]
-use crate::widget::TextFlags;
 use crate::{
-    widget::{Button, UiImageSize},
-    BackgroundColor, BorderColor, ContentSize, FocusPolicy, Interaction, Node, Style, UiImage,
-    UiMaterial, ZIndex,
+    widget::{Button, TextFlags, UiImageSize},
+    BackgroundColor, Border, BorderColor, ContentSize, CornerRadius, FocusPolicy, Interaction,
+    Node, Style, UiImage, UiMaterial, ZIndex,
 };
 use bevy_asset::Handle;
 use bevy_ecs::bundle::Bundle;
@@ -50,6 +49,10 @@ pub struct NodeBundle {
     pub visibility: Visibility,
     /// Inherited visibility of an entity.
     pub inherited_visibility: InheritedVisibility,
+    /// Describes the radius of corners for the node
+    pub corner_radius: CornerRadius,
+    /// Describes the visual properties of the node's border
+    pub border: Border,
     /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering
     pub view_visibility: ViewVisibility,
     /// Indicates the depth at which the node should appear in the UI
@@ -70,6 +73,8 @@ impl Default for NodeBundle {
             visibility: Default::default(),
             inherited_visibility: Default::default(),
             view_visibility: Default::default(),
+            corner_radius: Default::default(),
+            border: Default::default(),
             z_index: Default::default(),
         }
     }
@@ -115,6 +120,10 @@ pub struct ImageBundle {
     pub visibility: Visibility,
     /// Inherited visibility of an entity.
     pub inherited_visibility: InheritedVisibility,
+    /// Describes the radius of corners for the node
+    pub corner_radius: CornerRadius,
+    /// Describes the visual properties of the node's border
+    pub border: Border,
     /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering
     pub view_visibility: ViewVisibility,
     /// Indicates the depth at which the node should appear in the UI
@@ -330,6 +339,10 @@ pub struct ButtonBundle {
     pub visibility: Visibility,
     /// Inherited visibility of an entity.
     pub inherited_visibility: InheritedVisibility,
+    /// Describes the radius of corners for the node
+    pub corner_radius: CornerRadius,
+    /// Describes the visual properties of the node's border
+    pub border: Border,
     /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering
     pub view_visibility: ViewVisibility,
     /// Indicates the depth at which the node should appear in the UI
@@ -352,6 +365,8 @@ impl Default for ButtonBundle {
             visibility: Default::default(),
             inherited_visibility: Default::default(),
             view_visibility: Default::default(),
+            corner_radius: Default::default(),
+            border: Default::default(),
             z_index: Default::default(),
         }
     }

crates/bevy_ui/src/render/mod.rs

@@ -2,42 +2,47 @@ mod pipeline;
 mod render_pass;
 mod ui_material_pipeline;
 
-use bevy_core_pipeline::core_2d::graph::{Labels2d, SubGraph2d};
-use bevy_core_pipeline::core_3d::graph::{Labels3d, SubGraph3d};
-use bevy_core_pipeline::{core_2d::Camera2d, core_3d::Camera3d};
-use bevy_hierarchy::Parent;
-use bevy_render::{
-    render_phase::PhaseItem, render_resource::BindGroupEntries, view::ViewVisibility,
-    ExtractSchedule, Render,
-};
-use bevy_sprite::{SpriteAssetEvents, TextureAtlas};
 pub use pipeline::*;
 pub use render_pass::*;
 pub use ui_material_pipeline::*;
 
-use crate::graph::{LabelsUi, SubGraphUi};
 use crate::{
-    texture_slice::ComputedTextureSlices, BackgroundColor, BorderColor, CalculatedClip,
-    ContentSize, DefaultUiCamera, Node, Outline, Style, TargetCamera, UiImage, UiScale, Val,
+    graph::{LabelsUi, SubGraphUi},
+    texture_slice::ComputedTextureSlices,
+    BackgroundColor, Border, BorderColor, CalculatedClip, ContentSize, CornerRadius,
+    DefaultUiCamera, Node, Outline, Style, TargetCamera, UiImage, UiScale, Val,
 };
 
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, AssetId, Assets, Handle};
+use bevy_core_pipeline::{
+    core_2d::{
+        graph::{Labels2d, SubGraph2d},
+        Camera2d,
+    },
+    core_3d::{
+        graph::{Labels3d, SubGraph3d},
+        Camera3d,
+    },
+};
 use bevy_ecs::prelude::*;
-use bevy_math::{Mat4, Rect, URect, UVec4, Vec2, Vec3, Vec4Swizzles};
+use bevy_hierarchy::Parent;
+use bevy_math::{Mat4, Rect, URect, UVec4, Vec2, Vec3, Vec4, Vec4Swizzles};
 use bevy_render::{
     camera::Camera,
     color::Color,
     render_asset::RenderAssets,
     render_graph::{RenderGraph, RunGraphOnViewNode},
-    render_phase::{sort_phase_system, AddRenderCommand, DrawFunctions, RenderPhase},
-    render_resource::*,
+    render_phase::{sort_phase_system, AddRenderCommand, DrawFunctions, PhaseItem, RenderPhase},
+    render_resource::{BindGroupEntries, *},
     renderer::{RenderDevice, RenderQueue},
     texture::Image,
-    view::{ExtractedView, ViewUniforms},
-    Extract, RenderApp, RenderSet,
+    view::{ExtractedView, ViewUniforms, ViewVisibility},
+    Extract, ExtractSchedule, Render, RenderApp, RenderSet,
+};
+use bevy_sprite::{
+    TextureAtlasLayout, {SpriteAssetEvents, TextureAtlas},
 };
-use bevy_sprite::TextureAtlasLayout;
 #[cfg(feature = "bevy_text")]
 use bevy_text::{PositionedGlyph, Text, TextLayoutInfo};
 use bevy_transform::components::GlobalTransform;
@@ -139,6 +144,9 @@ pub struct ExtractedUiNode {
     pub clip: Option<Rect>,
     pub flip_x: bool,
     pub flip_y: bool,
+    pub border_color: Option<Color>,
+    pub border_width: Option<f32>,
+    pub corner_radius: Option<[f32; 4]>,
     // Camera to render this UI node to. By the time it is extracted,
     // it is defaulted to a single camera if only one exists.
     // Nodes with ambiguous camera will be ignored.
@@ -277,6 +285,9 @@ pub fn extract_uinode_borders(
                         flip_x: false,
                         flip_y: false,
                         camera_entity,
+                        border_color: Default::default(),
+                        border_width: Default::default(),
+                        corner_radius: Default::default(),
                     },
                 );
             }
@@ -368,6 +379,9 @@ pub fn extract_uinode_outlines(
                         flip_x: false,
                         flip_y: false,
                         camera_entity,
+                        border_color: Default::default(),
+                        border_width: Default::default(),
+                        corner_radius: Default::default(),
                     },
                 );
             }
@@ -392,6 +406,8 @@ pub fn extract_uinodes(
             Option<&TextureAtlas>,
             Option<&TargetCamera>,
             Option<&ComputedTextureSlices>,
+            Option<&CornerRadius>,
+            Option<&Border>,
         )>,
     >,
 ) {
@@ -406,6 +422,8 @@ pub fn extract_uinodes(
         atlas,
         camera,
         slices,
+        corner_radius,
+        border,
     ) in uinode_query.iter()
     {
         let Some(camera_entity) = camera.map(TargetCamera::entity).or(default_ui_camera.get())
@@ -420,7 +438,16 @@ pub fn extract_uinodes(
         if let Some((image, slices)) = maybe_image.zip(slices) {
             extracted_uinodes.uinodes.extend(
                 slices
-                    .extract_ui_nodes(transform, uinode, color, image, clip, camera_entity)
+                    .extract_ui_nodes(
+                        transform,
+                        uinode,
+                        color,
+                        image,
+                        clip,
+                        camera_entity,
+                        *corner_radius.unwrap(),
+                        *border.unwrap(),
+                    )
                     .map(|e| (commands.spawn_empty().id(), e)),
             );
             continue;
@@ -468,6 +495,9 @@ pub fn extract_uinodes(
                 flip_x,
                 flip_y,
                 camera_entity,
+                border_color: border.map(|border| border.color),
+                border_width: border.map(|border| border.width),
+                corner_radius: corner_radius.map(|corner_radius| corner_radius.to_array()),
             },
         );
     }
@@ -564,11 +594,22 @@ pub fn extract_text_uinodes(
             &ViewVisibility,
             Option<&CalculatedClip>,
             Option<&TargetCamera>,
+            Option<&CornerRadius>,
+            Option<&Border>,
         )>,
     >,
 ) {
-    for (uinode, global_transform, text, text_layout_info, view_visibility, clip, camera) in
-        uinode_query.iter()
+    for (
+        uinode,
+        global_transform,
+        text,
+        text_layout_info,
+        view_visibility,
+        clip,
+        camera,
+        corner_radius,
+        border,
+    ) in uinode_query.iter()
     {
         let Some(camera_entity) = camera.map(TargetCamera::entity).or(default_ui_camera.get())
         else {
@@ -631,6 +672,9 @@ pub fn extract_text_uinodes(
                     clip: clip.map(|clip| clip.clip),
                     flip_x: false,
                     flip_y: false,
+                    border_color: border.map(|border| border.color),
+                    border_width: border.map(|border| border.width),
+                    corner_radius: corner_radius.map(|corner_radius| corner_radius.to_array()),
                     camera_entity,
                 },
             );
@@ -643,6 +687,26 @@ pub fn extract_text_uinodes(
 struct UiVertex {
     pub position: [f32; 3],
     pub uv: [f32; 2],
+    pub uniform_index: u32,
+}
+
+const MAX_UI_UNIFORM_ENTRIES: usize = 256;
+
+#[repr(C)]
+#[derive(Copy, Clone, Debug)]
+pub struct UiUniform {
+    entries: [UiUniformEntry; MAX_UI_UNIFORM_ENTRIES],
+}
+
+#[repr(C)]
+#[derive(Copy, Clone, Debug, Default)]
+pub struct UiUniformEntry {
+    pub size: Vec2,
+    pub center: Vec2,
+    pub border_color: u32,
+    pub border_width: f32,
+    /// NOTE: This is a Vec4 because using [f32; 4] with AsStd140 results in a 16-bytes alignment.
+    pub corner_radius: Vec4,
     pub color: [f32; 4],
     pub mode: u32,
 }
@@ -651,13 +715,17 @@ struct UiVertex {
 pub struct UiMeta {
     vertices: BufferVec<UiVertex>,
     view_bind_group: Option<BindGroup>,
+    ui_uniforms: UiUniform,
+    ui_uniform_bind_group: Option<BindGroup>,
 }
 
 impl Default for UiMeta {
     fn default() -> Self {
         Self {
             vertices: BufferVec::new(BufferUsages::VERTEX),
             view_bind_group: None,
+            ui_uniforms: Default::default(),
+            ui_uniform_bind_group: None,
         }
     }
 }
@@ -671,10 +739,12 @@ pub(crate) const QUAD_VERTEX_POSITIONS: [Vec3; 4] = [
 
 pub(crate) const QUAD_INDICES: [usize; 6] = [0, 2, 3, 0, 1, 2];
 
-#[derive(Component)]
+#[derive(Component, Debug)]
 pub struct UiBatch {
     pub range: Range<u32>,
     pub image: AssetId<Image>,
+    pub ui_uniform_offset: u32,
+    pub z: f32,
     pub camera: Entity,
 }
 
@@ -787,6 +857,8 @@ pub fn prepare_uinodes(
                                 range: index..index,
                                 image: extracted_uinode.image,
                                 camera: extracted_uinode.camera_entity,
+                                ui_uniform_offset: 0,
+                                z: 0.0,
                             };
 
                             batches.push((item.entity, new_batch));
@@ -937,13 +1009,11 @@ pub fn prepare_uinodes(
                         .map(|pos| pos / atlas_extent)
                     };
 
-                    let color = extracted_uinode.color.as_linear_rgba_f32();
                     for i in QUAD_INDICES {
                         ui_meta.vertices.push(UiVertex {
                             position: positions_clipped[i].into(),
                             uv: uvs[i].into(),
-                            color,
-                            mode,
+                            uniform_index: 0,
                         });
                     }
                     index += QUAD_INDICES.len() as u32;

crates/bevy_ui/src/render/pipeline.rs

@@ -13,6 +13,7 @@ use bevy_render::{
 pub struct UiPipeline {
     pub view_layout: BindGroupLayout,
     pub image_layout: BindGroupLayout,
+    pub ui_uniform_layout: BindGroupLayout,
 }
 
 impl FromWorld for UiPipeline {
@@ -38,9 +39,25 @@ impl FromWorld for UiPipeline {
             ),
         );
 
+        let ui_uniform_layout = render_device.create_bind_group_layout(
+            Some("ui_uniform_layout"),
+            &[BindGroupLayoutEntry {
+                binding: 0,
+                visibility: ShaderStages::VERTEX,
+                ty: BindingType::Buffer {
+                    ty: BufferBindingType::Uniform,
+                    has_dynamic_offset: true,
+                    min_binding_size: BufferSize::new(0u64),
+                },
+
+                count: None,
+            }],
+        );
+
         UiPipeline {
             view_layout,
             image_layout,
+            ui_uniform_layout,
         }
     }
 }
@@ -57,11 +74,21 @@ impl SpecializedRenderPipeline for UiPipeline {
         let vertex_layout = VertexBufferLayout::from_vertex_formats(
             VertexStepMode::Vertex,
             vec![
-                // position
+                // Position
                 VertexFormat::Float32x3,
-                // uv
+                // UV
+                VertexFormat::Float32x2,
+                // UiUniform Node Index
+                VertexFormat::Uint32,
+                // Size
+                VertexFormat::Float32x2,
+                // Center
                 VertexFormat::Float32x2,
-                // color
+                // Border Color
+                VertexFormat::Uint32,
+                // Border Width
+                VertexFormat::Float32,
+                // Corner Radius
                 VertexFormat::Float32x4,
                 // mode
                 VertexFormat::Uint32,
@@ -90,7 +117,11 @@ impl SpecializedRenderPipeline for UiPipeline {
                     write_mask: ColorWrites::ALL,
                 })],
             }),
-            layout: vec![self.view_layout.clone(), self.image_layout.clone()],
+            layout: vec![
+                self.view_layout.clone(),
+                self.image_layout.clone(),
+                self.ui_uniform_layout.clone(),
+            ],
             push_constant_ranges: Vec::new(),
             primitive: PrimitiveState {
                 front_face: FrontFace::Ccw,