When you look into the night sky, the stars seem randomly scattered.
Some are bright.
Some are barely visible.
Some appear grouped together while others sit alone.
Although they look random, we can recreate this effect using mathematics instead of an image texture.
What Makes a Night Sky Look Real?
A simple night sky usually contains four ingredients.
A dark background.
Randomly placed stars.
Different star sizes.
A slight twinkling animation.
Each one can be created with the functions we've already learned.
Starting with the Sky
We'll begin with a dark blue gradient.
vec3 sky = mix(
vec3(0.01,0.02,0.08),
vec3(0.00,0.00,0.02),
vUv.y
);
The horizon becomes slightly brighter while the upper sky remains almost black.
Creating a Grid
To place stars, divide the screen into cells.
vec2 grid =
vUv * 80.0;
Each square now has the potential to contain one star.
Finding the Cell
Separate the whole number from the local position.
vec2 cell = floor(grid);
vec2 local = fract(grid);
The cell identifies which square we're in.
The local coordinates tell us where we are inside that square.
Creating Random Stars
Generate a random number for every cell.
float star =
random(cell);
Most cells should remain empty.
star =
step(
0.995,
star
);
Only a few cells now contain stars.
Drawing the Star
Place it near the center of each cell.
float glow =
1.0 -
length(
local - 0.5
);
This creates a circular shape.
Multiply it by the random value.
glow *= star;
Now only selected cells display stars.
Making Stars Twinkle
Real stars appear to shimmer.
Use time.
glow *=
0.8 +
0.2 *
sin(
uTime * 3.0 +
cell.x
);
Every star now changes brightness over time.
Because each cell has a different position, the twinkling appears random.
Complete Shader
#ifdef GL_ES
precision mediump float;
#endif
uniform float uTime;
varying vec2 vUv;
void main(){
vec2 grid = vUv * 80.0;
vec2 cell = floor(grid);
vec2 local = fract(grid);
float star = step(
0.995,
random(cell)
);
float glow =
1.0 -
length(
local - 0.5
);
glow *= star;
glow *=
0.8 +
0.2 *
sin(
uTime * 3.0 +
cell.x
);
vec3 sky = mix(
vec3(0.01,0.02,0.08),
vec3(0.00,0.00,0.02),
vUv.y
);
vec3 color = sky + glow;
gl_FragColor = vec4(color,1.0);
}
Even with very little code, the result resembles a peaceful star filled sky.
Creating More Stars
Reduce the threshold.
step(
0.990,
random(cell)
);
More stars appear.
Increase the threshold.
step(
0.998,
random(cell)
);
The sky becomes much emptier.
Making Brighter Stars
Increase the glow.
glow * 2.0
A few stars become much more noticeable.
This creates a natural variation.
Adding Color
Not every star is pure white.
Blend small amounts of blue or yellow into some stars.
This creates a much richer sky.
Where Are Procedural Night Skies Used?
Night sky shaders appear in many projects.
-
Space games.
-
Open world games.
-
Animated backgrounds.
-
Mobile games.
-
Planet simulations.
-
Motion graphics.
-
Fantasy environments.
-
User interfaces.
-
Educational projects.
-
Procedural artwork.
Many of them begin with the same simple grid based technique.
Try These Experiments
Increase the number of stars.
Decrease the number of stars.
Change the twinkling speed.
Create blue stars.
Create golden stars.
Increase the grid size.
Decrease the grid size.
Observe how these small changes affect the appearance of the sky.
A Small Challenge
Can you create these skies?
-
A clear winter night.
-
A dense star field.
-
A magical purple sky.
-
A deep space background.
-
A colorful galaxy.
Each one begins with the same mathematical ideas.
Posted Using INLEO
