A procedural galaxy rendered in real-time through the mathematics of light and noise.
This project is a faithful WebGL recreation of the Pegasus Galaxy shader, originally created by Frank Hugenroth (@frankenburgh) and released at Nordlicht Bremen 2015.
The entire galaxy — its spiral arms, luminous core, stellar dust, and background nebulae — emerges from pure mathematical functions. No textures. No pre-rendered assets. Just code interpreting the language of fractals.
Built with Three.js and raw GLSL, the shader runs in real-time at 60fps, responding to user interaction through orbit controls.
The shader employs a technique known as raymarching through procedural noise. For every pixel on screen, a ray is cast from the camera into the scene. Along that ray, density is accumulated through layered noise functions, building volume from nothing.
| Function | Purpose |
|---|---|
hash() |
Generates pseudo-random values from a single float input |
noise() |
Produces smooth, continuous randomness across 2D and 3D space |
fbmslow() |
Layers noise at different frequencies for large-scale structure |
fbm() |
High-detail fractal accumulation with variable amplitude |
These functions compose into Fractional Brownian Motion (fBM) — a method of stacking noise at progressively finer scales to simulate natural complexity. The result is organic, unpredictable, and deeply reminiscent of actual cosmic structures.
The rendering pipeline combines several visual layers:
- Core glow — a bright, concentrated light at the galaxy's center
- Spiral arms — rotating density waves shaped by trigonometric functions
- Stellar dust — procedural clouds with color variation based on radius
- Background stars — high-frequency noise thresholded into point sources
- Nebula fog — slow-moving volumetric layers adding atmospheric depth
- Vignetting — subtle darkening at the screen edges for cinematic framing
| Technology | Role |
|---|---|
| Three.js | Scene management, rendering pipeline, camera controls |
| GLSL | Fragment shader — all visual computation |
| OrbitControls | Mouse-driven camera rotation, zoom, and pan |
| ES Modules | Clean, modern JavaScript architecture |
A modern web browser with WebGL support. That's it.
git clone https://github.com/CosmosMuseum/cosmos-museum-galaxy.git
cd cosmos-museum-galaxyOpen index.html directly in your browser, or use a local server:
# Using Python
python -m http.server 8000
# Using Node.js
npx serve .Then navigate to http://localhost:8000.
| Action | Input |
|---|---|
| Rotate | Click + Drag |
| Zoom | Scroll Wheel |
| Pan | Right Click + Drag |
galaxia/
├── index.html # Entry point
├── style.css # Minimal styling
├── main.js # Three.js setup, shader orchestration
├── galaxy.html # Standalone version (raw WebGL)
└── img/ # Assets
The shader exposes several parameters that can be adjusted to alter the galaxy's appearance:
// Camera position — changes the viewing angle
vec3 campos = vec3(500.0, 850., -.0-cos((time-1.4)/2.)*2000.);
// Cloud rotation speed
float rot = 3.00*(radius)-time;
// Dust color gradient
vec3 dustcolor = mix(vec3(2.0, 1.3, 1.0), vec3(0.1, 0.2, 0.3), pow(radius, .5));
// Star brightness multipliers
float gstar = 2.*pow(noise(cpos*21.40), 22.0);
float gstar2 = 3.*pow(noise(cpos*26.55), 34.0);Modify these values to create your own variations of the galaxy.
The shader is designed to run efficiently across a wide range of hardware:
- 40 cloud layers total (20 outer + 20 inner)
- 6 octaves of fBM for core noise
- 4 octaves of fBM for slow-moving background structures
- Early termination when cloud density saturates (
sum.w > 0.999)
On a mid-range GPU, the shader maintains 60fps at 1080p without optimization.
This project is built upon the extraordinary work of:
- Frank Hugenroth — Original Pegasus Galaxy shader (Shadertoy)
- Three.js — 3D rendering library (threejs.org)
- Nordlicht 2015 — Demoscene event where the shader was first presented
This project is open source. The original shader is attributed to Frank Hugenroth and was released under the Shadertoy community license.
Sebastian Vasquez — sebas-dev.vercel.app
Built with mathematics and wonder.
Made with ❤️ by Sebastián V