[GLSL] How to make a gradient shader for background?

Newbie & Debugging Questions
#1

I’m trying to make a basic shader to create a gradient between two colors on a game background. I plan to get this kind of effect:

Its pretty simple. I just need some basics to get started, I’m still new to this mathematics in colors thing.

#2

something like (color1 * y / screenHeight) + (color2 * (1 - y / screenHeight)) perhaps

#3

Thanks for the info!

Here’s what I’ve got:

And the shader toy code:

void main(void)
{
	vec3 h_color_top = vec3(0.3, 1, 1);
	vec3 h_color_bottom = vec3(0.8, 1, 1);
	gl_FragColor = vec4(h_color_top * (gl_FragCoord.y / iResolution.y), 1) + vec4(h_color_bottom * (1.4 - (gl_FragCoord.y / iResolution.y)), 1);
}

Is there any way I could make the colors blend less… smoothly? Its for a pixel-oriented game. And I wan’t it to look kinda low-res.

#4

You would be surprised how positively smooth textures and colours affect pixel art games. (At least from my experience, smooth simple 2d lighting is perfect for very simple pixel art games. It makes the game look very smooth or something. )

#5

take away some precision to make them blend less smoothly ie: floor(color/10) * 10

#6

floor(color*10)/10

#7

Wow, thanks guys!

I’ve got this finished now, its looking pretty good. Its just a bit dark. Is there any way I could fix this?

(http://www.shadertoy.com/new)

void main(void)
{
	vec3 h_color_top = vec3(0.4, 1, 1);
	vec3 h_color_bottom = vec3(0.9, 1, 1);
	gl_FragColor = floor(vec4(h_color_top * (gl_FragCoord.y / iResolution.y), 1) + vec4(h_color_bottom * (1.4 - (gl_FragCoord.y / iResolution.y)), 1) * 10.0) / 10.0;
}

I know, I’m planning on adding normal mapping and directional lights soon. Its going to be a very pretty game. :slight_smile: But I wanted something pixel-y for the backdrop.

#8

oh right, my way only works with colors in the 0-255 range.

#9

You could umm… use lighter colors.

#10

I should have added more information. I’m using kinda-bright colors, but the top color seems a bit darker than I declared it as.

(Do note that I changed the floor divisor and multiplicand)

void main(void)
{
	vec3 h_color_top = vec3(0.8, 1, 1);
	vec3 h_color_bottom = vec3(0.9, 1, 1);
	gl_FragColor = floor(vec4(h_color_top * (gl_FragCoord.y / iResolution.y), 1) + vec4(h_color_bottom * (1.4 - (gl_FragCoord.y / iResolution.y)), 1) * 20.0) / 20.0;
}
#11

looks like the /20 at the end is reducing the top color heaps, where as the bottom color has a *20 to negate it. (or maybe not? i need to get more sleep)

#12

Thanks, I’m trying to wrap my head around this. How do I fix this issue?

#13

i suggest you break it down into several steps to make it easier to visualize. calculate each component into a temporary variable on a separate line before adding them together on the final line. that will make it easier to mess around with and you can optimize it again later.

#14

How is this?


void main(void)
{
	float shade = 1.0 - (gl_FragCoord.y / iResolution.y);
	
	
	float blueShade = shade;
	blueShade *= 0.4;
	blueShade += 0.5;
	
	float otherShade = shade;
	otherShade *= 0.5;
	
	int pixelness = 1;
	float power = 50.0;
	
	float r = float(int(1.0 * otherShade * power) / pixelness) / power;
	float g = float(int(1.0 * otherShade * power) / pixelness) / power;
	float b = float(int(1.0 * blueShade * power) / pixelness) / power;
	
	vec4 col = vec4(r, g, b, 1);
	
	gl_FragColor = col;
}
#15

Second thought, I think trollwarrior1 was right. Smooth backgrounds could help with the art style. I’ve got to go, Its 3:31 am here. Thank you so much for the information on the ‘floor’ method though!

#16

Just use vertex colors and discrete interpolated color at pixel shader.

#17

I don’t want to start a new thread on this, because I’ve made too many in the last 2-3 days. But is there any way to use the #include in GLSL? It keeps telling me it doesn’t support it.

#18

You can do it with your shader loading code. If it encounters a #include directive then it can search for the file stated by the include.

#19

Ah, I see. I’ve been following ‘TheBennyBox’s’ github and I’ve seen that #include, and I was wondering how it worked. Thanks!

#20

This is where I got the idea from :wink: You can see how he implements it in this video if you’re interested.