Add UI Materials

Cargo.toml

@@ -2298,6 +2298,17 @@ description = "Demonstrates resizing and responding to resizing a window"
 category = "Window"
 wasm = true
 
+[[example]]
+name = "ui_material"
+path = "examples/ui/ui_material.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.ui_material]
+name = "UI Material"
+description = "Demonstrates Creating and using custom Ui materials"
+category = "UI (User Interface)"
+wasm = true
+
 [profile.wasm-release]
 inherits = "release"
 opt-level = "z"

assets/shaders/circle_shader.wgsl

@@ -0,0 +1,43 @@
+// This shader draws a circular progress bar
+#import bevy_render::view View
+#import bevy_ui::ui_vertex_output UiVertexOutput
+
+struct CustomUiMaterial {
+    @location(0) fill_amount: f32,
+    @location(1) color: vec4<f32>
+}
+
+@group(0) @binding(0)
+var<uniform> view: View;
+@group(1) @binding(0)
+var<uniform> input: CustomUiMaterial;
+
+// How smooth the border of the gradient should be
+const gradient_ease: f32 = 25.0;
+// the width of the gradient
+const width = 0.25;
+const PI = 3.141592656;
+const TAU = 6.283185312;
+
+@fragment
+fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
+    let fill_amount = input.fill_amount;
+    let fill_angle = fill_amount * TAU;
+    let uv = in.uv * 2.0 - 1.0;
+    var color = vec4<f32>(0.0);
+    if (atan2(uv.y, uv.x) + PI < fill_angle) {
+        var inner_width = 1.0 - width;
+        inner_width *= inner_width;
+        let d = uv.x * uv.x + uv.y * uv.y;
+        if (d <= 1.0 && d >= inner_width) {
+            var w: f32 = abs((1.0 + inner_width) / 2.0 - d) / (1.0 - inner_width);
+            w = 1.0 - pow(w + 0.5, gradient_ease);
+            color = vec4<f32>(input.color.rgb, min(1.0, w));
+        } else {
+            color.a = 0.0;
+        }
+    } else {
+        color.a = 0.0;
+    }
+    return color;
+}

crates/bevy_ui/src/lib.rs

@@ -6,6 +6,7 @@
 //! This UI is laid out with the Flexbox and CSS Grid layout models (see <https://cssreference.io/flexbox/>)
 
 pub mod camera_config;
+pub mod material;
 pub mod measurement;
 pub mod node_bundles;
 pub mod update;
@@ -25,6 +26,7 @@ mod ui_node;
 pub use focus::*;
 pub use geometry::*;
 pub use layout::*;
+pub use material::*;
 pub use measurement::*;
 pub use render::*;
 pub use ui_node::*;
@@ -34,8 +36,8 @@ use widget::UiImageSize;
 pub mod prelude {
     #[doc(hidden)]
     pub use crate::{
-        camera_config::*, geometry::*, node_bundles::*, ui_node::*, widget::Button, widget::Label,
-        Interaction, UiScale,
+        camera_config::*, geometry::*, material::*, node_bundles::*, ui_node::*, widget::Button,
+        widget::Label, Interaction, UiMaterialPlugin, UiScale,
     };
 }
 

crates/bevy_ui/src/material.rs

@@ -0,0 +1,129 @@
+use std::hash::Hash;
+
+use bevy_asset::Asset;
+use bevy_render::render_resource::{AsBindGroup, RenderPipelineDescriptor, ShaderRef};
+/// Materials are used alongside [`UiMaterialPlugin`](crate::UiMaterialPipeline) and [`MaterialNodeBundle`](crate::prelude::MaterialNodeBundle)
+/// to spawn entities that are rendered with a specific [`UiMaterial`] type. They serve as an easy to use high level
+/// way to render `Node` entities with custom shader logic.
+///
+/// `UiMaterials` must implement [`AsBindGroup`] to define how data will be transferred to the GPU and bound in shaders.
+/// [`AsBindGroup`] can be derived, which makes generating bindings straightforward. See the [`AsBindGroup`] docs for details.
+///
+/// Materials must also implement [`Asset`] so they can be treated as such.
+///
+/// # Example
+///
+/// Here is a simple [`UiMaterial`] implementation. The [`AsBindGroup`] derive has many features. To see what else is available,
+/// check out the [`AsBindGroup`] documentation.
+/// ```
+/// # use bevy_ui::prelude::*;
+/// # use bevy_ecs::prelude::*;
+/// # use bevy_reflect::TypePath;
+/// # use bevy_render::{render_resource::{AsBindGroup, ShaderRef}, texture::Image, color::Color};
+/// # use bevy_asset::{Handle, AssetServer, Assets, Asset};
+///
+/// #[derive(AsBindGroup, Asset, TypePath, Debug, Clone)]
+/// pub struct CustomMaterial {
+///     // Uniform bindings must implement `ShaderType`, which will be used to convert the value to
+///     // its shader-compatible equivalent. Most core math types already implement `ShaderType`.
+///     #[uniform(0)]
+///     color: Color,
+///     // Images can be bound as textures in shaders. If the Image's sampler is also needed, just
+///     // add the sampler attribute with a different binding index.
+///     #[texture(1)]
+///     #[sampler(2)]
+///     color_texture: Handle<Image>,
+/// }
+///
+/// // All functions on `UiMaterial` have default impls. You only need to implement the
+/// // functions that are relevant for your material.
+/// impl UiMaterial for CustomMaterial {
+///     fn fragment_shader() -> ShaderRef {
+///         "shaders/custom_material.wgsl".into()
+///     }
+/// }
+///
+/// // Spawn an entity using `CustomMaterial`.
+/// fn setup(mut commands: Commands, mut materials: ResMut<Assets<CustomMaterial>>, asset_server: Res<AssetServer>) {
+///     commands.spawn(MaterialNodeBundle {
+///         style: Style {
+///             width: Val::Percent(100.0),
+///             ..Default::default()
+///         },
+///         material: materials.add(CustomMaterial {
+///             color: Color::RED,
+///             color_texture: asset_server.load("some_image.png"),
+///         }),
+///         ..Default::default()
+///     });
+/// }
+/// ```
+/// In WGSL shaders, the material's binding would look like this:
+///
+/// ```wgsl
+/// struct CustomMaterial {
+///     color: vec4<f32>,
+/// }
+///
+/// @group(1) @binding(0)
+/// var<uniform> material: CustomMaterial;
+/// @group(1) @binding(1)
+/// var color_texture: texture_2d<f32>;
+/// @group(1) @binding(2)
+/// var color_sampler: sampler;
+/// ```
+pub trait UiMaterial: AsBindGroup + Asset + Clone + Sized {
+    /// Returns this materials vertex shader. If [`ShaderRef::Default`] is returned, the default UI
+    /// vertex shader will be used.
+    fn vertex_shader() -> ShaderRef {
+        ShaderRef::Default
+    }
+
+    /// Returns this materials fragment shader. If [`ShaderRef::Default`] is returned, the default
+    /// UI fragment shader will be used.
+    fn fragment_shader() -> ShaderRef {
+        ShaderRef::Default
+    }
+
+    #[allow(unused_variables)]
+    #[inline]
+    fn specialize(descriptor: &mut RenderPipelineDescriptor, key: UiMaterialKey<Self>) {}
+}
+
+pub struct UiMaterialKey<M: UiMaterial> {
+    pub hdr: bool,
+    pub bind_group_data: M::Data,
+}
+
+impl<M: UiMaterial> Eq for UiMaterialKey<M> where M::Data: PartialEq {}
+
+impl<M: UiMaterial> PartialEq for UiMaterialKey<M>
+where
+    M::Data: PartialEq,
+{
+    fn eq(&self, other: &Self) -> bool {
+        self.hdr == other.hdr && self.bind_group_data == other.bind_group_data
+    }
+}
+
+impl<M: UiMaterial> Clone for UiMaterialKey<M>
+where
+    M::Data: Clone,
+{
+    fn clone(&self) -> Self {
+        Self {
+            hdr: self.hdr,
+            bind_group_data: self.bind_group_data.clone(),
+        }
+    }
+}
+
+impl<M: UiMaterial> Hash for UiMaterialKey<M>
+where
+    M::Data: Hash,
+{
+    fn hash<H: std::hash::Hasher>(&self, state: &mut H) {
+        self.hdr.hash(state);
+        self.bind_group_data.hash(state);
+    }
+}

crates/bevy_ui/src/node_bundles.rs

@@ -5,7 +5,7 @@ use crate::widget::TextFlags;
 use crate::{
     widget::{Button, UiImageSize},
     BackgroundColor, BorderColor, ContentSize, FocusPolicy, Interaction, Node, Style, UiImage,
-    UiTextureAtlasImage, ZIndex,
+    UiMaterial, UiTextureAtlasImage, ZIndex,
 };
 use bevy_asset::Handle;
 use bevy_ecs::bundle::Bundle;
@@ -329,3 +329,52 @@ impl Default for ButtonBundle {
         }
     }
 }
+
+/// A UI node that is rendered using a [`UiMaterial`]
+#[derive(Bundle, Clone, Debug)]
+pub struct MaterialNodeBundle<M: UiMaterial> {
+    /// Describes the logical size of the node
+    pub node: Node,
+    /// Styles which control the layout (size and position) of the node and it's children
+    /// In some cases these styles also affect how the node drawn/painted.
+    pub style: Style,
+    /// The [`UiMaterial`] used to render the node.
+    pub material: Handle<M>,
+    /// Whether this node should block interaction with lower nodes
+    pub focus_policy: FocusPolicy,
+    /// The transform of the node
+    ///
+    /// This field is automatically managed by the UI layout system.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    pub transform: Transform,
+    /// The global transform of the node
+    ///
+    /// This field is automatically managed by the UI layout system.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    pub global_transform: GlobalTransform,
+    /// Describes the visibility properties of the node
+    pub visibility: Visibility,
+    /// Inherited visibility of an entity.
+    pub inherited_visibility: InheritedVisibility,
+    /// 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
+    pub z_index: ZIndex,
+}
+
+impl<M: UiMaterial> Default for MaterialNodeBundle<M> {
+    fn default() -> Self {
+        Self {
+            node: Default::default(),
+            style: Default::default(),
+            material: Default::default(),
+            focus_policy: Default::default(),
+            transform: Default::default(),
+            global_transform: Default::default(),
+            visibility: Default::default(),
+            inherited_visibility: Default::default(),
+            view_visibility: Default::default(),
+            z_index: Default::default(),
+        }
+    }
+}

crates/bevy_ui/src/render/material.wgsl

@@ -0,0 +1,23 @@
+#import bevy_render::view  View
+#import bevy_ui::ui_vertex_output UiVertexOutput
+
+@group(0) @binding(0)
+var<uniform> view: View;
+
+@vertex
+fn vertex(
+    @location(0) vertex_position: vec3<f32>,
+    @location(1) vertex_uv: vec2<f32>,
+    @location(2) vertex_color: vec4<f32>,
+) -> UiVertexOutput {
+    var out: UiVertexOutput;
+    out.uv = vertex_uv;
+    out.position = view.view_proj * vec4<f32>(vertex_position, 1.0);
+    out.color = vertex_color;
+    return out;
+}
+
+@fragment
+fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
+    return vec4<f32>(1.0);
+}