Preconvert colors before sending to shader (#20074)

# Objective

- Fixes #20008 - Preconvert colors before sending them to the UI
gradients shader for better performance

  ## Solution

- Modified `prepare_gradient` in `gradient.rs` to convert colors from
`LinearRgba` to `Srgba` on the CPU before sending to the GPU
- Updated the gradient shader to remove per-pixel color space
conversions since colors are now pre-converted
  - Added documentation to clarify that vertex colors are in sRGB space

This optimization reduces the number of power operations per pixel from
3 to 1:
- **Before**: Convert start color to sRGB, convert end color to sRGB,
mix, convert back to linear (3 pow operations per pixel)
- **After**: Colors pre-converted on CPU, mix in sRGB space, convert
back to linear (1 pow operation per pixel)

  ## Testing

- Verified that the UI gradient examples (`cargo run --example
gradients`) compile and render correctly
- The visual output should remain identical while performance improves,
especially for large gradient areas
- Changes maintain the same color interpolation behavior (mixing in sRGB
space)

  To test:
1. Run `cargo run --example gradients` or `cargo run --example
stacked_gradients`
  2. Verify gradients render correctly

---------

Co-authored-by: ickshonpe <david.curthoys@googlemail.com>

Author: tylercritchlow

Cargo.toml

@@ -3068,6 +3068,17 @@ description = "Test rendering of many UI elements"
 category = "Stress Tests"
 wasm = true
 
+[[example]]
+name = "many_gradients"
+path = "examples/stress_tests/many_gradients.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.many_gradients]
+name = "Many Gradients"
+description = "Stress test for gradient rendering performance"
+category = "Stress Tests"
+wasm = true
+
 [[example]]
 name = "many_cameras_lights"
 path = "examples/stress_tests/many_cameras_lights.rs"

crates/bevy_ui_render/src/gradient.rs

@@ -7,7 +7,7 @@ use core::{
 use super::shader_flags::BORDER_ALL;
 use crate::*;
 use bevy_asset::*;
-use bevy_color::{ColorToComponents, LinearRgba};
+use bevy_color::{ColorToComponents, Hsla, Hsva, LinearRgba, Oklaba, Oklcha, Srgba};
 use bevy_ecs::{
     prelude::Component,
     system::{
@@ -654,6 +654,44 @@ struct UiGradientVertex {
     hint: f32,
 }
 
+fn convert_color_to_space(color: LinearRgba, space: InterpolationColorSpace) -> [f32; 4] {
+    match space {
+        InterpolationColorSpace::Oklaba => {
+            let oklaba: Oklaba = color.into();
+            [oklaba.lightness, oklaba.a, oklaba.b, oklaba.alpha]
+        }
+        InterpolationColorSpace::Oklcha | InterpolationColorSpace::OklchaLong => {
+            let oklcha: Oklcha = color.into();
+            [
+                oklcha.lightness,
+                oklcha.chroma,
+                oklcha.hue.to_radians(),
+                oklcha.alpha,
+            ]
+        }
+        InterpolationColorSpace::Srgba => {
+            let srgba: Srgba = color.into();
+            [srgba.red, srgba.green, srgba.blue, srgba.alpha]
+        }
+        InterpolationColorSpace::LinearRgba => color.to_f32_array(),
+        InterpolationColorSpace::Hsla | InterpolationColorSpace::HslaLong => {
+            let hsla: Hsla = color.into();
+            // Normalize hue to 0..1 range for shader
+            [
+                hsla.hue / 360.0,
+                hsla.saturation,
+                hsla.lightness,
+                hsla.alpha,
+            ]
+        }
+        InterpolationColorSpace::Hsva | InterpolationColorSpace::HsvaLong => {
+            let hsva: Hsva = color.into();
+            // Normalize hue to 0..1 range for shader
+            [hsva.hue / 360.0, hsva.saturation, hsva.value, hsva.alpha]
+        }
+    }
+}
+
 pub fn prepare_gradient(
     mut commands: Commands,
     render_device: Res<RenderDevice>,
@@ -804,8 +842,9 @@ pub fn prepare_gradient(
                                 continue;
                             }
                         }
-                        let start_color = start_stop.0.to_f32_array();
-                        let end_color = end_stop.0.to_f32_array();
+                        let start_color =
+                            convert_color_to_space(start_stop.0, gradient.color_space);
+                        let end_color = convert_color_to_space(end_stop.0, gradient.color_space);
                         let mut stop_flags = flags;
                         if 0. < start_stop.1
                             && (stop_index == gradient.stops_range.start || segment_count == 0)