Cube.World

Overview

Qué es y qué hice

CubeWorld es un prototipo de mundo virtual colaborativo que transforma la Tierra en un entorno tridimensional basado en voxeles. Se explora el planeta desde el espacio, se busca una ciudad o se navega libremente y se baja hasta que el terreno —generado a partir de datos reales de elevación y color— se convierte en una cuadrícula editable donde se colocan, quitan y colorean bloques. Las construcciones se guardan y otras personas las ven casi al instante.

El mundo está vivo: el día y la noche siguen la hora y el lugar reales, con sol, Luna con fases, estrellas, cometas, nubes, aves, auroras cerca de los polos, olas y hierba que se mece con el viento.

Mi papel

Diseñé y desarrollé el prototipo completo: la experiencia 3D del cliente (mapa, terreno, cielo y construcción), la interfaz y los controles para computadora y pantallas táctiles, la guía interactiva para aprender a jugar, y la API con cuentas, persistencia y sincronización en tiempo real.

• Globo navegable con atmósfera, Luna, estrellas, satélites y luces nocturnas reales; gira despacio cuando nadie lo toca.
• Terreno voxelizado organizado en anillos con niveles de detalle 1, 4 y 16, regiones de malla fusionadas y niebla.
• Construcción: colocar, quitar y colorear bloques con 12 colores o uno propio (selector en abanico), con gotero para copiar el color de un bloque, partículas y sonidos.
• Cubos luminosos que iluminan el terreno y los cubos cercanos, hasta 48 por zona.
• Un mundo vivo: día y noche reales, sol cuadrado, Luna con fases, cometas, nubes de cajas, aves, auroras, olas y hierba animada.
• Cuentas y persistencia: registro con correo (con verificación anti-bots) o con proveedores sociales, foto de perfil y construcciones asociadas a cada usuario.
• Tiempo real: los cambios se distribuyen a los demás clientes, y unos indicadores de actividad muestran desde el espacio dónde se está construyendo.
• Guía «¿Cómo jugar?» de 7 pasos con ilustraciones isométricas animadas, y controles para mouse y teclado o joysticks táctiles en celular y tablet.

The Challenge

Problema

La pregunta

CubeWorld parte de una idea: ¿qué pasaría si el planeta completo pudiera convertirse en un lienzo tridimensional compartido?

Los retos

• Escala. La Tierra es enorme: no se puede generar ni dibujar completa a la vez. Solo debe existir con detalle lo que está cerca de quien mira.
• Fluidez. Generar y dibujar terreno 3D es costoso y no debe congelar la interfaz, ni en una laptop ni en un celular.
• Un mundo que se sienta vivo sin salirse del presupuesto. Cielo, agua, hierba y partículas no deben costar cuadros ni batería.
• Colaboración. Lo que construye una persona tiene que guardarse, validarse en el servidor y aparecer en las pantallas de otras sin recargar.
• Una sola experiencia en cualquier dispositivo, con controles consistentes entre computadora y pantallas táctiles.
• Creatividad sin ventajas de pago: la experiencia debe ser justa para todas las personas.

Approach

Cómo lo abordé

Resolví el problema con siete decisiones de partida:

• De lo global a lo local. Un mapa geográfico (MapLibre GL) como base y, encima, una capa 3D propia (Three.js) que se activa al acercarse, para que siempre sepas dónde estás.
• Detalle solo donde importa. El área cercana usa mayor precisión y las zonas lejanas una versión simplificada; no se genera el planeta completo.
• Persistir solo lo que construyen las personas. El terreno se genera en el cliente a partir de fuentes cartográficas; lo que se guarda son los bloques.
• El trabajo pesado, fuera del hilo principal, con Web Workers, para que la interacción nunca se bloquee.
• El cliente responde al instante, el servidor decide. Colocar o quitar un bloque se muestra de inmediato, pero el servidor valida y es la fuente de verdad.
• Efectos baratos y cuantizados. El ambiente (cielo, sol, nubes, agua, partículas) se anima a pocos cuadros por segundo, en pasos de 3 px y solo cuando se ve; la luz de los cubos luminosos se calcula en el shader en lugar de usar luces reales.
• Táctil como requisito, con una experiencia consistente en computadora, celular y tablet.

UX / Architecture

Flujos + estructura

Flujo principal

1. Cargar el planeta: una pantalla de carga se mantiene hasta que el globo termina de dibujarse.
2. Explorar el globo y seleccionar una región; también se puede buscar un lugar o unas coordenadas.
3. Acercarse por capas progresivas de detalle hasta ver el terreno en 3D. La paleta de bloques aparece cuando se está lo bastante cerca.
4. Entrar al área editable: a partir de cierto zoom y con la sesión iniciada se puede construir.
5. Construir: colocar, quitar o colorear bloques, o copiar el color de uno existente; el cambio se guarda y se comparte.
6. Volver al espacio y ver en qué zonas hay más actividad.

La guía ¿Cómo jugar? está siempre a un clic y recorre las acciones en siete pasos.

Arquitectura a alto nivel

• Interfaz web: navegación geográfica con MapLibre y, encima, una capa 3D propia para el terreno, los cubos y los efectos, más capas de shader a pantalla completa para el cielo, el planeta y las auroras.
• API de aplicación: usuarios y perfiles, mundos y bloques persistentes, y consulta de actividad agregada.
• Persistencia y tiempo real: una base de datos relacional y un canal de eventos por WebSocket.

Design

UI + sistema visual

Una interfaz que casi no estorba

El mapa y el terreno son los protagonistas. Sobre ellos flotan solo lo necesario: una barra de controles a la izquierda (buscar, acercar, alejar e información), la paleta de colores al construir, las coordenadas y la celda señalada. La interfaz usa un tema claro color hueso, iconos de Lucide y animaciones discretas que respetan prefers-reduced-motion.

Un mundo cúbico y vivo

Todo el ambiente comparte un lenguaje cúbico, cercano al pixel art, con pasos de animación cortos cuantizados en bloques de 3 px: un sol cuadrado cuyo halo se calienta al atardecer, una Luna con fases, estrellas, cometas, nubes en forma de cajas, aves, auroras cerca de los polos, olas en el agua y matas de hierba que se mecen con el viento. El día y la noche siguen la hora y el lugar reales; en la vista del planeta aparecen la atmósfera, los satélites y las luces nocturnas del mapa Black Marble de la NASA.

Construir con buenas sensaciones

Los bloques se colocan y se quitan con respuesta inmediata, un sonido corto (precargado para que no haya retraso) y partículas: polvo al colocar, fragmentos del color del bloque al quitar y chispas cálidas con los cubos luminosos. La paleta ofrece 12 colores, un selector en abanico para crear uno propio, un gotero para copiar el color de un bloque y un botón de cubo luminoso. Bajo el cursor se dibuja un contorno discontinuo —blanco de noche y negro de día— que marca el cubo señalado.

Aprender jugando

Una guía de siete pasos con ilustraciones isométricas animadas explica cómo explorar, acercarse, elegir un color, colocar, quitar, copiar un color y usar el cubo luminoso, con los gestos de computadora y de celular lado a lado.

Consistencia entre dispositivos

En computadora se usa mouse y teclado; en celular y tablet aparecen joysticks táctiles con la misma lógica de movimiento y construcción.

Development

Stack + arquitectura técnica

Cliente

Vue 3 y TypeScript con Vite. El mapa usa MapLibre GL y, sobre él, una capa 3D propia con Three.js para el terreno, los cubos, la hierba, el contorno y las partículas, además de capas de shader a pantalla completa para el cielo, el planeta y las auroras. La elevación, el mallado y el color del terreno se reparten en Web Workers, con una cola priorizada y límites de trabajo por cuadro. Son unas 23 800 líneas de TypeScript y Vue repartidas en 72 archivos (más unas 2 400 de CSS), con comprobación de tipos mediante vue-tsc.

Rendimiento

Una sola geometría fusionada por región de terreno, cubos del usuario con instancias, hover por cuadrícula sin raycast contra mallas y efectos animados a pocos cuadros por segundo y solo cuando se ven. La luz de los cubos luminosos se calcula en el shader, con un tope de 48 fuentes por zona.

Servidor

Una API en Laravel con PostgreSQL: usuarios y perfiles, inicio de sesión con correo y con proveedores sociales, mundos y bloques persistentes. El servidor valida cada operación antes de guardarla, y los cambios aceptados se distribuyen a los demás clientes por WebSockets con Laravel Reverb. La API cuenta con pruebas automatizadas de autenticación, bloques y coordenadas.

Sobre el código

Por decisión propia, el código del proyecto es privado: el repositorio de GitHub funciona como evidencia pública, con documentación, capturas y una descripción de la arquitectura, y declara de forma explícita qué áreas se reservan (algoritmos de terreno, esquema de datos, autenticación y configuración de tiempo real, entre otras).

• TypeScript
• Vue.js
• MapLibre GL
• Three.js
• Laravel
• PostgreSQL
• PHP

Challenges

Problemas → soluciones

Estos son los retos principales, descritos a propósito a alto nivel: los detalles de implementación forman parte de las áreas reservadas del proyecto.

Results

Resultado técnico / métricas

Cube.World es hoy un prototipo funcional y cada vez más vivo: se puede navegar el globo, entrar al terreno, construir con cuenta de usuario, ver los cambios de otras personas en tiempo real y aprender a jugar con una guía integrada.

• 3niveles de detalle del terreno (1, 4 y 16)
• 12 + 1colores de bloque y uno personalizado
• 48cubos luminosos por zona
• 7pasos en la guía «¿Cómo jugar?»
• +23 000líneas de TypeScript y Vue
• 14pruebas automatizadas de la API

Lo que falta para una beta pública controlada

• Pruebas de carga con muchos usuarios simultáneos, para medir la capacidad real.
• Pruebas automatizadas del cliente (hoy solo la API las tiene).
• Herramientas de moderación y recuperación de construcciones.
• Respaldo automatizado, observabilidad y métricas del servidor.
• Optimizar el tamaño del paquete web.

El prototipo necesita infraestructura de servidor para funcionar, así que todavía no tiene un enlace público.

Reflection

Qué aprendí

Lo que me llevo

• Pensar en un planeta obliga a decidir qué NO hacer: no generar todo, no guardar todo, no enviar todo a todos. Cada «no» fue una ganancia de rendimiento.
• El rendimiento es parte de la experiencia, no un ajuste final: los Web Workers, los niveles de detalle y la respuesta optimista definen cómo se siente construir.
• Un mundo vivo se hace con decisiones baratas: cuantizar la animación, calcular la luz en el shader y animar solo lo que se ve permiten un cielo, un agua y una hierba que se mueven sin romper el presupuesto de cuadros.
• Enseñar a jugar es parte del producto: una guía corta, con ilustraciones y los gestos de cada dispositivo, permite no llenar la interfaz de instrucciones.
• Un prototipo también necesita límites claros: documenté lo que está implementado, lo que está en desarrollo y las limitaciones conocidas, en vez de prometer disponibilidad pública.
• Proteger lo que se construye (código, credenciales, datos) es parte del diseño, no un trámite posterior.

Lo que sigue

Preparar una beta pública controlada: pruebas de carga, moderación y recuperación, respaldo automatizado y observabilidad.

Live Project

Ver proyecto