Look at images captured by space telescopes.
Galaxies are filled with glowing clouds of gas and dust.
Some regions appear bright blue.
Others glow purple, pink, or orange.
The colors blend together smoothly while swirling into beautiful organic shapes.
Although these images look incredibly detailed, many of the same visual ideas can be recreated using procedural noise.
What Makes a Nebula Look Natural?
A procedural nebula usually contains five ingredients.
Layered noise.
Domain warping.
Soft gradients.
Bright glowing regions.
Color blending.
We've already learned every one of these techniques.
Now we'll combine them into one shader.
Starting with the Coordinates
We'll begin with our familiar UV coordinates.
vec2 uv = vUv;
Everything will grow from these coordinates.
Creating the Base Noise
Generate a large FBM pattern.
float nebula =
fbm(
uv * 2.5
);
This creates the large cloud structures.
Warping the Coordinates
Real nebulas twist and swirl.
Instead of sampling straight coordinates, distort them first.
vec2 offset;
offset.x = fbm(uv * 3.0);
offset.y = fbm(uv * 3.0 + 5.0);
uv += offset * 0.2;
The clouds immediately become more organic.
Adding More Detail
Sample another layer.
nebula +=
fbm(
uv * 6.0
) * 0.4;
The large shapes now contain smaller details.
Softening the Edges
A nebula fades smoothly into space.
nebula =
smoothstep(
0.35,
0.8,
nebula
);
Hard edges disappear.
The cloud begins to glow naturally.
Creating the Colors
Blend between deep space and bright gas.
vec3 color = mix(
vec3(0.02,0.02,0.08),
vec3(0.40,0.15,0.80),
nebula
);
The cloud becomes purple.
Adding More Colors
Blend a second color into the brighter regions.
color = mix(
color,
vec3(0.20,0.80,1.00),
pow(
nebula,
2.0
)
);
The brightest areas now glow blue.
Creating Bright Cores
Many nebulas contain intense glowing regions.
Increase the brightness.
color +=
pow(
nebula,
5.0
) * 0.6;
The cloud gains dramatic highlights.
Complete Shader
#ifdef GL_ES
precision mediump float;
#endif
uniform float uTime;
varying vec2 vUv;
void main(){
vec2 uv = vUv;
vec2 offset;
offset.x = fbm(uv * 3.0);
offset.y = fbm(uv * 3.0 + 5.0);
uv += offset * 0.2;
float nebula = fbm(uv * 2.5);
nebula += fbm(uv * 6.0) * 0.4;
nebula = smoothstep(0.35,0.8,nebula);
vec3 color = mix(
vec3(0.02,0.02,0.08),
vec3(0.40,0.15,0.80),
nebula
);
color = mix(
color,
vec3(0.20,0.80,1.00),
pow(nebula,2.0)
);
color += pow(nebula,5.0) * 0.6;
gl_FragColor = vec4(color,1.0);
}
Even without stars, the result already resembles colorful clouds drifting through space.
Combining with the Previous Tutorial
The nebula becomes even more convincing when placed behind the procedural stars we created previously.
The glowing clouds provide depth while the stars add small points of detail.
Together they create a complete space scene.
Animating the Nebula
Slowly move the coordinates.
uv.x +=
uTime * 0.02;
The cloud slowly drifts across the screen.
Very slow movement usually produces the most convincing result.
Creating Different Nebulas
Change the colors.
Purple and blue create a classic science fiction appearance.
Orange and red resemble glowing gas.
Green and cyan create a mysterious alien atmosphere.
The mathematics stays exactly the same.
Only the color palette changes.
Where Are Procedural Nebulas Used?
Nebula shaders appear in many projects.
-
Space games.
-
Science fiction films.
-
Planet backgrounds.
-
Motion graphics.
-
Animated wallpapers.
-
Loading screens.
-
Fantasy environments.
-
Educational simulations.
-
User interfaces.
-
Digital artwork.
Most are built from the same procedural techniques we've learned throughout this series.
Try These Experiments
Create a blue nebula.
Create a purple nebula.
Create a red nebula.
Increase the domain warping.
Reduce the glow.
Add the procedural stars from the previous lesson.
Experiment with different color gradients.
Observe how dramatically the atmosphere changes.
A Small Challenge
Can you create these scenes?
-
A colorful galaxy.
-
A glowing space cloud.
-
A fantasy sky.
-
A deep space background.
-
A science fiction loading screen.
Every one begins with layered procedural noise.
Posted Using INLEO
