Diseño de producto · 3D · Full-stack · 2026
Elbe LiveEl puerto de Hamburgo, en vivo.
Una vista en vivo de uno de los mayores puertos de Europa — Hamburgo dibujada desde su modelo 3D oficial, con cada barco comercial del Elba moviéndose en tiempo real.
Diseñé y desarrollé el producto completo — el lenguaje visual, la escena 3D, una torre de control en mi propio servidor que escucha a los barcos y la interfaz que va encima.
Hamburgo trazada arista a arista desde el propio modelo 3D de la ciudad. Los cascos de color son barcos reales, ahora mismo.
Por qué un puerto
Hamburgo vive de su puerto, pero casi todo el mundo lo ve solo desde la orilla. Cada barco grande emite por radio su posición, su velocidad y su destino, y la ciudad publica un modelo 3D detallado de cada edificio. Los datos son abiertos. Faltaba una vista que los hiciera legibles de un vistazo — más cerca de un dibujo de arquitecto que de un mapa.
Qué muestra
| Capa | Qué se ve |
|---|---|
| La ciudad | Cada edificio dibujado solo con sus aristas. Cerca de la cámara, con todo detalle — tejados, torres, buhardillas; más lejos, un modelo más ligero. |
| 13 edificios emblemáticos | Elbphilharmonie, Millerntor, Volksparkstadion, Rathaus, Michel, Chilehaus y más. Se iluminan al pasar el ratón y cada uno tiene su botón. |
| Barcos | Cascos 3D a escala real según su tipo, una estela de diez minutos, nombres y una ficha con velocidad, rumbo, medidas y destino. |
| El puerto de un vistazo | Barcos navegando por tipo, el que está entrando ahora con su tiempo hasta la ciudad, el más grande y el más rápido del puerto. |
| El río | Nivel del agua en St. Pauli en las últimas doce horas; viento, rachas y visibilidad. Agua, muelles, puentes, parques y bordes de calles completan el plano. |
Toca un barco y su ficha aparece a su lado — translúcida, para que el mapa siga a la vista.
Cada edificio emblemático se carga en el modelo más detallado de la ciudad. La Elbphilharmonie conserva su tejado de olas, línea a línea.
Decisiones de diseño
Contornos, no fotografías. Primero construí una versión fotográfica con la malla aérea de la ciudad. De cerca se veía pixelada, así que dibujé la ciudad con líneas: nítida a cualquier distancia y mucho más ligera de cargar.
Escala real, color por tipo. Un portacontenedores de 400 metros se ve de 400 metros. El color tiene un solo significado — carga, cisterna, pasaje, servicio — y la leyenda del panel los cuenta en vivo.
El panel responde a las preguntas de un puerto. No enumera fuentes de datos: muestra qué se mueve, qué está llegando y qué tan alta está el agua.
Tranquilo por defecto. Los nombres de los barcos aparecen solo al acercarte y se esconden si un edificio está delante. Sin saltos de zoom al tocar un botón: la cámara se desliza y conserva tu ángulo.
Ingeniería: lo difícil
| Problema | Cómo lo resolví |
|---|---|
| Los barcos no se pueden leer desde el navegador | Una pequeña torre de control en mi servidor mantiene la única conexión con la señal AIS, recuerda cada barco (lo guarda cada minuto) y entrega un JSON ligero cada pocos segundos. |
| Una ciudad entera en el navegador | Hamburgo se carga por piezas: con detalle cerca, sencilla lejos y nada más allá de la niebla. Mi servidor comprime las piezas por el camino — de 160 a 48 MB. |
| Fluido mientras carga | El trabajo pesado de cada pieza nueva va en ayudantes en segundo plano. La escena dibuja solo cuando hace falta y baja un poco la resolución mientras la cámara se mueve. |
| Barcos entre dos señales | Cada barco avanza según su rumbo y su velocidad hasta la siguiente señal, así nada salta. |
| El suelo no es plano | Calles, parques y muelles quedan a la altura de las bases de los edificios cercanos, medida en el propio modelo. |
De cerca: los pontones de los Landungsbrücken, los bordes de las calles y los ferris atracando.
Datos abiertos, usados con responsabilidad
| Datos | Fuente |
|---|---|
| Edificios 3D y puentes | Freie und Hansestadt Hamburg, LGV (dl-de/by-2-0) |
| Barcos (AIS) | aisstream.io |
| Agua, muelles, calles, parques | Colaboradores de OpenStreetMap (ODbL) |
| Nivel del agua · Tiempo | PEGELONLINE (WSV) · Deutscher Wetterdienst |
Solo se muestran barcos comerciales; los veleros y las embarcaciones de recreo privadas se filtran en el servidor. La clave de acceso nunca llega al navegador y no se guarda nada sobre los visitantes.
En el móvil, el panel baja y la ciudad conserva la pantalla.