Construir un mundo abierto en el navegador, parte 7: Marching cubes y las primeras cuevas de verdad

Por Oleg Sidorkin, CTO y cofundador de Cinevva

¿Acabas de llegar? Consulta la guía de la serie. Explica qué es un spike y enlaza todas las partes.

Los mapas de altura son estupendos hasta que necesitas voladizos.

En cuanto quieres túneles excavados, salientes rocosos flotantes o techos de cuevas, una pipeline basada exclusivamente en campos de altura empieza a limitarte. Un mapa de altura almacena un valor Y por cada coordenada XZ. Es físicamente incapaz de representar cualquier superficie que se pliegue sobre sí misma. Necesitábamos una representación volumétrica.

El Spike 12 implementó marching cubes en la GPU mediante shaders de cómputo de WebGPU. El algoritmo evalúa un campo de distancia con signo (SDF) sobre una cuadrícula 3D y extrae una malla de triángulos en la superficie donde se cruza el valor cero. Cada celda tiene 8 vértices, y cada uno está dentro o fuera de la superficie, lo que da $2^8=256$ patrones de signos posibles. Una tabla de consulta asigna cada patrón a un conjunto de triángulos. Los vértices se sitúan sobre las aristas de la celda en el punto donde el campo cruza el cero. Para una arista entre los vértices $a$ y $b$, con valores de campo $f_a$ y $f_b$, la interpolación lineal coloca el vértice en

$$\mathbf{v}={\mathbf{p}}_a+t({\mathbf{p}}_b-{\mathbf{p}}_a),t=\frac{-f_a}{f_b-f_a}$$

que es la fracción del recorrido a lo largo de la arista donde el campo alcanza el valor cero. Como $f_a$ y $f_b$ tienen signos opuestos en una arista que cruza la superficie, $t$ siempre se encuentra en $[0,1]$. Ejecutamos este proceso simultáneamente en cuatro chunks activos de ${64}^3$ y probamos ediciones animadas del SDF con regeneración de la malla en cada fotograma.

Abrir el Spike 12 en una pestaña nueva ↗ · Ver el código fuente

El primer logro fue ganar confianza en la propia pipeline de cómputo. Una sola llamada podía evaluar el SDF, clasificar las celdas y emitir vértices en un búfer de la GPU sin ninguna lectura de vuelta por parte de la CPU. El segundo logro fue descubrir lo rápido que «funciona» se convierte en una búsqueda de artefactos. Los triángulos ausentes rara vez se debían a un problema teórico de marching cubes. Solían deberse a discrepancias en los índices de la tabla, rangos de dibujo incorrectos que leían más allá del número de vértices activos o interacciones en casos límite cerca de las fronteras de los chunks, donde no estaban disponibles las muestras del SDF vecino.

Este spike nos obligó a pensar en zonas. Cerca de la cámara, quieres libertad volumétrica para que los jugadores puedan tallar, excavar y ver cuevas. Lejos de la cámara, quieres la eficiencia de los clipmaps, donde un mapa de altura plano resulta más barato y perfectamente adecuado. Esa dualidad se convirtió en la columna vertebral de la arquitectura que seguimos perfeccionando a partir del Spike 13.

Uno de mis momentos favoritos durante la depuración fue activar la vista de estructura alámbrica mientras se ejecutaban las ediciones. Ver cómo la topología se formaba y se disolvía en tiempo real hacía que las concesiones de calidad fueran evidentes de inmediato. Podías ver dónde la densidad de vértices era suficiente, dónde se volvía demasiado baja y exactamente dónde las transiciones de LOD acabarían necesitando compatibilidad con Transvoxel para evitar grietas.

En la parte 8 abordamos el reto de la integración. Mantener las mallas generadas directamente mediante cómputo y la lógica del grafo de escena de Three.js dentro de una única pipeline de renderizado estable fue más difícil de lo que sugería la demo aislada.

Tecnología mencionada en este capítulo

Marching cubes. Un algoritmo para extraer una malla de triángulos de un campo escalar 3D (Lorensen y Cline, 1987). Cada celda de una cuadrícula 3D regular se clasifica muestreando el campo en sus 8 vértices. El patrón de signos produce un índice de caso (0-255), y una tabla de consulta asigna cada caso a un conjunto de triángulos. Los vértices se colocan sobre las aristas de la cuadrícula interpolando entre sus dos extremos. El algoritmo es altamente paralelizable, ya que cada celda se procesa de forma independiente, lo que lo hace ideal para el cómputo en la GPU. Consulta nuestra guía sobre paisajes acerca de los SDF y marching cubes.

Campos de distancia con signo (SDF). Una representación volumétrica que almacena, en cada punto del espacio 3D, la distancia con signo hasta la superficie más cercana. Los valores positivos están fuera, los negativos están dentro y el cruce por cero constituye la superficie. Los SDF pueden representar formas 3D arbitrarias: cuevas, arcos, voladizos y geometría flotante que los mapas de altura no pueden expresar. La edición se realiza de forma natural mediante operaciones de conjuntos sobre el campo. Añadir material (la unión de dos formas) se expresa como $d=min(d_1,d_2)$; eliminarlo (excavar), como $d=max(d_1,-d_2)$, con la forma de sustracción negada; y una mezcla suave utiliza un mínimo suavizado como

$$\mathrm{smin}(d_1,d_2,k)=min(d_1,d_2)-\frac{h^2}{4k},h=max(k-|d_1-d_2|,0)$$

donde $k$ controla el radio de mezcla. Cuando $k\to 0$, la expresión vuelve a convertirse en un $min$ estricto. Consulta la representación de terrenos mediante SDF.

Shaders de cómputo de WebGPU. Programas de GPU que ejecutan cálculos de propósito general sin estar ligados a la pipeline de rasterización. Un shader de cómputo lanza grupos de trabajo compuestos por hilos que se ejecutan en paralelo. Para marching cubes, cada hilo procesa una celda de la cuadrícula: muestrea el SDF, clasifica la celda, consulta la triangulación, interpola los vértices de las aristas y los añade a un búfer de malla mediante contadores atómicos. No se necesita ninguna lectura de vuelta por parte de la CPU, porque el búfer de salida se utiliza directamente como datos de vértices para el renderizado. El proyecto webgpu-marching-cubes de Will Usher demuestra el procesamiento en tiempo real de una cuadrícula de 256^3 en el navegador. Consulta nuestra guía sobre paisajes acerca del LOD controlado mediante WebGPU.

Arquitectura híbrida de mapa de altura + SDF. El enfoque práctico para crear terrenos en el navegador: los mapas de altura cubren todo el mundo (son baratos y compactos), mientras que los volúmenes SDF solo existen en los chunks que necesitan cuevas, voladizos o elementos tallados por el creador (entre el 5 y el 10 % de los chunks). Cerca de la cámara, la libertad volumétrica permite tallar y crear cuevas. A lo lejos, los mapas de altura proporcionan un terreno plano eficiente. Consulta la representación híbrida del terreno.

---

Parte 7 de 12.
Anterior: Parte 6 - Los clipmaps cambiaron el rumbo
Siguiente: Parte 8 - Integración sin perder nuestra base de referencia
Guía de la serie: /es/blog/2026-02-25-open-world-browser-series-guide