Gradient banding reduction

[d.healey]

I'm noticing some severe banding in a radial gradient. Is there a solution for this or do I need to use an image?

[Christoph Hart]

@d-healey You can use g.addNoise() which creates an internal image for the given dimensions and draws it over the panel.

[d.healey]

@Christoph-Hart Aha interesting.

Would I use it like this?

    g.setGradientFill([this.get("bgColour"), a[2] / 2, a[3] / 2, this.get("itemColour"), a[2], a[3], true]);
    g.addNoise(0.01);
    g.fillRect(a);

Or do I need to create a layer first?

[Matt_SF]

@d-healey yes. Noise, opacity, blur, etc... need to be into a layer.

[d.healey]

@Matt_SF Could you share an example?

[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

[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?