Gradient with alpha renders weird

General JUCE discussion
#1

Hello,
When applying a gradient fill with alpha on its colours, I noticed some unattractive artefacts, like heavy banding effects, that are not present or less if you use solid colours with no alpha.

With opaque colors

image
image1459×835 75.3 KB

With transparent colors
image
image1575×620 73.2 KB

I wonder if it’s a bug or not, because in my use case the last band created by the gradient from the magnitude response on the bottom seems to be darker than the bottom background, which seems weird since the gradient is bright at the top, and fully transparent at the bottom.

Thanks in advance for your help,
Louis

(Juce 6, OS:windows 10)

#2

Unfortunately there is no dithering on gradients which is normally what causes this banding effect.

#3

Do you mean dithering?

#4

Ahem… I don’t know what you’re talking about that’s what I wrote in the first place. Nothing to see here :grin:

1 Like
#5

Afaik CoreGraphics does dither gradients! And in SR’s branch I’ve also added a very basic gradient dither for the OpenGL backend because I noticed that our gradients became ugly when using it. YMMV but it worked nicely for our UIs.

1 Like
#6

I didn’t know that! I guess it’s not that surprising. I notice that the OP mentions they are using Windows hence they are seeing this.

1 Like
#7

Yes I confirme about CoreGraphics, when my collegue sent me a screenshot on his mac it was day and night. I ended up with opaque colours in my gradient for now, where the dither is still present but far more acceptable than when the gradient is made of transparent colours.

@Yairadix, thanks a lot for sharing your code, I’ll definitivly take a look if I move on openGL one time.

Thanks again guys. :slight_smile:

1 Like
#8

detail
I think this is something else. The value goes up and down, and it falls below minimum on alpha 0. This looks like some kind of rounding error.

#9

That’s what I was thinking at first.

#10

This can easily happen without dithering:

>>> background = 5
>>> color = [round(x*0.3) for x in range(10)]
>>> alpha = [0.1*round(x*0.2) for x in range(10)]
>>> [background+(c-background)*a for (c, a) in zip(color, alpha)]
[5.0, 5.0, 5.0, 4.6, 4.6, 4.7, 4.7, 4.7, 4.4, 4.6]
3 Likes