Preconvert colors before sending to shader #20074

tylercritchlow · 2025-07-10T02:48:22Z

Objective

Fixes Preconvert colours before sending them to the UI gradients shader #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:

Run cargo run --example gradients or cargo run --example stacked_gradients
Verify gradients render correctly

alice-i-cecile · 2025-07-10T02:50:57Z

Previously attempted in #20073

ickshonpe

Implementation is fine. The snag is that interpolation in eight more colour spaces has been added since the initial gradients PR (not sure why there aren't merge conflicts). So this is a bit more involved and needs a match statement or something to select a preconversion method. Also the hues should be normalized for interpolation in cylindrical color spaces.

ickshonpe · 2025-07-10T10:05:12Z

crates/bevy_ui/src/render/gradient.wgsl

+    }
+
+    // Only color interpolation in SRGB space is supported atm.
+    return mix_linear_rgb_in_srgb_space(start_color, end_color, t);


This is now:

#ifdef IN_SRGB return mix_linear_rgba_in_srgba_space(start_color, end_color, t); #else ifdef IN_OKLAB return mix_linear_rgba_in_oklaba_space(start_color, end_color, t); #else ifdef IN_OKLCH return mix_linear_rgba_in_oklcha_space(start_color, end_color, t); #else ifdef IN_OKLCH_LONG return mix_linear_rgba_in_oklcha_space_long(start_color, end_color, t); #else ifdef IN_HSV return mix_linear_rgba_in_hsva_space(start_color, end_color, t); #else ifdef IN_HSV_LONG return mix_linear_rgba_in_hsva_space_long(start_color, end_color, t); #else ifdef IN_HSL return mix_linear_rgba_in_hsla_space(start_color, end_color, t); #else ifdef IN_HSL_LONG return mix_linear_rgba_in_hsla_space_long(start_color, end_color, t); #else return mix(start_color, end_color, t); #endif

ickshonpe · 2025-07-10T10:22:46Z

It'd be nice to have some performance profiling data too, even though this seems like it will be an obvious improvement.

tylercritchlow · 2025-07-12T19:49:56Z

It'd be nice to have some performance profiling data too, even though this seems like it will be an obvious improvement.

Is there examples of how to do this? That is the performance profiling.

ickshonpe · 2025-07-12T21:27:06Z

It'd be nice to have some performance profiling data too, even though this seems like it will be an obvious improvement.

Is there examples of how to do this? That is the performance profiling.

I normally use tracy, there's a section on using it with bevy here:
https://github.com/bevyengine/bevy/blob/main/docs/profiling.md

But for this it would be fine just to copy from the benchmark examples in examples/stress_tests which use the FrameTimeDiagnosticsPlugin and LogDiagnosticsPlugin plugins to report the FPS.

tylercritchlow · 2025-07-12T23:18:00Z

Performance Results

Tested with 900 gradients using a new stress test example on MacBook Pro M4:

Color Space FPS Comparison

Color Space	Baseline FPS	Optimized FPS
sRGB	99.64 fps	97.26 fps
HSL	95.61 fps	97.30 fps
OkLab	91.27 fps	97.06 fps

With Animation Enabled (OkLab)

Mode	FPS
Baseline	93.99 fps
Optimized	98.11 fps

Not much difference, but idk if a bigger improvement is expected.

github-actions · 2025-07-12T23:22:14Z

Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke!
You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-20074

If it's expected, please add the M-Deliberate-Rendering-Change label.

If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.

github-actions · 2025-07-12T23:22:33Z

Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke!
You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-20074

If it's expected, please add the M-Deliberate-Rendering-Change label.

If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.

github-actions · 2025-07-12T23:30:02Z

Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke!
You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-20074

If it's expected, please add the M-Deliberate-Rendering-Change label.

If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.

alice-i-cecile · 2025-07-13T17:24:52Z

Not much difference, but idk if a bigger improvement is expected.

Yeah, I would expect this to be slight.

ickshonpe

Looks very good, the complexity is reduced and the performance gains are actually quite significant.

Just needs some changes to fix the fill modes.

ickshonpe · 2025-07-14T10:21:40Z

crates/bevy_ui_render/src/gradient.wgsl

+        mix(a.w, b.w, t)
+    );
+}
+
 fn interpolate_gradient(


Interpolation gets skipped when the FILL_START/END flags are set so start_color and end_color are still in the interpolation color space and need to be converted to linear rgba before they are returned.

ickshonpe · 2025-07-14T10:25:08Z

crates/bevy_ui_render/src/gradient.wgsl

@@ -426,23 +383,23 @@ fn interpolate_gradient(
    } else {
        t = 0.5 * (1 + (t - hint) / (1.0 - hint));
    }
-


Fixed version of interpolate_gradient I wrote to test it after I thought I'd figured out what was wrong with the fill modes:

fn interpolate_gradient( distance: f32, start_color: vec4<f32>, start_distance: f32, end_color: vec4<f32>, end_distance: f32, hint: f32, flags: u32, ) -> vec4<f32> { if start_distance == end_distance { if distance <= start_distance && enabled(flags, FILL_START) { return convert_to_linear_rgba(start_color); } if start_distance <= distance && enabled(flags, FILL_END) { return convert_to_linear_rgba(end_color); } return vec4(0.); } var t = (distance - start_distance) / (end_distance - start_distance); if t < 0.0 { if enabled(flags, FILL_START) { return convert_to_linear_rgba(start_color); } return vec4(0.0); } if 1. < t { if enabled(flags, FILL_END) { return convert_to_linear_rgba(end_color); } return vec4(0.0); } if t < hint { t = 0.5 * t / hint; } else { t = 0.5 * (1 + (t - hint) / (1.0 - hint)); } return convert_to_linear_rgba(mix_colors(start_color, end_color, t)); } // Mix the colors, choosing the appropriate interpolation method for the given color space fn mix_colors( start_color: vec4<f32>, end_color: vec4<f32>, t: f32, ) -> vec4<f32> { #ifdef IN_OKLCH return mix_oklcha(start_color, end_color, t); #else ifdef IN_OKLCH_LONG return mix_oklcha_long(start_color, end_color, t); #else ifdef IN_HSV return mix_hsva(start_color, end_color, t); #else ifdef IN_HSV_LONG return mix_hsva_long(start_color, end_color, t); #else ifdef IN_HSL return mix_hsla(start_color, end_color, t); #else ifdef IN_HSL_LONG return mix_hsla_long(start_color, end_color, t); #else // Just lerp in linear RGBA, OkLab and SRGBA spaces return mix(start_color, end_color, t); #endif } // Convert a color from the interpolation color space to linear rgba fn convert_to_linear_rgba( color: vec4<f32>, ) -> vec4<f32> { #ifdef IN_OKLCH return oklcha_to_linear_rgba(color); #else ifdef IN_OKLCH_LONG return oklcha_to_linear_rgba(color); #else ifdef IN_HSV return hsva_to_linear_rgba(color); #else ifdef IN_HSV_LONG return hsva_to_linear_rgba(color); #else ifdef IN_HSL return hsla_to_linear_rgba(color); #else ifdef IN_HSL_LONG return hsla_to_linear_rgba(color); #else ifdef IN_OKLAB return oklaba_to_linear_rgba(color); #else ifdef IN_SRGB return vec4(pow(color.rgb, vec3(2.2)), color.a); #else // Color is already in linear rgba space return color; #endif }

ickshonpe · 2025-07-14T10:45:55Z

examples/stress_tests/many_gradients.rs

+                    ColorStop::new(RED, Val::Percent(0.0)),
+                    ColorStop::new(BLUE, Val::Percent(100.0)),


Needs more colour stops to capture the full benefits, otherwise the gains are masked by the overhead from layout. With this gradient:

ColorStop::auto(RED), ColorStop::auto(BLUE), ColorStop::auto(GREEN), ColorStop::auto(YELLOW), ColorStop::auto(ORANGE), ColorStop::auto(LIME), ColorStop::auto(DARK_CYAN),

I get ~30% better FPS compared to main.

github-actions · 2025-07-15T03:27:39Z

Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke!
You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-20074

If it's expected, please add the M-Deliberate-Rendering-Change label.

If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.

github-actions · 2025-07-15T03:38:04Z

Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke!
You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-20074

If it's expected, please add the M-Deliberate-Rendering-Change label.

If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.

ickshonpe

The HSL and HSV conversions are off a bit. If you look at the gradients example the bottom set of striped gradients uses hard stops so there is no interpolation (the conic excepted) so the gradients should look the same for each colour space, but in HSL and HSV you can see that the colours are lighter:

In Oklaba

In Hsla

ickshonpe

Actually I think the problem with the HSL conversions is in main too, except that when there is a hard stop the colour is already linear RGBA so it isn't converted. Everything else is okay, once the CI is happy I think this is good to merge.

crates/bevy_ui_render/src/gradient.wgsl

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

github-actions · 2025-07-15T17:03:31Z

Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke!
You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-20074

If it's expected, please add the M-Deliberate-Rendering-Change label.

If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.

alice-i-cecile · 2025-07-15T17:13:13Z

Ping me when CI is green and I'll do a review and merge this :) The Dependencies failure is not your fault.

tylercritchlow · 2025-07-16T01:44:57Z

@alice-i-cecile CI is green

alice-i-cecile requested a review from ickshonpe July 10, 2025 02:50

github-project-automation bot added this to Rendering Jul 10, 2025

alice-i-cecile added the A-UI Graphical user interfaces, styles, layouts, and widgets label Jul 10, 2025

alice-i-cecile added this to the 0.17 milestone Jul 10, 2025

ickshonpe suggested changes Jul 10, 2025

View reviewed changes

Preconvert colors to sRGB

fff060d

tylercritchlow force-pushed the preconvert-to-srgb branch from 1fc67d9 to fff060d Compare July 12, 2025 23:16

Merge branch 'main' into preconvert-to-srgb

d4dd9e8

tylercritchlow requested a review from ickshonpe July 12, 2025 23:18

Merge branch 'main' into preconvert-to-srgb

c0bc1d3

tylercritchlow changed the title ~~Preconvert to srgb~~ Preconvert colors before sending to shader Jul 14, 2025

ickshonpe suggested changes Jul 14, 2025

View reviewed changes

ickshonpe mentioned this pull request Jul 14, 2025

More UI gradients fixes #20035

Open

alice-i-cecile added S-Waiting-on-Author The author needs to make changes or address concerns before this can be merged and removed S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Jul 14, 2025

fix visual differences

a8ace76

tylercritchlow added 2 commits July 14, 2025 23:13

Merge branch 'main' into preconvert-to-srgb

1b1af05

Fix CI problems

60dd402

tylercritchlow force-pushed the preconvert-to-srgb branch from 44f72a9 to 60dd402 Compare July 15, 2025 03:19

tylercritchlow requested a review from ickshonpe July 15, 2025 03:22

Fix CI problems in example

3dc86b6

ickshonpe suggested changes Jul 15, 2025

View reviewed changes

ickshonpe approved these changes Jul 15, 2025

View reviewed changes

crates/bevy_ui_render/src/gradient.wgsl Outdated Show resolved Hide resolved

crates/bevy_ui_render/src/gradient.wgsl Outdated Show resolved Hide resolved

Apply suggestions from code review

a8ce9cd

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

ickshonpe added the M-Deliberate-Rendering-Change An intentional change to how tests and examples are rendered label Jul 15, 2025

tylercritchlow added 2 commits July 15, 2025 21:19

fix CI (clippy)

6087f8d

Merge branch 'main' into preconvert-to-srgb

559f8e5

ickshonpe added S-Needs-Review Needs reviewer attention (from anyone!) to move forward and removed S-Waiting-on-Author The author needs to make changes or address concerns before this can be merged labels Jul 16, 2025

		ColorStop::new(RED, Val::Percent(0.0)),
		ColorStop::new(BLUE, Val::Percent(100.0)),

Uh oh!

Preconvert colors before sending to shader #20074

Are you sure you want to change the base?

Preconvert colors before sending to shader #20074

Conversation

tylercritchlow commented Jul 10, 2025

Objective

Solution

Testing

Uh oh!

alice-i-cecile commented Jul 10, 2025

Uh oh!

ickshonpe left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ickshonpe Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

ickshonpe commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tylercritchlow commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ickshonpe commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tylercritchlow commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Performance Results

Color Space FPS Comparison

With Animation Enabled (OkLab)

Uh oh!

github-actions bot commented Jul 12, 2025

Uh oh!

github-actions bot commented Jul 12, 2025

Uh oh!

github-actions bot commented Jul 12, 2025

Uh oh!

alice-i-cecile commented Jul 13, 2025

Uh oh!

ickshonpe left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ickshonpe Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

ickshonpe Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ickshonpe Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 15, 2025

Uh oh!

github-actions bot commented Jul 15, 2025

Uh oh!

ickshonpe left a comment

Choose a reason for hiding this comment

In Oklaba

In Hsla

Uh oh!

ickshonpe left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jul 15, 2025

Uh oh!

alice-i-cecile commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tylercritchlow commented Jul 16, 2025

Uh oh!

Uh oh!

ickshonpe left a comment •

edited

Loading

ickshonpe commented Jul 10, 2025 •

edited

Loading

tylercritchlow commented Jul 12, 2025 •

edited

Loading

ickshonpe commented Jul 12, 2025 •

edited

Loading

tylercritchlow commented Jul 12, 2025 •

edited

Loading

ickshonpe left a comment •

edited

Loading

ickshonpe Jul 14, 2025 •

edited

Loading

ickshonpe Jul 14, 2025 •

edited

Loading

ickshonpe left a comment •

edited

Loading

alice-i-cecile commented Jul 15, 2025 •

edited

Loading