This volumetric nebula is not a picture. There is no texture file behind it, and there is no skybox. Your browser computes the gas cloud from scratch, every single frame. It fires thousands of rays into the scene, and each ray adds up glowing light along its path. In this post, I will break down how the demo actually works. I will also show why this volumetric nebula runs with no internet connection at all.
How Ray Marching Paints a Volumetric Nebula
Ordinary 3D rendering draws solid surfaces. A nebula has no surfaces, so the scene uses a technique called ray marching instead. Here is the idea. For every pixel on screen, the browser shoots one ray into the scene. Then the ray walks forward in small steps. At each step it samples a density function, and it accumulates whatever light lives there.
The density function is pure math. It stacks layered noise, the fractal kind that repeats detail at every scale, into a soft, blobby field. The color comes from the same sampling, so density and position decide the glow. Because the field is soft everywhere, the result reads as gas rather than geometry. First the eye accepts the shape, and then it stops asking how.
The cost is real, though. A 1280 by 720 screen means roughly a million rays, and each ray takes dozens of steps. A modern GPU shrugs at that and stays above sixty frames per second. A 2010 laptop, not so much.
Three Star Layers Sell the Depth
A cloud alone does not feel like deep space. Distance comes from parallax, so the demo draws three star layers at different depths. Each layer drifts at its own speed while you move. The gas shifts too, but slower, sitting between you and the far field. In other words, your eyes read those differing speeds as distance. Classic side-scrolling games used the same trick, and it still works.
One File, Zero Dependencies
Here is the part I care most about as an engineer. The whole demo is a single HTML file, and this volumetric nebula carries its own 3D engine. three.js lives inside the page itself. There are no CDN calls, no image downloads, and nothing to break when the network disappears. The canvas talks straight to WebGL, the browser graphics API.
Why does that matter? Because demos die quietly when dependencies rot. A 670 KB file that carries its own tools still works in ten years. It runs on an air-gapped machine, on a shop demo loop, and inside a blog iframe like this one. Overall, a page that needs nothing is a page that never breaks.
Try It Yourself
Move the mouse to look around. The star layers and the gas drift at different rates, so the sense of depth arrives fast. Then scroll the wheel and fly deeper into the cloud. There are no wrong positions here, because the density function has no edges to fall off. For instance, every spot a few hundred units apart looks like a different corner of sky.
Where to Go Next
If the depth trick grabbed you, read the second demo in this set: crystals with real depth of field and bokeh. It fakes a camera lens instead of a gas cloud. Or, if you prefer machines to physics, travel the interactive computer timeline from 1977 to today. For the original crystal shader behind all three demos, see Reverse Engineering igloo.inc — A Deep Dive.