Construire un monde ouvert dans le navigateur, partie 6 : les clipmaps ont changé la donne

Par Oleg Sidorkin, directeur technique et cofondateur de Cinevva

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

Avant le Spike 10, notre modèle mental était encore « un monde plus vaste implique davantage de géométrie ». Après le Spike 10, il est devenu « un budget géométrique constant, avec des mises à jour d'anneaux centrées sur la caméra ». Ce changement a transformé la trajectoire du projet.

Le principe des clipmaps géométriques est simple. Le terrain est rendu sous la forme d'un ensemble d'anneaux concentriques centrés sur la caméra. L'anneau le plus intérieur possède la plus forte densité de sommets. Pour chaque anneau extérieur $k$, l'espacement des sommets double, $s_k=s_0\cdot 2^k$ ; il couvre donc une surface au sol $4\times$ supérieure à celle de l'anneau situé juste à l'intérieur.

Ce doublement constitue toute l'astuce. La distance d'affichage augmente géométriquement avec le nombre d'anneaux, $d_{\text{view}}\approx s_0\cdot 2^L$, tandis que le coût en sommets n'augmente que linéairement :

$$V_{\text{total}}\approx N^2\cdot L$$

pour $L$ anneaux comportant chacun $N\times N$ sommets. Doubler la distance d'affichage ne coûte qu'un anneau supplémentaire, et non quatre fois plus de géométrie. Le nombre de triangles reste à peu près constant, quelle que soit la taille du monde, car les mêmes $L$ anneaux sont toujours rendus à la même résolution.

Ouvrir le Spike 10 dans un nouvel onglet ↗ · Voir le code source

L'astuce pratique consistait à appliquer un géomorphing aux limites des anneaux. Lorsqu'un sommet passe d'un anneau de niveau de détail au suivant, sa hauteur doit être interpolée en douceur entre les échantillons haute et basse résolution. Sans cela, des sauts visibles apparaissent chaque fois que la caméra se déplace et que les anneaux se décalent. Nous avons géré ce problème avec un facteur de fusion fondé sur la distance entre le sommet et le bord de l'anneau, en interpolant la hauteur dans le vertex shader :

$$h=\mathrm{lerp}(h_{\text{fine}},h_{\text{coarse}},\alpha ),\alpha =\mathrm{smoothstep}(d_{\text{near}},d_{\text{far}},d)$$

où $d$ représente la distance entre le sommet et la caméra. À l'intérieur de l'anneau ($d\le d_{\text{near}}$), le sommet utilise sa hauteur en pleine résolution ; lorsqu'il atteint l'anneau suivant ($d\ge d_{\text{far}}$), il a déjà migré vers la hauteur grossière que cet anneau utilisera, si bien qu'aucun saut ne peut plus se produire.

Les tests de déplacement de la caméra nous ont révélé une leçon plus subtile. Il est facile d'évaluer les clipmaps sur des captures d'écran statiques et de passer à côté des artefacts de transition. Nous avons consacré du temps à parcourir les limites des anneaux à vitesse constante afin de repérer tout bruit temporel. Les captures d'écran mentaient. Le mouvement disait la vérité.

Ce prototype exploratoire nous a également fourni une frontière architecturale nette. Le terrain proche pouvait devenir progressivement dynamique et coûteux, avec de l'édition volumétrique, des matériaux plus complexes et des interactions physiques. Le terrain lointain pouvait rester stable, prévisible et peu coûteux. Cette séparation est devenue l'épine dorsale de toutes nos décisions architecturales à partir de ce moment.

Si vous envisagez d'utiliser des clipmaps dans votre propre projet, testez des boucles de charge plutôt que de belles prises de vue. Les longs trajets, les changements d'altitude de la caméra et les franchissements répétés des limites sont ce qui révèle les véritables problèmes.

Dans la partie 7, nous ajoutons le maillage volumétrique et passons du « terrain comme surface » au « terrain comme volume modifiable ». C'est à ce moment-là que ce projet a cessé d'être un moteur de rendu pour commencer à devenir un éditeur de mondes.

Technologies abordées dans ce chapitre

Clipmaps géométriques. Introduites par Losasso et Hoppe à la SIGGRAPH 2004 (article), les clipmaps géométriques rendent le terrain sous la forme d'anneaux carrés concentriques centrés sur la caméra. Chaque anneau couvre deux fois la surface du précédent avec une résolution de sommets divisée par deux. Le nombre total de sommets est constant : environ $N^2\cdot L$. Avec $N=256$ et $L=8$ niveaux, cela représente ${256}^2\times 8\approx \mathrm{524,000}$ sommets, quelle que soit la taille du monde. Le CPU met à jour les données de la carte de hauteurs de chaque anneau à mesure que la caméra se déplace. Le vertex shader lit la hauteur dans une texture et déforme la grille plane. Consultez notre guide de création de paysages consacré aux clipmaps géométriques ainsi que GPU Gems 2, chapitre 2.

Géomorphing. Le principal artefact visuel du niveau de détail des terrains est le saut : les sommets changent brusquement de position lorsqu'une parcelle passe à un autre niveau de détail. Le géomorphing élimine ce problème en interpolant les positions des sommets entre les niveaux de détail dans une zone de transition. Chaque sommet stocke à la fois sa hauteur au niveau de détail actuel et sa hauteur au niveau plus grossier. Un facteur de morphing fondé sur la distance à la caméra effectue une interpolation fluide entre les deux : morphedHeight = mix(fineLodHeight, coarseLodHeight, smoothstep(lodNear, lodFar, distance)). La zone de transition correspond généralement aux 20 % extérieurs de chaque anneau. À des vitesses de caméra normales, la transition est invisible. Consultez les détails du géomorphing.

CDLOD (clipmaps adaptatives par quadtree). Une amélioration des clipmaps à anneaux fixes proposée par Strugar (2014, article). Au lieu d'utiliser des anneaux concentriques à résolution uniforme, CDLOD s'appuie sur un quadtree qui s'adapte à la complexité du terrain. Les zones planes utilisent des nœuds grossiers, tandis que les zones très détaillées — falaises ou crêtes — bénéficient d'une subdivision plus fine. C'est important pour les mondes créés par les utilisateurs, où la complexité peut varier considérablement d'un chunk à l'autre. Consultez la section CDLOD de notre guide de création de paysages.

---

Partie 6 sur 12.
Précédent : Partie 5 — Établir le budget des jolis effets
Suivant : Partie 7 — Marching cubes et les premières véritables grottes
Guide de la série : /fr/blog/2026-02-25-open-world-browser-series-guide