Skip to content

Conversation

ickshonpe
Copy link
Contributor

@ickshonpe ickshonpe commented Jul 6, 2025

Objective

Add interpolation in HSL and HSV colour spaces for UI gradients.

Solution

Added new variants to InterpolationColorSpace: Hsl, HslLong, Hsv, and HsvLong, along with mix functions to the gradients shader for each of them.

Limitations

  • Didn't include increasing and decreasing path support, it's not essential and can be done in a follow up if someone feels like it.

  • The colour conversions should really be performed before the colours are sent to the shader but it would need more changes and performance is good enough for now.

Testing

cargo run --example gradients

@ickshonpe ickshonpe changed the title Hsl and Hsv interpolation for UI gradients HSL and HSV interpolation for UI gradients Jul 6, 2025
@ickshonpe ickshonpe added C-Feature A new feature, making something new possible A-Rendering Drawing game state to the screen A-UI Graphical user interfaces, styles, layouts, and widgets S-Needs-Review Needs reviewer attention (from anyone!) to move forward D-Shaders This code uses GPU shader languages A-Color Color spaces and color math labels Jul 6, 2025
@ickshonpe ickshonpe requested a review from viridia July 6, 2025 21:28
@alice-i-cecile
Copy link
Member

@lynn-lumen, you attempted something very similar in #12939. Would you be open to reviewing this?

Copy link
Contributor

@lynn-lumen lynn-lumen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me. There are just two functions that I believe should be named differently.

@lynn-lumen
Copy link
Contributor

This is not specific to this PR, but I think the lerp_hue_long function is incorrect. It seems to not take the longest direct path between two colors but rotates 360° before taking the shortest path.
Screenshot 2025-07-07 114503
In this image, you can see one gradient with three stops, red, blue and lime at 0%, 50% and 100% interpolated in HsvLong. I would have expected it to look more like this second image.
image

A similar issue, though less obvious, persists when interpolating in OkLchLong.

@ickshonpe
Copy link
Contributor Author

ickshonpe commented Jul 7, 2025

A similar issue, though less obvious, persists when interpolating in OkLchLong.

Oh yep good catch, the select cases are the wrong way around, it should be select(diff + TAU, diff - TAU, diff < 0.).

Should be fixed by #20010

@viridia
Copy link
Contributor

viridia commented Jul 7, 2025

It seems to not take the longest direct path between two colors

Actually, I noticed this problem too and forgot to mention it. I ended up breaking the hue rotation into multiple steps, each less than 180 degrees, to work around it.

For the hue slider, I need to go from 0 to 360 (or zero to zero I suppose). To get consistent results, however, I ended up having to go from 0.00001 to 359.9999. This doesn't affect the range of values that the slider can edit, only the background gradient, and the difference is imperceptible.

@alice-i-cecile alice-i-cecile added S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it and removed S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Jul 7, 2025
@viridia
Copy link
Contributor

viridia commented Jul 7, 2025

OK I patched this in to my color sliders PR and can verify that it is working.

One thing I would really like is to be able to import these color functions into a custom shader, but that can be left for a follow-up PR.

@alice-i-cecile alice-i-cecile added this pull request to the merge queue Jul 7, 2025
Merged via the queue into bevyengine:main with commit 5ea0e40 Jul 7, 2025
34 checks passed
@github-project-automation github-project-automation bot moved this to Done in Rendering Jul 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-Color Color spaces and color math A-Rendering Drawing game state to the screen A-UI Graphical user interfaces, styles, layouts, and widgets C-Feature A new feature, making something new possible D-Shaders This code uses GPU shader languages S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it

Projects

Status: Widget-ready
Status: Done

Development

Successfully merging this pull request may close these issues.

4 participants