This is amazing!
I have a question: I am seeing some gradient banding in the gradients that I created (because of the colors/alpha that I used). Is there any way to reduce this?
The banding might just be because of the lack of precision in dark colors. Shades of dark colors are easier to differentiate for the human eye. If this is the issue, there's no perfect fix, but there are some that work pretty great.
First off, if the gradient will be overlayed some detail-rich textures, you might not notice the banding when playing the game, in which case you don't have to do anything.
If you notice it ingame, it might work to make the gradient lighter, or to put the dark colors closer to each other in the gradient; as in use a distribution similar to linear or "smoothstep with offset" as opposed to gaussian splat.
If you don't want to change your gradient, you can use dithering, which can be very effective. Dithering adds noise into the bands to make them harder for the eye to notice. Here's an example without dithering:
https://i.imgur.com/4om3lqg.png, and with dithering:
https://i.imgur.com/ER2JxHa.png. I haven't added it to this asset though, but I use it in my interactive books asset. One way to implement it is to use a dithering pattern, like e.g. this noise:
https://i.imgur.com/fh14CH9.png. Then pass this texture to the shader, and then add this code to the end of the fragment shader code:
Code:
gl_FragColor += 0.02 * texture2D(texture_dithering_pattern, dithering_coordinate.xy / dithering_coordinate.w).r;
You might have to tweak 0.02 a bit. dithering_coordinate can be set in the vertex shader like so:
Code:
gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * in_Position;
dithering_coordinate = vec4((vec2(gl_Position.x, -gl_Position.y) + (1.0 + 1.0 / 256.0) * gl_Position.w) * 5.0, gl_Position.z, gl_Position.w * 2.0);
Replace 256.0 with the size of your dithering texture. dithering_coordinate is a varying, so be sure to include
Code:
varying vec4 dithering_coordinate;
in both the vertex and the fragment shader.