Shader background generator

by Kepler

This browser can’t draw WebGL, so the sky can’t be shown here.

Sky

Export

Code
Image

Animated WebGL backgrounds, drawn from how real skies work. Pick a sky, shuffle the seed and copy the code.

How a sky is made

  1. A light

    The sun, or the stars. Everything you see starts there.

  2. What’s in its way

    Air, clouds, sea, gas and dust. Each blocks the light, scatters it, reflects it or glows.

  3. Where you stand

    On the shore, in orbit or inside the galaxy, looking with your eyes or a telescope.

  4. A seed

    One number picks every dial. The same seed always gives the same sky, so you can come back to it.

The Milky Way in five wavelengths

Telescopes see light our eyes can’t, and each kind shows a different galaxy. The colours are the surveys’ own: invisible light, painted so we can see it.

  • A thin, bright band of the Milky Way in gamma-ray colours Fermi

    Gamma rays

    Gas lit by cosmic rays: a thin, bright line.

  • A broad grey band split by a dark rift of dust, in visible light ESO

    Visible light

    Nearby stars: a broad band split by dark dust, its bulge half hidden.

  • A thin white disc through a big, flattened bulge, in near-infrared 2MASS

    Near-infrared

    Old stars, seen through the dust: a thin disc, a big bulge.

  • A rust and cream band with dust glowing along it, in infrared SPHEREx

    Infrared

    Warm dust and hot gas: the dust glows along it.

  • A thin lilac band, its dust glowing, in microwaves Planck

    Microwaves

    Cold dust and magnetic fields: thin, the dust glowing.

Questions

Can I use the code?
Yes. It’s a few lines of HTML and one script, with no libraries, under the MIT licence. Paste it where you want the sky, and it fills the element you paste it into.
Is this a real map of the Milky Way?
No. Each sky follows the physics of a galaxy like ours, and its colours come from real telescope surveys, but the sky itself is generated, not measured.
What does the seed do?
It picks every dial at once. Moving a dial changes just that one, and Shuffle picks a new seed and starts again. The page’s address keeps it all, so you can share it.
Will it run on a phone?
Yes. It draws below the screen’s resolution, and lower still if the phone can’t keep up. It pauses when it’s off screen, and holds one frame if you’ve asked for less motion.