Wave Function Collapse: mapas hex 3D con WebGPU

Qué es Wave Function Collapse y por qué importa en la generación procedural

La generación procedural de contenido (PCG) lleva décadas siendo el motor invisible detrás de mundos infinitos en videojuegos, herramientas de simulación y entornos interactivos. Pero no todos los algoritmos son iguales. Wave Function Collapse (WFC), desarrollado originalmente por Maxim Gumin y publicado en su repositorio de GitHub, es hoy uno de los enfoques más elegantes y potentes para generar mapas de tiles con coherencia visual y reglas de adyacencia estrictas.

El nombre es una metáfora tomada de la física cuántica: cada celda del mapa existe en una superposición de estados posibles (tipos de baldosa) hasta que el algoritmo la «colapsa» a un valor concreto. El proceso se repite iterativamente hasta completar el mapa completo, garantizando que ningún tile contradiga a su vecino.

El desarrollador Felix Turner llevó este concepto al siguiente nivel construyendo un generador de mapas medievales hexagonales completamente procedural, combinando WFC con Three.js, WebGPU y TSL shaders. El resultado es técnicamente impresionante y ofrece lecciones directamente aplicables para cualquier equipo de desarrollo que trabaje con simulaciones, videojuegos o visualizaciones interactivas.

Cómo funciona WFC: el ciclo observación-propagación

El algoritmo WFC opera en tres pasos que se repiten en bucle:

1. Inicialización

Cada celda del grid se inicializa con el conjunto completo de tiles posibles, ponderados por la frecuencia con que aparecen en el mapa de muestra. En el proyecto de Turner, esto implica gestionar 30 tipos de baldosas hexagonales, cada una con 6 bordes distintos que deben coincidir con sus vecinas.

2. Observación (colapso)

El algoritmo selecciona la celda con menor entropía, es decir, aquella con menos opciones viables, y la colapsa a un tile concreto de forma probabilística. Este criterio de mínima entropía es clave: reduce el riesgo de generar contradicciones irresolubles en pasos posteriores.

3. Propagación

Tras colapsar una celda, el algoritmo recorre el grid eliminando de las celdas vecinas todos los tiles incompatibles con la elección recién realizada. Este paso de propagación puede cascadear por todo el mapa si las restricciones son muy estrictas, lo que hace la escalabilidad uno de los retos centrales del enfoque.

El reto hexagonal: seis direcciones, treinta tiles, millones de combinaciones

Mientras que en grids cuadrados cada celda tiene 4 vecinos, en grids hexagonales la cifra sube a 6 vecinos por celda. Esto multiplica exponencialmente el espacio de estados y la complejidad del sistema de reglas. Turner construyó reglas de adyacencia para elementos tan variados como ríos, caminos, acantilados, planicies y aldeas medievales.

El problema no es solo técnico: diseñar reglas que sean lo suficientemente estrictas para generar mapas coherentes, pero lo bastante flexibles para producir variedad real, requiere un trabajo de diseño cuidadoso que combina criterio artístico con ingeniería de restricciones.

La solución adoptada fue una arquitectura modular: en lugar de gestionar todas las restricciones en una sola matriz monolítica, el sistema divide los tipos de borde en categorías reutilizables. Esto simplifica la definición de reglas y permite escalar a nuevos tipos de tile sin reescribir lógica central.

Problemas de escalabilidad y el sistema de recuperación avanzado

Uno de los puntos débiles históricos de WFC es que puede encontrar contradicciones: situaciones en que una celda no tiene ningún tile compatible con todas sus vecinas. En implementaciones simples, la única salida es reiniciar el proceso completo desde cero.

Turner implementó un sistema de backtracking avanzado que registra el historial de decisiones y permite retroceder solo hasta el punto donde se originó la contradicción, en lugar de reiniciar todo el mapa. Según datos de la implementación original de Gumin, las contradicciones ocurren en menos del 1% de las generaciones típicas, pero en grids grandes y con tiles complejos la frecuencia puede aumentar significativamente.

Las optimizaciones clave para mantener la generación dentro de rangos aceptables de tiempo incluyen:

Uso de colas de prioridad (O(log N) por actualización) para la selección de mínima entropía.
Procesamiento secuencial del grid en lugar de selección puramente aleatoria, reduciendo la varianza en la propagación.
Pesos ajustados para tiles frecuentes que evitan «callejones sin salida» de baja probabilidad.

Elevación 3D: de un grid plano a un mundo tridimensional

Una vez generado el mapa 2D de tiles, el siguiente paso es inyectarle altura. Turner integró un sistema de elevación 3D directamente vinculado a los tipos de tile: agua en cota 0, llanuras en alturas intermedias, acantilados y montañas en los valores más altos.

La coherencia es fundamental aquí: los bordes entre diferentes alturas deben respetar las reglas de adyacencia del WFC. Un acantilado no puede aparecer al lado de una llanura sin que exista una transición adecuada. Esto requiere extender el sistema de restricciones para incluir pares (tile, altura) como unidades atómicas de estado.

El resultado visual es un mundo medieval que se siente generado orgánicamente, con valles, colinas, costas y mesetas que se articulan de forma natural, sin las discontinuidades abruptas típicas de los sistemas de heightmap sin restricciones.

Árboles, edificios y Perlin noise para organicidad visual

El mapa procedural no termina en el terreno. La colocación de vegetación y estructuras construidas requiere un enfoque diferente: ruido Perlin multicapa para conseguir patrones de distribución que imiten la variabilidad natural.

El proceso funciona así: para cada celda de tile colapsada (por ejemplo, bosque o llanura), se muestrea el valor del ruido Perlin en las coordenadas hexagonales correspondientes. Si el valor supera un umbral —normalmente entre 0.1 y 0.3 dependiendo de la densidad deseada—, se instancia un árbol o edificio en esa posición, con variaciones de escala y rotación para evitar patrones repetitivos.

Las restricciones del WFC actúan como máscara: nunca aparecerán árboles sobre celdas de agua o edificios en medio de un acantilado. La combinación WFC + Perlin produce el tipo de «caos controlado» que hace que un mapa generado proceduralmente se sienta genuinamente explorado y no fabricado.

Efectos de agua y shaders avanzados en Three.js con WebGPU

Uno de los aspectos más llamativos del proyecto es el tratamiento visual del agua. Turner implementó efectos que incluyen:

Desplazamiento de vértices con ondas de Gerstner para simular movimiento realista de la superficie.
Efectos de espuma basados en profundidad y efecto Fresnel, animados mediante uniformes de tiempo.
Cálculo de normales procedurales a partir de ruido para lograr refracción y reflexión plausibles.

Todo esto corre sobre el WebGPU renderer de Three.js, que aprovecha la API WebGPU para ejecutar shaders en la GPU con un overhead notablemente menor que WebGL. El sistema de TSL (Typed Shader Language) compila a WGSL, el lenguaje nativo de WebGPU, permitiendo escribir shaders de forma expresiva en JavaScript/TypeScript y mover parte del cómputo de propagación WFC al pipeline de compute shaders.

El beneficio práctico es concreto: grids de más de 10.000 tiles hexagonales instanciados mantienen tasas de cuadros de 60fps en hardware moderno, algo difícil de lograr con el pipeline tradicional de WebGL.

Posprocesamiento y sombras dinámicas para el toque final

Un buen renderer no termina en la geometría. Turner incorporó un pipeline de posprocesamiento con:

SMAA (Subpixel Morphological Anti-Aliasing) para bordes suaves sin el coste de MSAA en hardware complejo.
Bloom selectivo en zonas de mayor elevación para reforzar la sensación de profundidad atmosférica.
Mapas de sombras en cascada sobre luz direccional, adaptados a la geometría variable de los tiles hexagonales.
Contact Hardening Shadows en espacio de pantalla para árboles y edificios, que evita las sombras duras poco realistas en objetos pequeños.

El resultado es un nivel de acabado visual cercano a motores de juego comerciales como Unity o Unreal Engine, ejecutado completamente en el navegador sin ningún plugin adicional.

Aplicaciones prácticas para founders y equipos de desarrollo

Más allá de la estética, este proyecto demuestra un stack técnico altamente relevante para startups que construyen:

Videojuegos indie o casual con mundos generados proceduralmente que reducen el coste de diseño de contenido.
Herramientas de simulación (urbanismo, logística, gestión de recursos) donde la generación de escenarios variados es crítica para testear algoritmos.
Experiencias WebXR que requieren rendimiento nativo en el navegador sin depender de instalaciones de cliente.
Visualizaciones de datos geoespaciales con representación hexagonal (como los populares grids H3 de Uber) que necesitan renderizado 3D de alto rendimiento.

El hecho de que todo corra sobre WebGPU + Three.js elimina la barrera de distribución: cualquier usuario con un navegador moderno puede acceder a la experiencia sin fricciones.

Tendencias en generación procedural para 2025 y más allá

El ecosistema de PCG está en plena ebullición. Algunas tendencias que los desarrolladores deberían seguir de cerca:

Híbridos WFC + modelos de difusión: usar Stable Diffusion u otros modelos generativos para crear los tiles de muestra que alimentan al WFC, ampliando masivamente el espacio de estilos visuales posibles.
WFC acelerado por GPU mediante WebGPU y compute shaders, que permite escalar a grids de millones de celdas en tiempo real.
PCG guiado por IA: usar LLMs o modelos de reglas para definir las restricciones de adyacencia de forma semántica («un río siempre fluye hacia alturas menores»), reduciendo el trabajo manual de diseño.
Generación procedural de megaestructuras basada en grafos para entornos 3D complejos como ciudades o mazmorras multilevel.

Conclusión

El proyecto de Felix Turner es una demostración técnica de primer nivel que conecta múltiples disciplinas: teoría de algoritmos de restricciones, diseño de grids hexagonales, shaders de GPU de última generación y principios de diseño de mundos procedurales. Para cualquier equipo de desarrollo que esté construyendo experiencias interactivas ricas en contenido, este trabajo es una referencia obligada.

Lo más valioso no es solo el resultado visual, sino la arquitectura modular y el sistema de recuperación ante contradicciones, que son los cuellos de botella reales en proyectos WFC a escala. Adoptar estos patrones puede marcar la diferencia entre un prototipo que falla en producción y un sistema robusto capaz de generar contenido de forma fiable.

Si eres founder o desarrollador técnico explorando generación procedural, gráficos 3D en el navegador u optimización de GPU con WebGPU, este es el momento de profundizar en estas tecnologías antes de que se conviertan en estándar de industria.

Descubre cómo otros founders implementan generación procedural, IA y WebGPU en sus productos. Únete gratis a la comunidad de Ecosistema Startup.

Unirme a la comunidad