Construire un monde ouvert dans le navigateur, partie 7 : marching cubes et premières vraies grottes

Par Oleg Sidorkin, CTO et cofondateur de Cinevva

Vous découvrez la série ? Consultez le guide de la série. Il explique ce qu'est un spike et contient les liens vers toutes les parties.

Les cartes de hauteur sont excellentes, jusqu'à ce que l'on ait besoin de surplombs.

Dès que l'on veut des tunnels creusés, des corniches rocheuses en suspension ou des plafonds de grottes, un pipeline reposant exclusivement sur un champ de hauteur devient un obstacle. Une carte de hauteur stocke une seule valeur Y par coordonnée XZ. Il lui est physiquement impossible de représenter une surface qui se replie sur elle-même. Il nous fallait une représentation volumétrique.

Le spike 12 a implémenté le marching cubes sur le GPU à l'aide de compute shaders WebGPU. L'algorithme évalue un champ de distance signé (SDF) sur une grille 3D et extrait un maillage triangulaire à la surface où le champ passe par zéro. Chaque cellule possède 8 sommets, chacun situé à l'intérieur ou à l'extérieur de la surface, ce qui donne $2^8=256$ configurations de signes possibles. Une table de correspondance associe chaque configuration à un ensemble de triangles. Les sommets se placent sur les arêtes de la cellule, au point où le champ passe par zéro. Pour une arête reliant les sommets $a$ et $b$, dont les valeurs de champ sont $f_a$ et $f_b$, l'interpolation linéaire place le sommet en

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

ce qui correspond à la fraction de l'arête où le champ atteint zéro. Comme $f_a$ et $f_b$ ont des signes opposés sur une arête traversée par la surface, $t$ appartient toujours à $[0,1]$. Nous avons exécuté ce calcul simultanément sur quatre chunks actifs de 64³ cellules et testé des modifications animées du SDF avec un nouveau maillage généré à chaque frame.

Ouvrir le spike 12 dans un nouvel onglet ↗ · Voir le code source

Le premier succès a été de valider le pipeline de calcul lui-même. Une seule dispatch pouvait évaluer le SDF, classifier les cellules et émettre les sommets dans un buffer GPU sans aucune relecture par le CPU. Le deuxième a été de découvrir à quelle vitesse « ça fonctionne » se transforme en chasse aux artefacts. Les triangles manquants relevaient rarement d'un problème théorique lié au marching cubes. Ils provenaient plutôt de décalages d'indices dans les tables, de plages de rendu incorrectes qui lisaient au-delà du nombre de sommets actifs ou d'interactions dans des cas limites près des frontières des chunks, là où les échantillons SDF voisins n'étaient pas disponibles.

Ce spike nous a obligés à raisonner en zones. Près de la caméra, il faut une liberté volumétrique afin que les joueurs puissent sculpter, creuser et voir des grottes. Loin de la caméra, il faut l'efficacité des clipmaps, car une carte de hauteur plane y est moins coûteuse et parfaitement suffisante. Cette dualité est devenue la colonne vertébrale de l'architecture que nous avons continué à affiner à partir du spike 13.

L'un de mes moments de débogage préférés a été l'utilisation du mode filaire pendant l'exécution des modifications. Voir la topologie se former et se dissoudre en temps réel rendait immédiatement visibles les compromis de qualité. On pouvait voir où la densité des sommets était suffisante, où elle devenait trop faible et précisément où les transitions de LOD auraient finalement besoin de Transvoxel pour éviter les fissures.

Dans la partie 8, nous abordons le défi de l'intégration. Maintenir des maillages bruts générés par le calcul et la logique du graphe de scène Three.js au sein d'un même pipeline de rendu stable s'est révélé plus difficile que ne le laissait penser la démo isolée.

Technologies mentionnées dans ce chapitre

Marching cubes. Un algorithme permettant d'extraire un maillage triangulaire à partir d'un champ scalaire 3D (Lorensen et Cline, 1987). Chaque cellule d'une grille 3D régulière est classifiée en échantillonnant le champ à ses 8 sommets. La configuration des signes produit un indice de cas (0 à 255), et une table de correspondance associe chaque cas à un ensemble de triangles. Les sommets sont placés sur les arêtes de la grille par interpolation entre les deux extrémités. Comme chaque cellule est traitée indépendamment, l'algorithme est naturellement massivement parallèle, ce qui le rend idéal pour le calcul GPU. Consultez notre guide sur les paysages consacré aux SDF et au marching cubes.

Champs de distance signés (SDF). Une représentation volumétrique qui stocke, en chaque point de l'espace 3D, la distance signée jusqu'à la surface la plus proche. Les valeurs positives se trouvent à l'extérieur, les valeurs négatives à l'intérieur, et le passage par zéro définit la surface. Les SDF peuvent représenter des formes 3D arbitraires : grottes, arches, surplombs et géométries flottantes qu'une carte de hauteur ne peut pas exprimer. Leur édition repose naturellement sur l'algèbre ensembliste appliquée au champ. L'ajout de matière (union de deux formes) s'écrit $d=min(d_1,d_2)$, le retrait (creusement) s'écrit $d=max(d_1,-d_2)$ en inversant la forme de découpe, et une fusion douce utilise un minimum lissé tel que

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

où $k$ contrôle le rayon de fusion. Lorsque $k\to 0$, le résultat redevient un $min$ strict. Consultez la section Représentation du terrain par SDF.

Compute shaders WebGPU. Des programmes GPU qui exécutent des calculs généraux sans être liés au pipeline de rastérisation. Un compute shader distribue des groupes de threads qui s'exécutent en parallèle. Pour le marching cubes, chaque thread traite une cellule de la grille : il échantillonne le SDF, classifie la cellule, recherche la triangulation, interpole les sommets sur les arêtes et les ajoute à un buffer de maillage à l'aide de compteurs atomiques. Aucune relecture par le CPU n'est nécessaire, car le buffer de sortie est directement utilisé comme données de sommets pour le rendu. Le projet webgpu-marching-cubes de Will Usher illustre le traitement en temps réel d'une grille de 256^3 cellules dans le navigateur. Consultez notre guide sur les paysages consacré au LOD piloté par WebGPU.

Architecture hybride carte de hauteur + SDF. L'approche pratique pour les terrains dans le navigateur : les cartes de hauteur couvrent l'ensemble du monde (elles sont peu coûteuses et compactes), tandis que les volumes SDF n'existent que dans les chunks qui nécessitent des grottes, des surplombs ou des éléments sculptés par les créateurs (5 à 10 % des chunks). Près de la caméra, la liberté volumétrique permet de sculpter et de créer des grottes. Au loin, les cartes de hauteur fournissent efficacement un terrain plat. Consultez la section Représentation hybride du terrain.

---

Partie 7 sur 12.
Précédent : Partie 6 — Les clipmaps ont changé la donne
Suivant : Partie 8 — Intégrer sans perdre notre base de référence
Guide de la série : /fr/blog/2026-02-25-open-world-browser-series-guide