About this simulation
The Morphing Sphere is a real-time generative art piece that runs entirely in your browser using WebGL. Every frame, a custom GLSL vertex shader displaces each of the sphere's ~40,000 vertices along its outward normal using fractal Brownian motion (fBm) — four stacked octaves of 3D simplex noise evaluated at progressively doubled frequencies. The result is a surface that breathes, pulses and writhes with organic complexity, never repeating. A second pass of domain warping feeds the noise output back as a new input coordinate, introducing the characteristic self-similar swirls you see across all colour themes.
🔬 What it shows
Procedural vertex displacement via domain-warped fBm simplex noise on a high-resolution icosphere (detail 6). Perturbed normals are computed per-vertex using finite differences, giving accurate shading on a dynamically deformed surface. A cosine-palette fragment shader maps displacement value and time to colour, producing the iridescent, magma, ocean and candy palettes.
🎮 How to use
Drag to orbit, scroll to zoom. Noise scale (0.5–6) controls how many bumps appear — high values give fine crinkles, low values give broad swells. Amplitude (0–1) sets how far vertices are pushed; at 1.0 the surface nearly doubles in radius at peaks. Morph speed (0–2) drives how fast time advances through noise space. Hit Pulse! to briefly spike amplitude for a dramatic expansion burst.
💡 Did you know?
Domain warping was popularised by Inigo Quilez in 2003 as a way to produce terrain and cloud textures that look genuinely fractal rather than merely noisy. At its core it is just one noise call whose output steers the coordinate fed into a second noise call — two lines of GLSL that add enormous organic richness. The technique is now a cornerstone of real-time procedural graphics in games and demo-scene productions.
Frequently asked questions
What type of noise powers the morphing?
The simulation uses 3D simplex noise (Ashima Arts / Stefan Gustavson implementation), composed into fBm with 4 octaves and a lacunarity of 2.0 and gain of 0.5. Simplex noise was chosen over classic Perlin noise because it has fewer directional artefacts in 3D and is slightly cheaper to evaluate in GLSL — important when it runs once per vertex per frame across ~40,000 vertices.
What does the Noise scale slider actually change?
It multiplies the vertex position before it is passed to the noise function, effectively zooming in or out on the noise field. A low scale (e.g. 0.5) samples a tiny region of noise space so the surface looks smooth and blobby. A high scale (e.g. 6.0) samples a wide region, resolving fine detail and producing a densely crinkled, coral-like texture.
Why does the Pulse button cause such a dramatic effect?
Pulse temporarily raises the amplitude uniform from its current value by up to +0.65 using a sinusoidal envelope over 1.2 seconds. Because amplitude is clamped to 1.0, and at amplitude 1.0 the surface can displace nearly its full radius outward, the sphere momentarily balloons out before snapping back — visually similar to a shockwave expanding from the centre.
Can I freeze the animation?
Set Morph speed to 0.0. The time uniform stops advancing so the noise field is sampled at a fixed coordinate, locking the surface in whatever shape it had at that moment. You can still orbit and zoom to inspect the frozen geometry. Raise amplitude while frozen to exaggerate the displacement without motion.
Does it run on mobile?
Yes — the simulation uses a standard WebGL 1.0 context with a single draw call, which runs on any modern smartphone browser. On lower-end devices you may want to keep noise scale below 3.0 and morph speed below 1.0 to maintain smooth frame rates, as each frame evaluates the domain-warped fBm function roughly 120,000 times in the vertex shader.