bevy/crates
ickshonpe bf20c630a8
UI Node Gradients (#18139)
# Objective

Allowing drawing of UI nodes with a gradient instead of a flat color.

## Solution

The are three gradient structs corresponding to the three types of
gradients supported: `LinearGradient`, `ConicGradient` and
`RadialGradient`. These are then wrapped in a `Gradient` enum
discriminator which has `Linear`, `Conic` and `Radial` variants.

Each gradient type consists of the geometric properties for that
gradient and a list of color stops.
Color stops consist of a color, a position or angle and an optional
hint. If no position is specified for a stop, it's evenly spaced between
the previous and following stops. Color stop positions are absolute, if
you specify a list of stops:
```vec![vec![ColorStop::new(RED, Val::Percent(90.), ColorStop::new(Color::GREEN, Val::Percent(10.))```
the colors will be reordered and the gradient will transition from green at 10% to red at 90%. 

Colors are interpolated between the stops in SRGB space. The hint is a normalized value that can be used to shift the mid-point where the colors are mixed 50-50.  between the stop with the hint and the following stop.

For sharp stops with no interpolated transition, place two stops at the same position.

`ConicGradient`s and RadialGradient`s have a center which is set using the new `Position` type. `Position` consists of a normalized (relative to the UI node) `Vec2` anchor point and a responsive x, y offset.

To draw a UI node with a gradient you insert the components `BackgroundGradient` and `BorderGradient`, which both newtype a vector of `Gradient`s. If you set a background color, the background color is drawn first and the gradient(s) are drawn on top.

The implementation is deliberately simple and self contained. The shader draws the gradient in multiple passes which is quite inefficient for gradients with a very large number of color stops. It's simple though and there won't be any compatibility issues. We could make gradients a specialization for `UiPipeline` but I used a separate pipeline plugin for now to ensure that these changes don't break anything. 

#### Not supported in this PR
* Interpolation in other color spaces besides SRGB. 
* Images and text: This would need some breaking changes like a `UiColor` enum type with `Color` and `Gradient` variants, to enable `BorderColor`, `TextColor`, `BackgroundColor` and `ImageNode::color` to take either a `Color` or a gradient.
* Repeating gradients

## Testing

Includes three examples that can be used for testing:
```
cargo run --example linear_gradients
cargo run --example stacked_gradients
cargo run --example radial_gradients
```

Most of the code except the components API is contained within the `bevy_ui/src/render/linear_gradients` module.
There are no changes to any existing systems or plugins except for the addition of the gradients rendering systems to the render world schedule and the `Val` changes from #18164 . 

## Showcase

![gradients](https://github.com/user-attachments/assets/a09c5bb2-f9dc-4bc5-9d17-21a6338519d3)
![stacked](https://github.com/user-attachments/assets/7a1ad28e-8ae0-41d5-85b2-aa62647aef03)
![rad](https://github.com/user-attachments/assets/48609cf1-52aa-453c-afba-3b4845f3ddec)

Conic gradients can be used to draw simple pie charts like in CSS:
![PIE](https://github.com/user-attachments/assets/4594b96f-52ab-4974-911a-16d065d213bc)
2025-05-20 14:45:22 +00:00
..
bevy_a11y Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_animation Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_anti_aliasing Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_app Per world error handler (#18810) 2025-05-19 01:35:07 +00:00
bevy_asset Use embedded_asset to load PBR shaders (#19137) 2025-05-16 05:47:34 +00:00
bevy_audio Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_color Implemented Alpha for f32. (#18653) 2025-05-06 00:00:17 +00:00
bevy_core_pipeline Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_derive
bevy_dev_tools Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_diagnostic Update sysinfo version to 0.35.0 (#19028) 2025-05-05 05:49:23 +00:00
bevy_dylib don't disable std in bevy_dylib (#18807) 2025-04-11 18:44:53 +00:00
bevy_ecs Add missing words in Traversal doc comment (#19298) 2025-05-19 19:34:59 +00:00
bevy_encase_derive
bevy_gilrs Remove remaining internal use of !Send resources (#18386) 2025-05-06 22:23:59 +00:00
bevy_gizmos Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_gltf Use material name for mesh entity's Name when available (#19287) 2025-05-20 14:45:04 +00:00
bevy_image Missing punctuation (#19097) 2025-05-06 23:01:59 +00:00
bevy_input Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_input_focus Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_internal Per world error handler (#18810) 2025-05-19 01:35:07 +00:00
bevy_log feat(log): support customizing default log formatting (#17722) 2025-05-05 23:01:06 +00:00
bevy_macro_utils Fix warnings and errors reported on Rust beta (#19294) 2025-05-19 23:56:48 +00:00
bevy_math Deprecated Begone! 0.16 Cleanup (#19108) 2025-05-07 18:17:41 +00:00
bevy_mesh Rename bevy_platform_support to bevy_platform (#18813) 2025-04-11 23:13:28 +00:00
bevy_mikktspace fix new nightly lint on mikktspace (#18988) 2025-04-30 05:19:01 +00:00
bevy_pbr Fix spot light shadow glitches (#19273) 2025-05-19 19:42:09 +00:00
bevy_picking Add boilerplate docs for PointerHits::new and HitData::new (#19259) 2025-05-19 19:22:07 +00:00
bevy_platform Create bevy_platform::cfg for viral feature management (#18822) 2025-05-06 00:52:15 +00:00
bevy_ptr
bevy_reflect Deprecated Begone! 0.16 Cleanup (#19108) 2025-05-07 18:17:41 +00:00
bevy_remote Make entity::index non max (#18704) 2025-05-07 18:20:30 +00:00
bevy_render refactor(render): cleanup add_import_to_composer (#19269) 2025-05-18 06:30:38 +00:00
bevy_scene Make entity generation a new type and remove identifier (#19121) 2025-05-08 04:03:05 +00:00
bevy_sprite Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_state Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_tasks Rename bevy_platform_support to bevy_platform (#18813) 2025-04-11 23:13:28 +00:00
bevy_text Remove YAxisOrientation from bevy_text (#19077) 2025-05-19 19:17:20 +00:00
bevy_time Adopt consistent FooSystems naming convention for system sets (#18900) 2025-05-06 15:18:03 +00:00
bevy_transform Make entity::index non max (#18704) 2025-05-07 18:20:30 +00:00
bevy_ui UI Node Gradients (#18139) 2025-05-20 14:45:22 +00:00
bevy_utils Rename bevy_platform_support to bevy_platform (#18813) 2025-04-11 23:13:28 +00:00
bevy_window Expose deferred screen edges setting for ios devices (#18729) 2025-04-30 21:24:53 +00:00
bevy_winit Remove remaining internal use of !Send resources (#18386) 2025-05-06 22:23:59 +00:00