Simple GLSL Effects : Battleships at dawn animated menu background

This effect uses a single screen-aligned quad, so there is no matrix transformation on the vertex shader. It samples a noise texture.

The geometry consists in 4 vertices:
// VBO initialization ...
static const byte data[] = {0, 0, 1, 0, 0, 1, 1, 1};
glBufferData(GL_ARRAY_BUFFER, 8, data, GL_STATIC_DRAW);
// ...

Vertex Shader

The vertex shader code simply remaps the points to Normalized Device Coordinates ([-1, 1], with screen center at [0, 0]):
attribute vec2 aPosition;

varying vec2 vTexCoord;
void main() {
	vTexCoord = aPosition;
	vec2 pos = aPosition * 2.0 - 1.0;
	gl_Position = vec4(pos.x, pos.y, 0.0, 1.0);
}

Fragment Shader

We bind the following texture to the sampler ‘sTex':

pknorm_2

We also feed a timer (number of seconds since program startup) to the shader’s “uTimer” uniform.

precision mediump float;

uniform sampler2D sTex;
uniform float uTimer;

varying vec2 vTexCoord;
void main() {
     // the factor 0.2 controls the tilting of the rays
     float f = texture2D(sTex, vec2(fract(uTimer * 0.05), vTexCoord.x + vTexCoord.y * 0.2)).b;
     vec4 vGrad = vec4(0.23, 0.37, 0.41, 1.0) * vTexCoord.y; // vertical gradient
     gl_FragColor = vGrad + vGrad * 3.0 * f;
     gl_FragColor.a = 0.4;
}

line 9: the factor 0.2 controls the inclination of the gradient. a value of 1.0 will produce oblique gradient (45°), 0.0 gives vertical rays.

line 9: the expression fract(uTimer * 0.05) controls the looping (1/0.05 => loop every 20 seconds)

line 11: ‘vGrad’ is a vertical gradient, from black at the bottom to bluish at the top.

Comments are closed