Note 05 · Cosmos

Cosmos

Fly from a single planet out to a whole galaxy with one hand, tilt and pan with the other.

The stack

three.js, with the star field as a single Points buffer, selective bloom through an EffectComposer, and a handful of real meshes for the foreground bodies.

How it works

The zoom is the journey. Opening your right hand pulls the camera back from the solar system until the spiral galaxy fills the frame, and closing it dives back in; the same hand sliding sideways orbits the view. Your left hand handles the rest, tilting the disk from top-down to edge-on as it moves up and down, and panning across it left and right.

Roughly sixteen thousand stars sit in one points buffer driven by a small shader that sizes each star by distance and tints it by theme. Drawing them as one buffer rather than sixteen thousand objects is the whole reason the galaxy is affordable. Real geometry fills the near field: a lit sun, a few orbiting planets, Earth wrapped in an atmosphere shell with a moon beside it, an Oort cloud built as a thin shell of points, and a couple of meteors drawn as stretched bright streaks.

The look

A dim, desaturated, mirrored webcam image hangs far behind everything as a billboard that turns to face the camera, so you stay present in the background the way the garden keeps you in frame. Selective bloom lights the sun and the brightest stars and leaves the rest of the picture alone.

Making it fast

Points instead of meshes for the galaxy is the big saving. Bloom runs through a composer with a dedicated output pass, and the backdrop draws first with depth testing switched off, so it never argues with the 3D content in front of it.

Next: Bubble Machine →