Construindo um mundo aberto no navegador, parte 7: Marching cubes e as primeiras cavernas de verdade

Por Oleg Sidorkin, CTO e cofundador da Cinevva

Chegou agora? Consulte o guia da série. Ele explica o que é um spike e traz links para todas as partes.

Mapas de altura são ótimos até você precisar de saliências.

No momento em que você quer túneis escavados, bordas rochosas suspensas ou tetos de cavernas, um pipeline baseado apenas em campos de altura começa a limitar você. Um mapa de altura armazena um valor Y por coordenada XZ. Ele é fisicamente incapaz de representar qualquer superfície que se dobre sobre si mesma. Precisávamos de uma representação volumétrica.

O Spike 12 implementou marching cubes na GPU usando shaders de computação WebGPU. O algoritmo avalia um campo de distância com sinal (SDF) em uma grade 3D e extrai uma malha de triângulos na superfície onde ocorre o cruzamento por zero. Cada célula tem 8 vértices, cada um dentro ou fora da superfície, o que resulta em $2^8=256$ padrões de sinal possíveis. Uma tabela de consulta mapeia cada padrão para um conjunto de triângulos. Os vértices ficam nas arestas da célula, no ponto em que o campo cruza zero. Para uma aresta entre os vértices $a$ e $b$, com valores de campo $f_a$ e $f_b$, a interpolação linear posiciona o vértice em

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

que corresponde à fração ao longo da aresta em que o campo chega a zero. Como $f_a$ e $f_b$ têm sinais opostos em uma aresta de cruzamento, $t$ sempre fica em $[0,1]$. Executamos isso simultaneamente em quatro chunks ativos de ${64}^3$ e testamos edições animadas do SDF com reconstrução da malha a cada quadro.

Abrir o Spike 12 em uma nova aba ↗ · Ver código-fonte

O primeiro ganho foi a confiança no próprio pipeline de computação. Um único dispatch podia avaliar o SDF, classificar as células e emitir vértices em um buffer da GPU sem nenhuma leitura de volta pela CPU. O segundo ganho foi descobrir a rapidez com que “funciona” se transforma em uma busca por artefatos. Triângulos ausentes raramente eram um problema da teoria de marching cubes. Eram incompatibilidades nos índices da tabela, intervalos de desenho incorretos que liam além da contagem de vértices ativos ou interações em casos extremos próximos às bordas dos chunks, onde as amostras vizinhas do SDF não estavam disponíveis.

Esse spike nos obrigou a pensar em zonas. Perto da câmera, você quer liberdade volumétrica para que os jogadores possam esculpir, cavar e ver cavernas. Longe da câmera, você quer a eficiência dos clipmaps, onde um mapa de altura plano é mais barato e perfeitamente adequado. Essa dualidade se tornou a espinha dorsal da arquitetura que continuamos refinando a partir do Spike 13.

Um dos meus momentos favoritos de depuração foi usar a opção de visualização em wireframe enquanto as edições estavam em andamento. Ver a topologia se formar e se dissolver em tempo real tornou os compromissos de qualidade imediatamente visíveis. Era possível ver onde a densidade de vértices era suficiente, onde ficava grosseira demais e exatamente onde as transições de LOD acabariam precisando de suporte ao Transvoxel para evitar fissuras.

Na parte 8, abordamos o desafio da integração. Manter malhas brutas geradas por computação e a lógica do grafo de cena do Three.js em um único pipeline de renderização estável foi mais difícil do que a demonstração isolada sugeria.

Tecnologias mencionadas neste capítulo

Marching cubes. Um algoritmo para extrair uma malha de triângulos de um campo escalar 3D (Lorensen e Cline, 1987). Cada célula de uma grade 3D regular é classificada por meio da amostragem do campo em seus 8 vértices. O padrão de sinais produz um índice de caso (0–255), e uma tabela de consulta mapeia cada caso para um conjunto de triângulos. Os vértices são posicionados nas arestas da grade por meio da interpolação entre os dois vértices. O algoritmo é altamente paralelizável, pois cada célula é processada de forma independente, o que o torna ideal para computação na GPU. Consulte nosso guia de criação de paisagens sobre SDFs e marching cubes.

Campos de distância com sinal (SDFs). Uma representação volumétrica que armazena, em cada ponto do espaço 3D, a distância com sinal até a superfície mais próxima. Valores positivos ficam do lado de fora, valores negativos ficam do lado de dentro, e o cruzamento por zero define a superfície. SDFs podem representar formas 3D arbitrárias: cavernas, arcos, saliências e geometria flutuante que mapas de altura não conseguem expressar. A edição funciona naturalmente como álgebra de conjuntos aplicada ao campo. Adicionar material (união de duas formas) é $d=min(d_1,d_2)$; remover material (cavar) é $d=max(d_1,-d_2)$, com a forma de escavação negada; e uma mesclagem suave usa um 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)$$

em que $k$ controla o raio da mesclagem. Quando $k\to 0$, isso volta a ser um $min$ rígido. Consulte representação de terreno com SDF.

Shaders de computação WebGPU. Programas de GPU que executam computação de uso geral, sem estarem vinculados ao pipeline de rasterização. Um shader de computação despacha grupos de trabalho compostos por threads que são executadas em paralelo. Para marching cubes, cada thread processa uma célula da grade: amostra o SDF, classifica a célula, consulta a triangulação, interpola os vértices das arestas e os adiciona a um buffer de malha usando contadores atômicos. Nenhuma leitura de volta pela CPU é necessária, pois o buffer de saída é usado diretamente como dados de vértices para a renderização. O webgpu-marching-cubes, de Will Usher, demonstra o processamento em tempo real de uma grade ${256}^3$ no navegador. Consulte nosso guia de criação de paisagens sobre LOD controlado por WebGPU.

Arquitetura híbrida de mapa de altura + SDF. A abordagem prática para terrenos no navegador: mapas de altura cobrem o mundo inteiro — de forma econômica e compacta —, enquanto volumes SDF existem apenas nos chunks que precisam de cavernas, saliências ou elementos esculpidos pelos criadores (5–10% dos chunks). Perto da câmera, a liberdade volumétrica permite escavações e cavernas. À distância, mapas de altura fornecem terrenos planos com eficiência. Consulte representação híbrida de terreno.

---

Parte 7 de 12.
Anterior: Parte 6 — Os clipmaps mudaram o rumo da história
Próxima: Parte 8 — Integração sem perder nossa base de referência
Guia da série: /blog/2026-02-25-open-world-browser-series-guide