Proyecto · Demo
Málaga en 3D
Málaga en 3D es una maqueta del centro histórico de la ciudad. La he hecho para ver qué se puede construir con datos abiertos: el relieve real, más de diez mil partes de edificio con su año de construcción y los monumentos modelados a mano, con una línea de tiempo que va del teatro romano a hoy y un recorrido de nueve paradas. Es una página estática en Astro y el visor 3D solo se descarga cuando se pulsa «Explorar».
Puedes recorrerla tú mismo: abrir la demo de Málaga en 3D. Se mueve con el ratón o el dedo, y tiene una línea de tiempo, un recorrido guiado y un control de la hora y el día para ver las sombras.
Qué se puede hacer
- Línea de tiempo: de 100 a. C. a hoy. Cada monumento aparece en su año y el edificado crece según el año de construcción que recoge el Catastro.
- Recorrido de nueve paradas: teatro romano, Alcazaba, Gibralfaro, Catedral, el crecimiento del edificado, la Plaza de Toros, el Muelle Uno y la playa. Cada una lleva su texto, su fecha, una nota sobre lo que está estilizado y sus fuentes.
- Sol y sombras: la posición del sol se calcula en el navegador para Málaga, con la hora y el día a elegir.
- Vista libre: se puede girar, acercar y alejar a voluntad, y en el móvil el recorrido pasa a una hoja inferior para dejar ver el mapa.
De dónde salen los datos
Quería que la maqueta fuera verificable: nada de edificios dibujados a ojo. Casi todo viene de fuentes públicas y lo que no, está dicho en la propia página.
- Relieve: el modelo digital del terreno del IGN (MDT05), descargado por WCS y reducido a un mapa de alturas de 14 KB. El mismo fichero guarda en otro canal la distancia a la orilla, que usa el shader del mar.
- Edificios: los datos INSPIRE del Catastro, de 10.576 partes de edificio, con su año de construcción y una altura estimada a partir del número de plantas (3,2 m por planta), simplificadas y empaquetadas en un binario de 244 KB.
- Contornos de los monumentos: los de OpenStreetMap, sobre los que he modelado cada uno.
El año del Catastro es el de los edificios que existen hoy, no el de los que hubo: el 97 % de las partes del recinto son de 1850 o posteriores, lo que refleja renovación y no que la ciudad naciera entonces. Por eso la línea de tiempo lo dice, y el relieve y la costa son los actuales en cualquier año.
La licencia del Catastro permite usar y difundir sus datos una vez transformados, así que la maqueta es un producto nuevo: no incluye referencias catastrales, parcelas ni direcciones, no es cartografía catastral ni tiene valor oficial, y los datos pueden estar desactualizados.
Los monumentos, a mano
La Catedral, la Alcazaba, Gibralfaro, el teatro romano, la Plaza de Toros y el Muelle Uno los he modelado en Blender en low-poly sobre su contorno real, junto a una barca de espetos con su espetero. Las alturas y los detalles son estilizados, el teatro romano está en una posición aproximada porque OpenStreetMap no trae su contorno, y de la Alcazaba solo están la muralla y las torres. Cada parada del recorrido lo avisa.
SEO y primera carga
Una maqueta 3D no tiene por qué ser una página invisible para Google ni pesada al abrirla. La página es HTML estático con todo el recorrido escrito, y el visor es opcional.
- Metadatos: título, descripción, canonical, Open Graph y Twitter Card con su imagen, y datos estructurados enlazados con el resto de la web.
- Contenido rastreable: las nueve paradas, con sus fuentes, están en el HTML, no solo dentro del visor.
- Imágenes: todas en WebP y ninguna por encima de 200 KB, con nombres descriptivos, ancho y alto, y la imagen principal con prioridad alta.
- Sin sorpresas: sin cookies, sin analítica y sin peticiones a terceros; todo se sirve desde el propio sitio.
Rendimiento
La primera carga pesa unos 51 KiB en el móvil y 140 KiB en escritorio. El visor (unos 170 KB comprimidos) y los datos (unos 330 KB entre edificios, monumentos y relieve) no se descargan hasta que se pulsa «Explorar».
Cómo está hecho
- Página: Astro genera la página estática; el visor es un módulo que se importa con
import()al pulsar el botón. - Datos: los edificios van en un binario propio ordenado por año, así que la línea de tiempo solo cambia el rango que se dibuja, sin recalcular nada.
- Monumentos: un GLB de 75 KB, exportado de Blender sin normales y con compresión meshopt.
- Mar: un shader propio que colorea el agua según la distancia a la orilla y dibuja la espuma.
- Móvil: hoja inferior para el recorrido, con la cámara más abierta y la imagen desplazada para centrar la escena en lo que queda libre.
Lo que he aprendido
Que comprobar si hay WebGL creando un contexto al cargar la página cuesta unos 400 ms de bloqueo y arruina una primera carga limpia; ahora se comprueba al pulsar el botón. Que el servicio público de OpenStreetMap se satura y que la descarga por municipio del Catastro es la vía fiable. Y que un modelo de terreno no trae profundidad marina, así que la distancia a la orilla la calculé yo y la guardé en otro canal de la misma imagen.
Herramientas e IA
El código y los modelos los he hecho con ayuda de Claude Code y Blender. Los datos son públicos; los textos y las fechas de cada parada citan sus fuentes, casi todas divulgativas, y donde discrepan lo digo.