I've been building a browser space flight where everything sits at its real distance. You leave Earth, pass the planets at their actual positions for today, fly between nearby stars, and end up outside the Milky Way and at Andromeda.

https://howsmallarewe.com/en/?utm_source=devto

Saturn with its wide rings tilted toward the viewer against a black starfield, with a small Saturn label on the planet

I started it because textbook diagrams put the planets right next to each other, and I never had a sense of how big the gaps are.

It's three.js r170 with Vite and no other rendering library. Three parts took most of the work.

One scene from a metre to 2.5 million light-years

The renderer uses logarithmicDepthBuffer. True positions live on the CPU in km as JS doubles. Every frame I subtract the camera position from everything, so the camera always sits at the origin (floating origin) and the GPU only sees camera-relative coordinates.

That wasn't enough on its own. Polygons more than about 1e15 km from the camera still broke up from float precision. So anything farther than 2e10 km, which is outside Neptune's orbit, gets pulled in to that distance along the same direction and scaled down by the same factor. It keeps the same angular size on screen:

const PROXY_KM = 2e10; // beyond Neptune's orbit (4.5e9 km) for (const n of nodes.values()) { const p = n.root.position.subVectors(n.truePos, camPos); const d = p.length(); const f = d > PROXY_KM ? PROXY_KM / d : 1; p.multiplyScalar(f); n.root.scale.setScalar(f); }

Stars that depend on where you are

About 110k stars from the HYG catalogue are packed into a binary file at 20 bytes per star (xyz in parsecs, absolute magnitude, RGB). The vertex shader works out the apparent magnitude from the real camera distance every frame and turns it into point size and alpha. From Earth you get the normal night sky. Fly to Sirius and the sky is drawn as it would look from there.

An ultraviolet sky

Press V to swap the whole sky for the new full-sky UV map by Brice Ménard (released with Anthropic, made with Claude Science). A Python script converts the Mollweide image to equirectangular, and the sky sphere samples it by direction through a J2000 galactic rotation. About a third of the map, mostly the galactic plane, is predicted from other wavelengths, per the map's author.

Two crops of the same view from 3,494 km above Saturn's cloud tops: on the left a black sky with white stars, on the right the same sky replaced by the blue and violet ultraviolet map

Flight speed is 0.9 times the distance to the nearest surface per second, so the same keys move you kilometres near a planet and light-years between stars. Planet positions come from Astronomy Engine. The Milky Way you see from outside is a model, not a photo.

Feedback I'd like

  1. Right in front of a UV landmark the additive blending blows out to white and you lose the shape. I haven't found a good fix yet.
  2. Frame rate on your GPU, especially laptops and phones (phones get 4K textures instead of 8K).
  3. Anything that looks wrong at the scale transitions, like stars popping or depth fighting.

Credits: UV map by Ménard (CC BY 4.0), planet textures from Solar System Scope (CC BY 4.0), HYG Database v3.5.1 (CC BY-SA 2.5), positions from Astronomy Engine (MIT).