Hice un vuelo espacial a escala real con three.js, de la Tierra a Andrómeda

kmkjsky — Wed, 11 Nov 2026 08:13:11 +0000

Estoy haciendo yo solo un simulador de vuelo espacial que corre en el navegador, con todo a su distancia real. Sales de la Tierra, pasas por los planetas en la posición que tienen hoy, vuelas entre estrellas cercanas y terminas fuera de la Vía Láctea y en Andrómeda. Es gratis y no pide registro.

https://howsmallarewe.com/es/?utm_source=devto_es

Está hecho con three.js 0.170 y Vite. En la misma escena tiene que verse Saturno desde 3.494 km de altura y Andrómeda a unos 2,5 millones de años luz, y eso rompió varias cosas.

Origen flotante y scaled space

En los shaders se trabaja con float32, así que las posiciones reales viven en la CPU como números de JavaScript (double), en kilómetros. En cada fotograma le resto la posición de la cámara a todo, la cámara queda siempre en el origen y a la GPU solo le llegan coordenadas relativas.

Aun así, los polígonos a más de unos 1e15 km se dibujaban mal. Todo lo que está más lejos de 2e10 km (más allá de la órbita de Neptuno) lo acerco a esa distancia sobre la misma dirección y lo escalo por el mismo factor. Ocupa el mismo ángulo en pantalla y la GPU trabaja con números manejables.

Planetas que desaparecían enteros

Uso logarithmicDepthBuffer: true. Con esta relación near/far, en la proyección estándar el z de clip queda casi igual a w, y en GPUs reales, por redondeo, z a veces superaba a w por muy poco. El vértice quedaba "más allá del plano lejano" y el planeta entero se recortaba.

Con el depth buffer logarítmico, three.js escribe la profundidad aparte en el fragment shader (gl_FragDepth), así que el z de clip ya no hace falta para la profundidad. Lo dejo siempre en 0 parcheando el chunk en un módulo que importo en la primera línea del archivo principal:

const CHUNK = THREE.ShaderChunk.logdepthbuf_vertex;
if (!CHUNK.includes('gl_Position.z = 0.0')) {
  THREE.ShaderChunk.logdepthbuf_vertex = `${CHUNK}
#ifdef USE_LOGDEPTHBUF
  gl_Position.z = 0.0;
#endif`;
}

Los vértices detrás de la cámara (w < 0) se siguen recortando por la comprobación de rango de x, y, z. Si tienen ShaderMaterial propios, hay que meter los #include de logdepthbuf en el vertex y en el fragment. En mi caso eran las ~110.000 estrellas del catálogo HYG, que son un THREE.Points con shader propio y calculan su brillo según la distancia real a la cámara.

Cielo en ultravioleta

Con la tecla V todo el cielo cambia al nuevo mapa ultravioleta de todo el cielo de Brice Ménard (presentado con Anthropic, hecho con Claude Science). Según su autor, cerca de un tercio del mapa, sobre todo el plano galáctico, es predicción a partir de otras longitudes de onda. La Vía Láctea vista desde fuera es un modelo, no una foto.

Lo que me gustaría saber

Parchear THREE.ShaderChunk de forma global funciona, pero temo que se rompa con alguna actualización de three.js. ¿Alguien resolvió escalas así de otra manera, por ejemplo con reversed-Z o dividiendo la escena en varias pasadas por distancia?
Cómo va la tasa de fotogramas en su equipo, sobre todo en portátiles y teléfonos (los teléfonos cargan texturas 4K en lugar de 8K).
Cualquier cosa que se vea mal en los cambios de escala, como estrellas que aparecen de golpe o parpadeo de profundidad.

El código no está publicado, pero si a alguien le sirve puedo pegar más fragmentos en los comentarios.

Créditos: mapa UV de Ménard (CC BY 4.0), texturas de planetas de Solar System Scope (CC BY 4.0), HYG Database v3.5.1 (CC BY-SA 2.5), posiciones de Astronomy Engine (MIT).

I built a true-scale space flight in three.js, from Earth to Andromeda

kmkjsky — Wed, 11 Nov 2026 08:11:24 +0000

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

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.

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

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.
Frame rate on your GPU, especially laptops and phones (phones get 4K textures instead of 8K).
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).

DEV Community: kmkjsky