LibGDX - Gradient looks weird?

[ddfh]

Hi,

I added a 3D cube. On this 3D cube is a gradient texture. When I start my app,
the gradient looks like this here:

(second image)
http://stackoverflow.com/questions/13478116/android-gradient-weirdness

I added this code to my main activity. Code is not working!

1   2   3   4   5   6   7   8   9

AndroidApplicationConfiguration cfg = new AndroidApplicationConfiguration();         cfg.useGL20 = false;         cfg.r = 8;         cfg.g = 8;         cfg.b = 8;         cfg.a = 8;         initialize(new Game(), cfg);

[davedes]

Are you using RGBA8888 format for your textures?

[ddfh]

Yes. I added the RGBA8888 to the texture. Not working.

Games published by our own members! Check 'em out!

[matheus23]

Are you using RGBA8888 format for your textures?

His problem is not, that the gradients aren't working, they only look bad (as judged from the second image of the link he gave).

I'd like to help you, ddfh, but there is no easy solution for this problem.

It technically is a gradient... but the color difference between two gradient regions (which are bigger than 1 px) makes it look aweful.
Consider this: You want a gradient from (an imaginary) color 255 to 250 over 20 pixels... in the end this will be the color values:
255 255 255 255 254 254 254 254 253 253 253 253 252 252 252 252 251 251 251 251 250 250 250 250

In the image in the end your eye will recognize those jumps from one color region to another, for example from 255 to 254, because each of those actually is a region (4 px wide).

How the gradient was made in the 1st image of your link is a little trick. We trick our brain / eye not to recognize any patterns. How are we doing that? We randomize. so you add or subtract 1 or 2 color values from each pixel and randomize each pixel a bit.
What you then have is this:
255 256 255 254 255 253 254 253 254 253 253 252 252 251 251 252 251 250 251 250
(^ randomized through some scala code:

1	for (i <- 0 until 20) { print(s"${(math.random * 4 - 2).toInt + 255-(i/4).toInt} ") }

not necessary for you to understand that code (since it's scala anyways), only that randomization plays a role)

As you can see, now you can't see regions with same values anymore. In the end the values get smaller if you go from left to right, but you still can't see any (so called) "banding".

That's how you trick your eye to make a gradient look good.


Now... How would you apply that to your game / gradient in android?

I'd do it with glsl shaders and add a little random noise to every pixel (even when not being a gradient. It won't be visible anyways).
But shaders is another story.
Let alone random values inside a shader...

[ddfh]

Thanks!

[Roquen]

If we were talking 555 or 565 then sure, but 888? No.

[noblemaster]

OpenGL on Android might use 575 when rendering! It doesn't matter if you set it to use 888. However, you can try to enable dithering (GL_DITHER?) and see if that helps?

[Roquen]

16-bit!!??!  Eee-gads...the horror!  Yeah, enable dithering.