Gradient is not smooth(it looks segmented)

Unity Engine
1

Hi, I’m drawing the background of my game using a shader.
The background is a gradient between 2 colors:

This is the shader I’m using:
fixed4 frag (v2f i) : SV_Target
{
float2 gradUV = float2(i.uv.y, i.uv.x);
fixed4 grad = tex2D(_GradTex, gradUV);
return _Color1 * grad.x + _Color2 * (1-grad.x);
}

I use _GradTex to set the way the 2 colors interpolate. This is _GradTex that I’m using:

My problem is that _GradTex is smooth but when I draw my background it looks segmented(it’s more obvious at the bottom).

2

Do you have compression turned on in the texture import settings, or is it perhaps too low resolution?
(It might also be better for you to simply express the gradient mathematically with a lerp or smoothstep between colors, rather than relying on a texture)

3

I’m creating the texture by code. I create the texture based on an animation curve. Isn’t a texture like this the way to pass an array of values to the shader?

4

Did you check the resolution?
If upping it doesn’t help, I’d suggest you look into dithering. It’s very cheap and can remedy banding.

1 Like
5

Is it? The .png you posted certainly isn’t. It has large steps between each pixel value. If it is set to use point sampling, those are going to show up as visible steps. Plus you have some parts of the gradient that have the same value for 2 pixels in a row, so even if you did use bilinear filtering it’d still show up as a band.

You need to make sure your gradient texture is using bilinear filtering, and probably also need it to be something like an RHalf texture format, something with more precision per channel than a RGB24 or R8. If you use an 8 bit per channel format, some parts of the gradient are going to quantize and get stepped.

1 Like