Add color wheel widgets to bevy_feathers

[tmstorey]

Objective

A color wheel is a widget often preferred when picking colors in cylindrical color spaces. This adds two types of color wheel widget to bevy_feathers.

Solution

• Added color_wheel.rs + color_triangle.rs to bevy_feathers/src/controls and color_wheel.wgsl + color_triangle.wgsl to bevy_feathers/src/assets/shaders.
• The widgets are closely based on the existing color plane widget.
• The color wheel supports HSL and HSV color spaces. Could also easily be extended to support Okhsl/Okhsv when feat: support for okhsl color space to color plane and color slider #24678 merges.
• The triangle widget natively operates in HWB color space, which is easily converted to HSL or HSV. This could also support the Okhwb color space if added to Bevy, which is easily converted to Okhsv (though not Okhsl, except through OkLCh).

Testing

• Tested functionality and appearance by modifying the feathers_gallery example, see below.

---

Showcase

BSN for color wheel widget:

@FeathersColorWheel::Hsl
on(|change: On<ValueChange<ColorWheelValue>>,
    mut color: ResMut<DemoWidgetStates>| {
    color.hsl_color.hue = change.value.hue;
    color.hsl_color.saturation = change.value.saturation;
})

BSN for color triangle widget:

@FeathersColorTriangle::Hwb
on(|change: On<ValueChange<ColorTriangleValue>>,
    mut color: ResMut<DemoWidgetStates>| {
    let hsl: Hsla = Hwba::hwb(
        change.value.hue,
        change.value.whiteness,
        change.value.blackness,
    ).into();
    color.hsl_color.hue = hsl.hue;
    color.hsl_color.saturation = hsl.saturation;
    color.hsl_color.lightness = hsl.lightness;
})

[jordanhalase]

Something looks off about the way your color wheel is blending. It may need gamma correction in the shader. It should blend smoothly like this.

[tmstorey]

Something looks off about the way your color wheel is blending. It may need gamma correction in the shader. It should blend smoothly like this.

I assumed that the UI pipeline automatically did gamma correction, as the color plane also uses linear RGB. It could be that it's an HSL wheel with a weird lightness value, or the PNG compression.

Here's a larger HSV version of the wheel with value set to 1.0 for a more direct comparison:

[tmstorey]

Added the triangle-inside-ring type. Feel free to approve only one or the other.

[tmstorey]

Experimenting with Ok color spaces: here's Okhsv, Okhwb, and Okhsl wheels respectively.

[viridia]

I don't think we need to get overly ambitious here, or support a large number of choices. The main requirement is support the needs of the scene editor, which will use color picking infrequently. While feathers is intended to support third-party editors generally, there's no point in getting too specialized: if someone really wants to re-implement Krita or Gimp inside of Bevy, they are probably going to be creating a lot of custom widgets anyway.

So I'd say pick one and go with it.

[tmstorey]

I'm working on artist-focused dev tools, so I'll at least be using these. 😂

I expect the HWB triangle widget will be most useful for the average Bevy dev, so perhaps I could simplify down to that and repurpose the rest into an ecosystem crate.

[viridia]

I'm working on artist-focused dev tools, so I'll at least be using these. 😂

Fair enough.

For the editor, I am working on a popup color picker button - basically a dropdown menu button with a color swatch. This will incorporate all of the various color editing controls we've done so far, and I could see it including your wheel control as a mode. I don't know if the scene editor - or most third-party editors - will need much more than that.