How to use "Debanding" option to prevent color banding in a gradient TextureRect?

Question

I want to have a Godot 4.0 TextureRect background with a linear gradient from #18181b to #27272a. This causes some noticeable color banding issues:

I tried to research and solve this issue. I found a GitHub issue asking for dithering which ultimately points to another issue on a "debanding" option which would fix this.

I've found the setting in Godot and enabled it:

But the screen remains completely unchanged. Both when I actually run the project, and inside the editor:

The tooltip does say:

2D rendering is not affected by debanding unless the Environment.background_mode is Environment.BG_CANVAS.

So I also added a WorldEnvironment Node as a child to the Panel root node, created a new environment, and set the Background/Mode property to "Canvas" from the dropdown. This didn't change anything either.

What am I missing?

PS. As a workaround I've created a gradient in Figma and exported it as a PNG. This works, but is a bit cumbersome (I want to change the "to" and "from" colors of the gradient frequently). Here's a screenshot for reference:

Answer 1

I was struggling with this one myself, turns out your issue is that your gradient texture is too small, only 64x64. The documentation states that the height and width represent the sample count over the gradient in each dimension. It doesn't matter how much debanding you apply to a tiny gradient texture, it's still going to have visible steps between samples. I confirmed that debanding does in fact work using the method you used by blowing out the contrast on my own too-small gradient texture.

You can see the deband dither visible on top of the texture, along with the bands still there. Just boost the appropriate dimension until it looks good. One caveat: the deband filter doesn't seem that good for really subtle gradients over a large area regardless, so this may only work up to a point. I have a large sprite applied over a huge area and I can see slight banding even with a huge texture size.

Edit: I built a subtle noise shader that does a better job of debanding gradients than the built-in debander. It doesn't do any advanced Bayer filter dithering or anything so it's not perfect, but it significantly reduces the issue on really subtle color shifts. I'm sure somebody could do better.

The full code can be found here.