Skip to content

feat: support for okhsl color space to color plane and color slider#24678

Open
zen-zap wants to merge 12 commits into
bevyengine:mainfrom
zen-zap:okhsl
Open

feat: support for okhsl color space to color plane and color slider#24678
zen-zap wants to merge 12 commits into
bevyengine:mainfrom
zen-zap:okhsl

Conversation

@zen-zap

@zen-zap zen-zap commented Jun 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Objective

Solution

  • Added new enum variants for OKHSL called Okhsla and OkhslaLong to InterpolationColorSpace.
  • Added 'in_okhslaandin_okhsla_longmethods to theInColorSpace` trait.
  • Added OkhslHue, OkhslSaturation and OkhslLightness to ColorChannel enum in
    crates/bevy_feathers/src/controls/color_slider.rs.
  • Added okhsl_to_oklab and okhsl_to_linear_rgb methods in bevy_render/src/color_operations.wgsl along with conversion helpers.
  • Added appropriate shader flags in bevy_ui_render/src/gradients.rs and bevy_ui_render/src/gradient.wgsl.
  • Added options for cycling between color spaces in examples/ui/styling/gradients.rs

Testing

  • Not sure how to test this yet.

Notes

  • Maybe we can shift the okhsla conversion helpers to a separate module to keep things clean.
  • You might see some TODOs here. You can ignore them, I'll remove them once the working is verified.
  • Please tell me if there is anything wrong with the math here.

Showcase

There is an extra example row here - 2nd one (will remove that later).

image image

zen-zap added 4 commits June 20, 2026 03:57
@zen-zap
okhsl conversions
63350bc 
Signed-off-by: zen-zap <pandaashutosh340@gmail.com>
@zen-zap
okhsl works but long doesn't
25c443f 
Signed-off-by: zen-zap <pandaashutosh340@gmail.com>
@zen-zap
no more interference patterns
249e2a6 
Signed-off-by: zen-zap <pandaashutosh340@gmail.com>
@zen-zap
Merge branch 'main' into okhsl
3ed7867
beicause
beicause reviewed Jun 20, 2026
View reviewed changes

@beicause beicause left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think the shader should prioritize speed over precision, given that render targets generally only have 8 or 16-bit precision.

Comment thread crates/bevy_render/src/color_operations.wgsl Outdated
return vec3<f32>(C_0, C_mid, C_max);
}

fn libm_cbrtf(x: f32) -> f32 {

@beicause beicause Jun 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

pow(x, 1.0 / 3.0) should be faster, and we already use it in linear_rgb_to_oklab.

Comment thread crates/bevy_render/src/color_operations.wgsl Outdated
Comment thread crates/bevy_render/src/color_operations.wgsl Outdated
zen-zap added 3 commits June 20, 2026 23:04
@zen-zap
color plane working?
40321f0 
Signed-off-by: zen-zap <pandaashutosh340@gmail.com>
@zen-zap
drop root finding approximations to single step
dbdc1d3 
Signed-off-by: zen-zap <pandaashutosh340@gmail.com>
@zen-zap
fixes
4c84d7d 
Signed-off-by: zen-zap <pandaashutosh340@gmail.com>
@zen-zap

zen-zap commented Jun 20, 2026

Copy link
Copy Markdown
Contributor Author

@beicause I updated the functions.

@zen-zap

zen-zap commented Jun 20, 2026

Copy link
Copy Markdown
Contributor Author

from examples/ui/widgets/feathers_gallery.rs:

cargo run --features="bevy_feathers" --example feathers_gallery gives me this:

screenshot-2026-06-20_23-18-55

@zen-zap zen-zap marked this pull request as ready for review June 20, 2026 17:52
@beicause beicause mentioned this pull request Jun 21, 2026
Merged
@beicause

beicause commented Jun 21, 2026

Copy link
Copy Markdown
Member

from examples/ui/widgets/feathers_gallery.rs:

cargo run --features="bevy_feathers" --example feathers_gallery gives me this:

screenshot-2026-06-20_23-18-55

The okhsl lightness slider issue and okhsla/okhsva prelude will be fixed by #24691 and #24688.

@zen-zap

zen-zap commented Jun 21, 2026

Copy link
Copy Markdown
Contributor Author

from examples/ui/widgets/feathers_gallery.rs:
cargo run --features="bevy_feathers" --example feathers_gallery gives me this:
screenshot-2026-06-20_23-18-55

The okhsl lightness slider issue and okhsla/okhsva prelude will be fixed by #24691 and #24688.

Alright, then do I just cleanup the TODOs and it's good to go?

zen-zap added 2 commits June 21, 2026 14:57
@zen-zap
Merge branch 'bevyengine:main' into okhsl
10dddc5
@zen-zap
cleanup
ac4700e 
Signed-off-by: zen-zap <pandaashutosh340@gmail.com>
@kfc35 kfc35 added S-Needs-Review Needs reviewer attention (from anyone!) to move forward C-Feature A new feature, making something new possible A-Editor Graphical tools to make Bevy games A-Color Color spaces and color math D-Modest A "normal" level of difficulty; suitable for simple features or challenging fixes D-Shaders This code uses GPU shader languages labels Jun 21, 2026
@alice-i-cecile alice-i-cecile requested a review from beicause June 22, 2026 18:48
@alice-i-cecile alice-i-cecile added the X-Uncontroversial This work is generally agreed upon label Jun 22, 2026
ickshonpe pushed a commit to ickshonpe/bevy that referenced this pull request Jun 22, 2026
@beicause
Fix NaN okhsl/okhsv values when lightness approximates 0 or 1 (bevyen…
4516a9f 
…gine#24691)

# Objective

Fixes the issues found in
bevyengine#24678 (comment)
because `LinearRgba::new(1.0, 1.0, 0.9999996, 1.0)` converted to `Okhsla
{ hue: 104.03624, saturation: NaN, lightness: 1.0, alpha: 1.0 }` which
contains NaN.

This happens when `oklab_l` == 0 or 1 while `C` != 0, e.g. white minus
epsilon

## Solution

Early return okhsl/okhsv when oklab lightness approximates 0 or 1.

## Testing

Added more color tests.

With this fix the okhsl lightness slider looks correct:
<img width="1920" height="1006" alt="屏幕截图_20260621_135530"
src="https://github.com/user-attachments/assets/8a8723c4-13b9-4240-bfd2-c8d5cfc60717"
/>
beicause
beicause reviewed Jun 24, 2026
View reviewed changes

@beicause beicause left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The newly added okhsl plane and sliders are cropped unless you enlarge the window. I opened #24689. It doesn't necessarily have to be resolved in this PR.

Image

Comment thread examples/ui/widgets/feathers_gallery.rs Outdated
Comment thread examples/ui/widgets/feathers_gallery.rs Outdated
@beicause

beicause commented Jun 24, 2026

Copy link
Copy Markdown
Member

Could you revise the title for accuracy? This adds okhsl to the color sliders and plane. Bevy already supports okhsl color space in Color.

@zen-zap zen-zap changed the title feat: support for okhsl color space feat: support for okhsl color space to color plane and color slider Jun 24, 2026
zen-zap added 2 commits June 24, 2026 20:50
@zen-zap
update func signature
3c878dc 
Signed-off-by: zen-zap <pandaashutosh340@gmail.com>
@zen-zap
Merge branch 'main' into okhsl
b49ebd8
beicause
beicause approved these changes Jun 24, 2026
View reviewed changes
Comment thread examples/ui/widgets/feathers_gallery.rs Outdated
@zen-zap @beicause
cleanup
2f7b949 
Co-authored-by: Luo Zhihao <luo_zhihao@outlook.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@beicause beicause beicause approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

A-Color Color spaces and color math A-Editor Graphical tools to make Bevy games C-Feature A new feature, making something new possible D-Modest A "normal" level of difficulty; suitable for simple features or challenging fixes 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

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Support OKHSL in color sliders and color plane widget

4 participants

@zen-zap @beicause @kfc35 @alice-i-cecile