gpui: Add linear gradient support to fill background #20812

huacnlee · 2024-11-18T12:01:23Z

Release Notes:

gpui: Add linear gradient support to fill background

Run example:

cargo run -p gpui --example gradient
cargo run -p gpui --example gradient --features macos-blade

Demo

In GPUI (sRGB):

In GPUI (Oklab):

In CSS (sRGB):

https://codepen.io/huacnlee/pen/rNXgxBY

In CSS (Oklab):

https://codepen.io/huacnlee/pen/wBwBKOp

Currently only support 2 color stops with linear-gradient. I think this is we first introduce the gradient feature in GPUI, and the linear-gradient is most popular for use. So we can just add this first and then to add more other supports.

widersky · 2024-11-18T12:25:22Z

It would be great to have the ability to add a gradient to any interface element!

iamnbutler · 2024-11-18T17:28:52Z

So excited for this if we can make it work! Thanks for working on it.

huacnlee · 2024-11-19T10:07:17Z

Linux and Windows support have done

jansol · 2024-11-20T15:25:45Z

I'm not 100% sure but it looks like the mix() is working with sRGB values? The colors should be converted to linear RGB before and back after, else there will be awkward inconsistencies like you can see when comparing the yellow-green gradient between CSS and Linux/Windows.

huacnlee · 2024-11-20T16:02:30Z

I'm not 100% sure but it looks like the mix() is working with sRGB values? The colors should be converted to linear RGB before and back after, else there will be awkward inconsistencies like you can see when comparing the yellow-green gradient between CSS and Linux/Windows.

There have a hsla_to_rgba method for this, it was converted before in vs_quad.

huacnlee · 2024-11-20T16:29:36Z

@jansol Looks like you are right, I have to do a test, now is better.

huacnlee · 2024-11-21T04:08:45Z

Added to support cx.paint_path with gradient, we need this to draw chart.

This is apply gradient in our application:

And the performance is looks no difference, I have test in our application and Zed, the FPS is like before.

jansol · 2024-11-21T15:24:28Z

@jansol Looks like you are right, I have to do a test, now is better.

Thanks. Now it indeed matches your CSS reference.

However now that I've had a moment to check out the code and the reference in more detail I'd like to argue that the CSS reference itself is... not great: it does the gradient interpolation in gamma-corrected sRGB color space. This the CSS default -- likely for historical reasons, since it is the simplest most naïve option so everyone used to go for it first -- but is generally considered a pretty bad option. With "red" and "blue" endpoints it doesn't look too terrible, but if the endpoints are e.g. "red" and "green" you get a very noticeable and very ugly darkening in the middle:

The technically more "correct" solution would be to tell CSS to do the interpolation with linearized sRGB values: gradient(45deg in srgb-linear, red, green):

Unfortunately this makes brightness gradients look awkward:

At this point the best option for gradients specifically appears to be doing interpolation in the Oklab colorspace (gradient(45 in in oklab, red, green)). This avoids the ugly inconsistencies of nonlinear sRGB as well as the awkward handling of brightness gradients (say, "white" to "black"):

Raph Levien has done a nice comparison of various colorspaces for the purpose of gradients in his blog.

Conversions between linear sRGB and oklab are quite straightforward and the exact matrices are given in the blog post that introduced the colorspace.

I guess ideally we'd have the option to choose the colorspace for interpolation, but as a default I think Oklab is the closest to what one would want & intuitively expect. It does have some shortcomings (chance of out of gamut colors -- need to clamp the resulting sRGB values to the 0..1 range after interpolation & conversion back to linear sRGB) but I don't think that's a huge issue in this case.

huacnlee · 2024-11-28T12:30:36Z

WIP to fix blade render.

huacnlee · 2024-11-28T12:48:31Z

Ready to review

huacnlee · 2024-11-28T13:10:46Z

sRGB:

Oklab:

huacnlee · 2024-11-28T13:15:02Z

Em... oklab not same like CSS.

huacnlee · 2024-11-28T13:37:35Z

crates/gpui/src/platform/blade/shaders.wgsl

huacnlee · 2024-11-28T13:41:52Z

In Blade

huacnlee · 2024-11-28T14:27:17Z

Ready to review

jansol

The colorspaces are a bit mixed up. If you create a nonlinear sRGB gradient and an oklab gradient, a well as a solid box side by side and set the exact same color for all 4 stops and the solid background, they should look perfectly identical.

jansol · 2024-11-28T23:36:51Z

crates/gpui/src/platform/blade/shaders.wgsl

+    if (quad.background.tag == 0u) {
+        out.background_solid = hsla_to_rgba(quad.background.solid);
+    } else if (quad.background.tag == 1u) {
+        out.background_color0 = linear_to_srgba(hsla_to_rgba(quad.background.colors[0].color));
+        out.background_color1 = linear_to_srgba(hsla_to_rgba(quad.background.colors[1].color));
+    }


So of I'm reading this right the background is set to linear sRGB if it's solid but converted to non-linear sRGB for gradients?

Here is a bit of difference like the Metal, the hsla_to_rgba it was returns linear sRGB.

I kept the behavior of this function unchanged to avoid modifying other parts of the code.

And to convert the color in vertex stage to reduce convert color again in every fragment for performance.

jansol · 2024-11-28T23:38:14Z

crates/gpui/src/platform/blade/shaders.wgsl

+
+            switch (background.color_space) {
+                default: {
+                    background_color = srgba_to_linear(mix(color0, color1, t));


Since this is a gradient, colors are non-linear sRGB and converted to linear sRGB after mixing?

I tested it several times here, it seems that the color value obtained by the previous algorithm should be sRGB, which needs to be converted to linear to get the correct color.

Oooh, okay, yeah I found the "previous algorithm", now it makes sense.

jansol · 2024-11-28T23:55:01Z

crates/gpui/src/platform/blade/shaders.wgsl

+                    let oklab_color0 = linear_srgb_to_oklab(color0);
+                    let oklab_color1 = linear_srgb_to_oklab(color1);
+                    let oklab_color = mix(oklab_color0, oklab_color1, t);
+                    background_color = oklab_to_linear_srgb(oklab_color);


Since this is a gradient, colors are non-linear sRGB but they are converted to oklab as if they were linear sRGB?

jansol

Okay, read through the code again & verified the final output with a color picker and both the code and the resulting colors match what I would expect now.

Left a few more comments, but those are purely about cosmetics & future ease of maintaining - feel free to address them or ignore them. As far as I'm concerned this is good to go as it is.

crates/gpui/src/platform/blade/shaders.wgsl

crates/gpui/src/platform/mac/shaders.metal

SomeoneToIgnore

Great, thank you for the review and fixes.

Just in case, let's merge it after the next release this Wednesday, to have more runaway for testing this.

iamnbutler · 2024-12-12T13:58:47Z

Nice! I missed that this landed. Excited to try this out. We actually will use this in the upcoming git ui, so it is just in time! Thanks for adding it!

cla-bot bot added the cla-signed The user has signed the Contributor License Agreement label Nov 18, 2024

huacnlee changed the title ~~gpui: Add linear gradient support to fill background.~~ gpui: Add linear gradient support to fill background Nov 18, 2024

huacnlee marked this pull request as ready for review November 19, 2024 10:06

huacnlee force-pushed the fill-gradient branch 3 times, most recently from efa94f2 to 7011666 Compare November 21, 2024 05:53

huacnlee marked this pull request as draft November 21, 2024 08:21

huacnlee marked this pull request as ready for review November 21, 2024 09:18

huacnlee added 14 commits November 28, 2024 16:09

gpui: Add linear gradient support to fill background.

16a225e

.

18e648b

Fix color stop

e9a3ffb

.

40ea10c

Update Background_LinearGradient metal code

cdf6c59

.

8a6b7b6

Fix grident direction

4e07357

Fix color position

94eb680

Update gradient methods.

b0dddbe

Fix color direction

01de91a

Add gradient to wgsl.

1232c26

Update Background struct for Wgsl.

28ec5af

Fix clippy wraning.

b2365ed

.

40c74c9

Fix blade render

707fdcc

Rename to use ColorSpace

a9f5030

jansol reviewed Nov 28, 2024

View reviewed changes

crates/gpui/src/platform/blade/shaders.wgsl Outdated Show resolved Hide resolved

huacnlee added 4 commits November 28, 2024 21:42

fix oklab color

54aef79

done for blade

c50afa2

Fix metal

0f7257a

fix wgsl, remove duplicate call.

ffacf0f

huacnlee added 2 commits November 28, 2024 22:43

Reduce example colors and fix sRGB in Blade.

81ffdb3

Remove color switch display all colors.

aea2cf5

jansol suggested changes Nov 28, 2024

View reviewed changes

huacnlee added 4 commits November 29, 2024 10:31

update wgsl

9d7f08f

wip

4f7b391

update metal, wip

1d7ee20

Metal fixed.

63ece35

huacnlee requested a review from jansol November 29, 2024 03:10

jansol approved these changes Dec 5, 2024

View reviewed changes

Split duplicate code to prepare_gradient_color method.

3a5f7ad

jansol requested a review from SomeoneToIgnore December 10, 2024 11:29

SomeoneToIgnore approved these changes Dec 10, 2024

View reviewed changes

SomeoneToIgnore self-assigned this Dec 10, 2024

SomeoneToIgnore merged commit de89f8c into zed-industries:main Dec 11, 2024
14 checks passed

huacnlee deleted the fill-gradient branch December 12, 2024 02:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

gpui: Add linear gradient support to fill background #20812

gpui: Add linear gradient support to fill background #20812

huacnlee commented Nov 18, 2024 •

edited by SomeoneToIgnore

Loading

widersky commented Nov 18, 2024

iamnbutler commented Nov 18, 2024

huacnlee commented Nov 19, 2024 •

edited

Loading

jansol commented Nov 20, 2024

huacnlee commented Nov 20, 2024

huacnlee commented Nov 20, 2024

huacnlee commented Nov 21, 2024 •

edited

Loading

jansol commented Nov 21, 2024 •

edited

Loading

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024 •

edited

Loading

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024

jansol left a comment •

edited

Loading

jansol Nov 28, 2024

huacnlee Nov 29, 2024

jansol Nov 28, 2024

huacnlee Nov 29, 2024

jansol Dec 5, 2024

jansol Nov 28, 2024

jansol left a comment

SomeoneToIgnore left a comment

iamnbutler commented Dec 12, 2024 •

edited

Loading

gpui: Add linear gradient support to fill background #20812

gpui: Add linear gradient support to fill background #20812

Conversation

huacnlee commented Nov 18, 2024 • edited by SomeoneToIgnore Loading

Demo

widersky commented Nov 18, 2024

iamnbutler commented Nov 18, 2024

huacnlee commented Nov 19, 2024 • edited Loading

jansol commented Nov 20, 2024

huacnlee commented Nov 20, 2024

huacnlee commented Nov 20, 2024

huacnlee commented Nov 21, 2024 • edited Loading

jansol commented Nov 21, 2024 • edited Loading

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024 • edited Loading

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024

huacnlee commented Nov 28, 2024

jansol left a comment • edited Loading

Choose a reason for hiding this comment

jansol Nov 28, 2024

Choose a reason for hiding this comment

huacnlee Nov 29, 2024

Choose a reason for hiding this comment

jansol Nov 28, 2024

Choose a reason for hiding this comment

huacnlee Nov 29, 2024

Choose a reason for hiding this comment

jansol Dec 5, 2024

Choose a reason for hiding this comment

jansol Nov 28, 2024

Choose a reason for hiding this comment

jansol left a comment

Choose a reason for hiding this comment

SomeoneToIgnore left a comment

Choose a reason for hiding this comment

iamnbutler commented Dec 12, 2024 • edited Loading

huacnlee commented Nov 18, 2024 •

edited by SomeoneToIgnore

Loading

huacnlee commented Nov 19, 2024 •

edited

Loading

huacnlee commented Nov 21, 2024 •

edited

Loading

jansol commented Nov 21, 2024 •

edited

Loading

huacnlee commented Nov 28, 2024 •

edited

Loading

jansol left a comment •

edited

Loading

iamnbutler commented Dec 12, 2024 •

edited

Loading