Skip to content

Color interpolation in OKLab, OKLCH spaces for UI gradients #19330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

ickshonpe
Copy link
Contributor

@ickshonpe ickshonpe commented May 21, 2025

Objective

Add support for interpolation in OKLab and OKLCH color spaces for UI gradients.

Solution

  • New InterpolationColorSpace enum with OkLab, OkLch, OkLchLong, Srgb and LinearRgb variants.
  • Added a color space specialization to the gradients pipeline.
  • Added support for interpolation in OkLCH and OkLAB color spaces to the gradients shader. OKLCH interpolation supports both short and long hue paths. This is mostly based on the conversion functions from bevy_color except that interpolation in polar space uses radians.
  • Added color_space fields to each gradient type.

InterpolationColorSpace might be a bit long, might change it to InterpolationMethod or something.

Testing

The gradients example has been updated to demonstrate the different color interpolation methods.
Press space to cycle through the different options.


Showcase

color_spaces

ickshonpe added 2 commits May 22, 2025 00:35
* Added color space specialization to gradients pipeline.
* Added support for interpolation in OkLch and OkLab color spaces to shader.
* Added color space fields to each gradient type.
* Updated examples.
@ickshonpe ickshonpe changed the title OkLab, Oklch color space support for UI gradients Interpolation in OkLab, Oklch color spaces for UI gradients May 22, 2025
@ickshonpe ickshonpe changed the title Interpolation in OkLab, Oklch color spaces for UI gradients Color interpolation in OkLab, Oklch spaces for UI gradients May 22, 2025
@ickshonpe ickshonpe changed the title Color interpolation in OkLab, Oklch spaces for UI gradients Color interpolation in OKLab, OKLCH spaces for UI gradients May 22, 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 labels May 22, 2025
@ickshonpe ickshonpe changed the title Color interpolation in OKLab, OKLCH spaces for UI gradients Color interpolation options for UI gradients May 22, 2025
@ickshonpe ickshonpe changed the title Color interpolation options for UI gradients Color interpolation in OKLab, OKLCH spaces for UI gradients May 22, 2025
@alice-i-cecile
Copy link
Member

New InterpolationColorSpace enum with OkLab, OkLch, OkLchLong, Srgb and LinearRgb variants.

Why do we need this rather than using Color? Or a generic type with the appropriate trait bound?

@alice-i-cecile alice-i-cecile added the X-Uncontroversial This work is generally agreed upon label May 22, 2025
@ickshonpe
Copy link
Contributor Author

ickshonpe commented May 22, 2025

New InterpolationColorSpace enum with OkLab, OkLch, OkLchLong, Srgb and LinearRgb variants.

Why do we need this rather than using Color? Or a generic type with the appropriate trait bound?

The enum is just mapped to a constant that is sent to the shader, so using an enum seemed simplest. For polar color spaces you need to choose a path, so using a color type as a discriminator wouldn't be sufficient.

It would be nicer if this was more unified with bevy_color, ideally I think the gradient types should live in the bevy_color module. The current API based on CSS isn't really suitable for more general use cases though.

@alice-i-cecile
Copy link
Member

Sounds good. I'm fine to punt on that , but I would like to move this into bevy_color at some point. Linebender's color crate is also doing similar things for shader color math long-term.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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-Needs-Review Needs reviewer attention (from anyone!) to move forward X-Uncontroversial This work is generally agreed upon
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

2 participants