Probé a crear la mañana, la tarde y la noche de Zagreb con Codex 🌅🚋🌙 De una ciudad en Blender a un paseo nocturno en Three.js
Esta vez creé en Blender la plaza Ban Jelačić de Zagreb y capturé sus tres caras: mañana, tarde y noche 🌅🚋🌙
¡Primero, algo importante! Lo que muestro aquí no son fotografías reales, sino renders de una escena 3D creada por mí. Tampoco es una copia digital exacta del lugar. Es una ciudad todavía en proceso, hecha tomando como referencia fotos de 360 grados y mapas.
Pero es muy divertido ver cómo cambia tanto la atmósfera de una misma ciudad simplemente al modificar la luz… ¡✨
Mañana: ese momento algo tranquilo antes de que la ciudad despierte 🌅
Para la mañana añadí una luz cálida y baja, para que los edificios proyectaran sombras largas. El caballo de bronce y las mesas de cafetería que aún parecen medio dormidas. Hay algo en una plaza vacía que invita a pasear, ¿verdad? ☕
No se trata de una recreación rigurosa de «Zagreb a las 6:45 de esta mañana», sino de una toma cuya iluminación ajusté para transmitir una sensación matinal. El cielo ligeramente nublado también utiliza un fondo creado previamente con la función de generación de imágenes.
Tarde: el tranvía azul se convierte en el color de la ciudad 🚋💙
¡El protagonista de la tarde es el característico tranvía azul de Zagreb! Coloqué un modelo aproximado basado en el TMK 2200 también sobre la otra vía, con una composición en la que los dos vehículos quedan enfrentados en sentidos opuestos.
No solo la carrocería: también creé como formas independientes las secciones articuladas, ventanas, puertas, ruedas, equipos del techo y pantógrafos. Aun así, no es una maqueta de precisión hecha según los planos del vehículo real, así que ahí queda margen para seguir mejorando 🔧
Para el día utilicé una luz suave de cielo cubierto, para que se apreciaran con naturalidad los vehículos azules y la arquitectura de piedra. En vez de hacer flotar el tranvía en un lugar «que pareciera adecuado», lo coloqué alineado con las líneas centrales de las vías extraídas del mapa.
Noche: lo que más me gusta son las farolas, el cielo estrellado y los reflejos sobre el adoquinado 🌙✨
¡Personalmente, esta noche es mi favorita! Combiné farolas cálidas con luz de luna azulada y di al adoquinado reflejos como si estuviera ligeramente húmedo. Es una decisión para crear ambiente, no una recreación del tiempo que hacía el día de las fotos.
Las farolas no son solo imágenes luminosas pegadas: definí por separado los modelos 3D de las luminarias y las fuentes de luz que iluminan el entorno. Identifiqué en el mapa 39 farolas. A las 14 registradas como modelos de cuatro luces les añadí decoraciones en espiral y globos colgantes basados en fotografías.
Las estrellas también forman parte de un cielo creado para la escena; no corresponden a la disposición real de las constelaciones. Pero ayudan muchísimo a sentir que paseas por la ciudad de noche… ¡🌌
El trabajo real fue más o menos así 🛠️
Realicé todas las operaciones de producción desde Codex. Controlé Blender con Python a través de MCP, comprobé el resultado mediante renders y capturas de pantalla, y publiqué el artículo y las imágenes con la API de yasue.org.
- La base de la ciudad: tomé como referencia fotos de 360 grados, importé los contornos de edificios y las vías de OpenStreetMap, y levanté los edificios del entorno en 3D.
- Ajustes de detalle: rehice el cuello, la cara y las patas del caballo de la estatua ecuestre, además de los brazos de la figura humana, el uniforme militar y la placa del pedestal. En algún momento interpreté mal la orientación de las patas usando solo fotos de cerca y lo corregí al consultar una fotografía de cuerpo entero.
- Ajuste de las mesas de cafetería: al pedir «¡multiplica por diez las mesas y las sillas!», acabé con 200 mesas y 400 sillas, claramente demasiadas 😂 Al final las reduje a 60 mesas y 120 sillas, agrupadas en cuatro zonas frente a los locales.
- Escaleras y farolas: añadí escaleras que aparecían en el mapa pero se habían quedado fuera del modelado. También recolqué las farolas desde una distribución arbitraria y equidistante hasta sus posiciones en el mapa.
- Capturas de mañana, tarde y noche: cambié la posición de la cámara, el color y la intensidad de la luz, y los reflejos, para renderizar realmente la misma escena 3D. No son imágenes en las que una IA haya repintado la ciudad sobre un render CG.
Una de las conclusiones de este proyecto es que «aumentar la cantidad» y «hacerlo parecerse al lugar real» son cosas distintas. En vez de dispersar montones de mesas, agruparlas cerca de los establecimientos hace que la ciudad se sienta más real ☕✨
Lo próximo: pasear por la ciudad nocturna en Three.js 🎮
También estoy implementando un visor de Three.js con esta escena de Blender, fijado en la versión nocturna. Convertí el modelo a formato GLB y comprimí los datos para el navegador. Incluye los edificios, el mobiliario de cafetería, la estatua y los dos tranvías.
Los controles son WASD para moverse, el ratón para mirar alrededor y Shift para caminar más rápido. También preparé colisiones sencillas con edificios y mobiliario. Como calcular todas las luces a la vez sería pesado, la configuración da prioridad a las farolas cercanas.
La versión web se está preparando actualmente como una vista previa privada para mí. Las imágenes de este artículo corresponden a la versión de Blender, y la calidad visual y los reflejos de la versión de Three.js no serán exactamente idénticos.
O abre este enlace:
https://ja.yasue.org/embed/2026-09-06/2956db8fb61c85ad/index.html
También dejo claro lo que todavía no está terminado 📝
La estatua ecuestre aún no alcanza un realismo indistinguible de la original, y en los adornos de los edificios quedan repeticiones y estimaciones. La cantidad y disposición de las mesas de cafetería, la altura de los desniveles y algunas formas de las farolas también son aproximadas. Los datos del mapa son de 2026, mientras que las fotos de referencia son de 2016, así que existe también esa diferencia temporal.
Más que un «artículo para presumir de una ciudad terminada», esto es un registro de producción en el que la hice con Codex, la comparé, la corregí y cambié su iluminación. Creo que lo más interesante es ver cómo la ciudad va revelando poco a poco sus distintas expresiones 🌃
Referencias 🔗
- 360Cities: foto de 360 grados de la plaza Ban Jelačić en 2016
- Equestrian Statues: fotografías completas y de detalle de la estatua ecuestre de Jelačić
- Good Free Photos: referencia del lado este de la plaza, las farolas y los letreros de las azoteas
- OpenStreetMap: derechos de autor y licencia de los datos cartográficos
- Documentación oficial de Three.js
Datos cartográficos: © colaboradores de OpenStreetMap, ODbL. No he reproducido las fotos de referencia. Las tres imágenes publicadas se generaron a partir de la escena de Blender creada para este proyecto.