Gradient banding reduction

[Matt_SF]

@d-healey Sure, here you go :

HiseSnippet 875.3ocsU0tSaCCE0tzfZ6FSCo8.DwOPoRccs.iMIzzXTnnpAkJJCsIDBYRbarHwtJ1AV0Duy6MfccbJI.cLV0V9QatebrO45y85dQBWpTJhP3xGMdDEgetU+wbkeKeBii5rMB+Bq8IREMx13ZqwiHRI0Cgwysq1AtbQTxyO+3Vj.B2kl4BgNVvbo6wBYpLu817yrff1DO5QrvbYu1lcbE7Vh.QLvm4rZfFQbufLj1knSqfEBO+NdLkHpuhnnRHmsDdi66Kthax+Xljcd.UazD0GVHiaTKeVfWuIeqRDBWrW1W9blu7WYsOyicq+rJvKSBXmgHeM.W3wnTy+BJgyQohFJsnUe2H1HUVDMedlUGNbfLf.k57TwjKpPoBVsDPFbU8PxEz1QfwsHbVuQiZ1vOU2nREnbKU1WRhr6Q3zfl1evdBxgTUKQ3HAGLbVxDdIMFyq0kTUOn.oNTDqXbpyfXtqhI3NCqV4GUJqWSBrbJelTuV6IbIAaIh4dRG8VmjvUPBjSV4zTS+DyU0lUJOr94zgL9djwzHmAj.IUiZnde2Mh3w.Z0FTQNmLYGbVhongF0yRUqAK9arWoFrnI+MsrVIIMHEHbTL8TyFL.V0CotJGhwl340UvjTmF0azz3hx8L7BLut5FS9zsE7tBE8.tSRInx0UruenAClZLcQORDDnWxoDV2lD8X.c3wgmSipAGkAwzaSDzQ2UbN+SSb5Zz.4RTv6vYpCFQSsaKB7zhN86OTJiREQvaeoy1DEQqtS8A4MhFoXZ5f2ldILdvn0KasMUdgRLJI2TkGBWRkDcgIcBZ0GhAacIKiRD88rIHeayw4Mth4o7QXKbMLB4SYC8USrxTA.f4Wd4kuQCIm1P6F7biYh0C5LgYBBu3.h5tCJzSDSC.GP2o6T2AxkL037SLu+zih+9CnF4Nf9Ck+mHcWzpGS45Oc9VXJ7ENF+ey2zYwKXsyfAPSXFYKZ09qO5f2+MTwLNa39DUDCDVVciC6CxAWJvDNH2jZATAsD2X2PaqqL8ggBIF2.OoAapswoAaNIHJj3FINy0z5pm7WJwCvIdxEckgabAa6lnj1Y.mEL6AEBWBclqqtT7Zf6SGyJy.lUmALqMCXd6LfY8Y.y6lALu+Qwnu++SwJQnoMAbzamj4ZX7NbBnxRTjneA3UMB5H

Edit : You don't need the first gradient drawing, the Layer is enough. I updated the snippet.

[d.healey]

@Matt_SF Doesn't seem to make a difference to the banding

With noise

Without noise

[Matt_SF]

@d-healey The effect is indeed quite subtle. I made an example with a linear gradient :

The upper panel has a noise value of 0.015 and the bottom one has none :

I'm on my mac and oddly, I see more banding on your example than on mine...

And a smaller example :

[d.healey]

Looks like I'll use a png then :beaming_face_with_smiling_eyes:

[Matt_SF]

@d-healey I just got home and FYI, this is what I get on my PC using roughly the same code, colours and disposition as in my previous post :

[aaronventure]

Yeah the gradient on large dimensions seems to have a lot of banding.

I have a small project where I tried it and even with noise the banding was bad. I recreated it in photoshop and imported the png and the banding was gone. The downside is having to use a full res png for this, wasting user memory.

Interesting results on mac. Is it a windows thing, then?

[d.healey]

@Matt_SF I still see lots of banding in your image.

[Matt_SF]

@d-healey On the last image I posted using my PC, and on your image I'm also seeing bands whether I'm on mac or PC, but on both platforms I don't see bands on the images I made using my mac...

You probably found the same info as me online, bands can appear depending on the bit depth of the image, whether the image is compressed or not and on screen specs.

Do you see bands on the first images I posted ?

[d.healey]

@Matt_SF I see banding on all your images

[Matt_SF]

@d-healey ???
I'll have acces to multiple screen today, I'll take a look there

[Matt_SF]

@d-healey I tested it with several different screens and the same is happenning : I'm seeing bands on your example and my last one (PC) but not on my first ones (MAC)...

[Straticah]

@Matt_SF we have the problem quite often anti aliasing and dithering is completely different when comparing win and mac. I dont use mac often but juce gui elements looks way smoother on mac.

[d.healey]

@Straticah I was reading something on the JUCE forum that Mac uses a different rendering system that helps smooth out gradients.

[aaronventure]

I'm dealing with large area gradients again and this is coming up.

Windows:

macOS

Looks a tiny bit worse in the captures, but the Windows version always looks bad. @Christoph-Hart is this entirely a JUCE thing and out of your hands?

I get the same results whether I'm running Windows on an RTX3080 PC or inside Parallels on a MacBook, so it's definitely software.

[Christoph Hart]

@aaronventure said in Gradient banding reduction:

is this entirely a JUCE thing and out of your hands?

Yes. There was some work done in JUCE 8 that introduced a new Direct2D renderer which might or might not help with this, but the legal implications of the JUCE 8 license will keep us on JUCE 7 for the foreseeable future, so...

Does this change if you use the OpenGL renderer?

[aaronventure]

@Christoph-Hart said in Gradient banding reduction:

Does this change if you use the OpenGL renderer?

Reply

What like the switch in the settings? Or if I draw a gradient in an openGL shader?

Just having openGL enabled and in use (even if another shader animation is running) doesn't change the paint routine gradient quality, it's just as bandy.

What's up with JUCE 8 license? Didn't they walk back on a bunch of stuff? I'm aware it'll need a license for the distributor just like HISE, but what's the interaction with HISE?

[Christoph Hart]

I'm aware it'll need a license for the distributor just like HISE, but what's the interaction with HISE?

I don't want to derail that thread to become a JUCE 8 discussion (so if there is a demand for talking about it let's move it to a separate thread), but long story short:

their attempt to crack down on a vaguely described illegitimate use case causes any platform that provides the ability to create program logic to consider every contributor as a JUCE developer. So if you have a setup where a few people were working on a HISE project, you might end up requiring a license seat for each developer, regardless of whether he is actually using JUCE (= compiling the plugin) or just working on graphics or anything else that is not "close to the metal". This in combination with the increased pricing for each seat can lead up to license cost increases of 500% - 1000% in the worst case setup (which would be a team of 5 developers working with HISE with a single JUCE 6 / 7 license).

I know of a few project team setups which are using HISE and are negatively affected by this change so I've decided to hold off updating to JUCE 8 unless there is a really game-breaking issue. There are a few nice things in JUCE 8 like the monitor-refresh rate synced animation framework and the new Direct 2D renderer, but none of those justify that legal fiasco.

[ustk]

Ouch....

[aaronventure]

@ustk Is this Windows? Large gradient areas really suck here, which means you have to use rasterized images or just do something else.

Have you tried a flat color, and then adding drop shadow on top? I wonder if melatonin would fix that (when it gets implemented for shadows and blur one day).

[ustk]

@aaronventure It's on mac... This isn't an image but a panel with a 3 gradient fill (I should have mentioned that...) So the middle should be a bit darker (or lighter) than the two sides. In this case a blur won't help, well in fact maybe I can fake it with a big value...

But the problem with shadows is that you need a mask if you don't want them to spillover

The shadows are looking good for now in my project when kept rather small... But the limitations we see as soon as there's a gradient (or shadow) really show the limitations we have with Juce. I could just go with images but I like the flexibility, precision, and lightweight of vectors