Skip to content

Pillars of Creation

Arrow Left

I saw something like this somewhere and wanted to build my own. My first attempt was one fragment shader with five layers, and it looked like a filter on a photograph, so I threw it away and started from a different question: what would each of these objects do if you could touch it?

Now the light is your hand and the stars are separate objects. Each of the three photographs below answers differently, because a column of dust and a pulsar have nothing in common.

The Pillars of Creation, Hubble, 2014.1 Your hand is the sun: it rakes across the columns and moves their shadows. Hold to charge the light, let go to flash it.

Taking the Photograph Apart

A shader can't move a star that is baked into the same pixels as the gas behind it, so each image gets split once, offline, into three files.

The gas. Each one starts from the full-resolution original, up to 14,575 pixels wide, because the first versions used web copies and went soft on a sharp screen. Stars come out with a white top-hat filter, and small holes get filled by inpainting. The large flares I picked by hand, because automatic detection kept taking the bright edges of the dust with them. Their holes get smooth colour from an image pyramid and grain from a clean patch beside them, since inpainting that wide leaves radial streaks.

The relief. My first depth maps were inverted luminance, blurred, and they were wrong in a way you could feel. Depth Anything v2 reads the Pillars as columns standing in front of a wall. One channel keeps its fine surface for lighting, another keeps only the big forms for parallax and shadows.

The stars. A table with position, size and colour, drawn as instanced quads in linear light.

Light From the Hand

The relief gives every pixel a surface normal, so the pointer is a real light with falloff and a shadow marched over the big forms. Parallax is occlusion mapping rather than a sample shift, which means near forms pass in front of far ones instead of sliding like a sticker.

All of it happens in linear HDR. Bloom and light shafts work on real brightness, then the frame goes through a filmic curve and picks up grain that re-rolls 24 times a second.

Drawing a Star

Nearly every star in these photographs clips at pure white, so the recorded peak says nothing about how bright it was. I rank them by how far the flare spread and put that rank on a steep curve, which leaves a few stars carrying the frame and hundreds of faint ones behind them.

Each star has a small hot centre and long, soft wings in its own colour, the shape a telescope actually gives a point of light. The spikes taper and cool from white into that colour, and dust dims whatever sits behind it, so only the brightest stars punch through a pillar. The open sky also gets a scatter of faint field stars at the far end of the parallax.

Three Skies

The Cosmic Cliffs are a breaking wave under a crowded sky. The spikes have six arms because Webb's mirror makes six.

Cosmic Cliffs, Carina Nebula, Webb, 2022.2 A click lights a new star where you pressed, and it burns for about twenty seconds.

The Crab has a neutron star in the middle spinning thirty times a second. A beam sweeps through the filaments, and parallax is almost off, because a sphere of filaments has no front.

Crab Nebula, Hubble, 2005.3 The beam sweeps on its own. Press near the centre to spin it up; a click anywhere makes the pulsar kick.

Where It Went Wrong

The first frame was white. Every star read as full brightness, so four hundred diffraction crosses covered the whole image.

Then a fine diagonal hatch appeared over everything. I blamed the relief for a while, but it was the light shafts: ordered noise on the ray start, which printed its own pattern. Random noise and a small blur took it out.

For a while the gas also ran on a fluid solver, with a shockwave on every click. Both worked, and both pulled attention away from the photograph, so I took them out.

What Stays

The part that made the difference was the photograph, not the shader. Once the gas, the relief and the stars were separate, every effect had something real to work on, and tuning became a question of what the object in the picture would do.

If frames start running late, the engine drops to fewer steps and a smaller canvas. Only the frame on screen runs at all, and under prefers-reduced-motion each one renders once and stops. Without WebGL2 you get the photograph.


  1. NASA, ESA/Hubble and the Hubble Heritage Team, The Pillars of Creation, 2014. CC BY 4.0. ↩

  2. NASA, ESA, CSA, and STScI, Cosmic Cliffs in the Carina Nebula, 2022. CC BY 4.0. ↩

  3. NASA, ESA and Allison Loll/Jeff Hester (Arizona State University), acknowledgement Davide De Martin (ESA/Hubble), The Crab Nebula, 2005. CC BY 4.0. ↩