Construire un monde ouvert dans le navigateur, partie 27 : une île née du bruit, un sol qui ressemble vraiment à un sol

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 renvoie vers toutes les parties.

La partie 26 a ajouté de l’eau au monde. Cette partie construit la terre qui se trouve dessous, en deux étapes qui reproduisent la formation d’un lieu réel. Le spike 54 crée le terrain lui-même : non pas sculpté à la main, mais généré à partir de bruit, puis érodé jusqu’à présenter le réseau de drainage et le littoral d’un endroit réellement traversé par l’eau. Le spike 55 crée l’enveloppe de ce terrain en résolvant le problème qui met en échec presque tous les sols procéduraux : une texture répétée paraît répétée. Ensemble, ils répondent à une question : un créateur peut-il obtenir une île plausible et un sol qui ressemble vraiment à un sol, sans qu’un artiste intervienne sur l’un ou l’autre ? La réponse est oui, à condition de reproduire les bonnes recettes.

Un littoral que le bruit seul ne peut pas produire

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

La carte de hauteur suit les recettes de Red Blob Games, qui empilent de petites transformations corrigeant chacune un défaut précis du bruit brut. Le mouvement brownien fractionnaire additionne plusieurs octaves de bruit de Perlin afin que le terrain présente à la fois de larges collines et des détails fins. Mais un FBM simple paraît doux et aligné sur une grille ; le point d’échantillonnage subit donc d’abord une déformation du domaine : chaque coordonnée est décalée par un autre champ de bruit, $p^{\prime }=p+\text{noise}(p)\cdot s$, ce qui courbe les crêtes pour leur donner une forme organique plutôt que de les verrouiller sur les axes. Vient ensuite la redistribution : élever l’altitude à une puissance $e^k$ abaisse les tons moyens afin que le monde présente des vallées plates et des sommets acérés, au lieu d’une même pente douce partout. L’élément qui en fait une île plutôt qu’une succession infinie de collines est une atténuation radiale : on calcule la distance euclidienne depuis le centre, $d=min(1,\sqrt{n_x^2+n_y^2})$, puis on interpole l’altitude vers $1-d$ afin que le terrain plonge dans l’océan sur les bords. Un second champ de bruit indépendant devient une carte d’humidité, qui ne modifie pas la forme, mais alimentera ensuite l’étape de création des biomes.

On obtient ainsi une forme, mais une forme issue du bruit. Elle ne comporte ni rivières, ni vallées creusées par l’eau, ni cônes de sédiments, car rien ne s’est encore écoulé à sa surface. La solution est l’érosion hydraulique, adaptée de l’implémentation sous licence MIT de Sebastian Lague. Des milliers de gouttes d’eau apparaissent aléatoirement et dévalent les pentes. Chacune conserve une inertie pour éviter les virages brusques à angle droit, emporte des sédiments lorsqu’elle accélère et les dépose lorsqu’elle ralentit ou forme une flaque. Une brosse circulaire précalculée répartit chaque événement d’érosion sur un petit rayon afin de produire un creusement lisse plutôt qu’une rayure d’un pixel, tandis que l’évaporation fait disparaître la goutte au terme de sa durée de vie. Avec suffisamment de gouttes, le terrain acquiert ce que le bruit ne peut pas simuler : des réseaux de drainage qui convergent, des vallées qui s’élargissent en aval et des zones planes où les sédiments se sont déposés.

L’érosion sur le GPU et des rivières qui savent où elles se trouvent

L’érosion sur CPU est correcte, mais lente. Le spike l’adapte donc aussi à un shader de calcul WebGPU, et l’aspect intéressant tient aux contraintes imposées par les opérations atomiques du GPU. Les hauteurs sont stockées sous forme de valeurs i32 à virgule fixe, avec une échelle d’un million, car WGSL ne propose aucune addition atomique sur les nombres flottants. La seule manière de permettre à des milliers de gouttes de déposer et de retirer en parallèle des sédiments dans une même cellule sans condition de concurrence consiste à utiliser atomicAdd et atomicSub sur des entiers. La conversion aller-retour en virgule fixe peut parfois rendre une cellule légèrement négative sous l’effet de nombreux entraînements simultanés, ce qui est sans conséquence puisque la valeur est bornée lors de la relecture. La version CPU précalcule une table de brosses par cellule, mais sur une grille de ${1001}^2$, cette table occupe environ 100 Mo. L’adaptation GPU recalcule donc à la volée la brosse de chaque goutte, échangeant un peu de calcul contre une importante économie de mémoire. Les positions de départ des gouttes proviennent toujours du CPU, au moyen d’un générateur Mulberry32, afin que les exécutions restent déterministes.

Deux passes supplémentaires transforment le terrain érodé en carte lisible. Le drainage emploie la méthode d’accumulation des écoulements D8 de Red Blob : on dépose une unité de pluie sur chaque cellule, on trie toutes les cellules par altitude décroissante, puis on transmet l’eau accumulée par chacune à son unique voisin le plus bas. L’eau s’accumule ainsi dans les vallées naturelles, et toute cellule dont l’accumulation dépasse un seuil est marquée comme rivière. Le problème est qu’une carte de hauteur érodée comporte des cuvettes, c’est-à-dire des dépressions locales sans issue descendante. L’eau qui pénètre dans une cuvette s’y arrête, ce qui interrompt l’accumulation. Avant le calcul du drainage, le remplissage des cuvettes de Planchon-Darboux relève donc chacune d’elles juste au-dessus de son voisin le plus bas, $\text{minNeighbour}+ϵ$, en effectuant moins de vingt itérations jusqu’à ce que chaque cellule dispose d’une voie d’écoulement. Enfin, les biomes sont attribués selon la méthode de Red Blob : une table de correspondance à deux axes croise altitude et humidité, de sorte qu’une cellule haute et sèche devient rocheuse, tandis qu’une cellule basse et humide devient marécageuse. Des règles prioritaires tenant compte de la pente s’y ajoutent : les faces abruptes deviennent rocheuses quelle que soit leur humidité, la bande correspondant au niveau de l’eau devient une plage et les altitudes les plus élevées se couvrent de neige. Le résultat est une île immédiatement lisible, générée de bout en bout à partir de deux graines de bruit.

La tuile qui n’arrête pas de se répéter

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

Un terrain a besoin d’un matériau couvrant des kilomètres à partir d’une texture de quelques mètres de côté. Dès qu’une tuile est mise à l’échelle pour recouvrir le sol, l’œil repère immédiatement la répétition. Le spike 55 compare quatre modes d’échantillonnage sur une géométrie et un éclairage identiques, de sorte que la seule variable soit la manière dont la texture est lue. Le point de référence est plain : un seul échantillon aux coordonnées UV mises à l’échelle, avec une répétition évidente tous les quelques mètres. Il n’existe que pour servir de solution à battre. Les couches PBR gratuites proviennent de Poly Haven via leur CDN : texture diffuse, carte ARM regroupant occlusion ambiante, rugosité et métallicité, ainsi qu’une normale GL. Le tout est sous licence CC0 et chargé avec une anisotropie de 8 et des mipmaps.

Les trois autres modes proposent différentes approches contre la répétition. Le mode hex-linear correspond à la grille triangulaire de Heitz-Neyret : une grille triangulaire inclinée est placée sur la surface, et chaque fragment se trouve dans un triangle dont les trois sommets utilisent chacun un échantillon décalé aléatoirement. Ces échantillons sont mélangés selon des poids barycentriques, de sorte que les régions voisines lisent des parties différentes de la texture et que la répétition à grande échelle disparaisse. Mais un simple mélange linéaire de trois échantillons moyenne leurs couleurs au bord des triangles, ce qui laisse apparaître un motif triangulaire visible, exactement l’artefact rencontré dans le spike 48. Le mode hex-vp applique la correction publiée dans le même article de 2018 : après la somme barycentrique, il soustrait la couleur moyenne de la texture, remet la valeur à l’échelle avec l’inverse de la racine carrée de la somme des poids au carré afin de maintenir une variance constante, puis réajoute la moyenne. Le contraste reste ainsi stable dans toute la zone de mélange et les triangles disparaissent. C’est pourquoi le matériau effectue d’abord une relecture de 1 × 1 de chaque texture chargée pour estimer sa couleur moyenne. Le quatrième mode, iq-untiled, correspond à la technique 3 de Texture Repetition d’Inigo Quilez : deux échantillons décalés sont mélangés selon un motif de variation basse fréquence. Il ne nécessite que deux échantillons au lieu de trois et ne présente aucune structure triangulaire au départ, ce qui en fait l’option économique qui reste convaincante.

Une projection triplanaire facultative peut être ajoutée à n’importe lequel de ces modes. C’est elle qui permet au même matériau d’envelopper une falaise sans s’étirer. Au lieu d’utiliser un seul jeu de coordonnées UV, le shader échantillonne trois projections suivant les axes du monde : les surfaces orientées vers X lisent le plan YZ, celles orientées vers Y lisent ZX et celles orientées vers Z lisent XY. Il les mélange selon abs(normalWorld), élevé à une puissance d’accentuation comprise entre quatre et huit, afin qu’une pente à 45 degrés ne transforme pas les trois projections en une bouillie d’images fantômes. Le banc d’essai rend le compromis évident : le mélange hexagonal préservant la variance l’emporte en qualité, tandis que la solution à deux échantillons de Quilez privilégie les performances. Tous deux surpassent assez largement le mode simple pour qu’aucun créateur ne soit tenté de publier un terrain utilisant la tuile ordinaire.

Technologies mentionnées dans ce chapitre

Génération d’une carte de hauteur par empilement de recettes. Les recettes de Red Blob Games combinent le bruit brut pour former un terrain : FBM déformé dans le domaine ($p^{\prime }=p+\text{noise}(p)\cdot s$) pour produire des crêtes organiques, redistribution $e^k$ pour obtenir des vallées plates et des sommets acérés, et atténuation radiale euclidienne interpolée vers $1-d$ pour plonger les bords dans l’océan et créer une île. Un second champ de bruit fournit la carte d’humidité utilisée pour attribuer les biomes. Voir génération de paysages.

Érosion hydraulique sur CPU et GPU. Le modèle de gouttes de Sebastian Lague — inertie, capacité de transport, brosse circulaire précalculée pour les dépôts et évaporation — creuse un véritable réseau de drainage que le bruit ne peut pas simuler. L’adaptation au calcul WebGPU stocke les hauteurs dans des i32 à virgule fixe, avec une échelle d’un million, afin que les gouttes puissent appliquer atomicAdd/atomicSub en parallèle sur la même cellule. Elle recalcule à la volée la brosse de chaque goutte pour éviter une table d’environ 100 Mo sur une grille de ${1001}^2$, et génère les positions de départ avec un générateur Mulberry32 déterministe.

Drainage D8 avec remplissage des cuvettes. L’accumulation des écoulements D8 de Red Blob dépose une unité de pluie par cellule, trie les cellules par altitude décroissante et transmet l’eau au voisin le plus bas de chaque cellule, en marquant comme rivières celles qui dépassent un seuil. Le remplissage des cuvettes de Planchon-Darboux commence par relever chaque dépression locale jusqu’à $\text{minNeighbour}+ϵ$ en moins de vingt itérations, afin que l’eau ne reste jamais piégée et que l’accumulation demeure connectée. Une table de correspondance à deux axes croisant altitude et humidité attribue les biomes, avec des règles tenant compte de la pente qui imposent la roche sur les falaises, la plage au niveau de l’eau et la neige sur les sommets.

Quatre méthodes pour casser la répétition des textures. Sur une géométrie et un éclairage identiques : plain (un échantillon, répétition évidente), hex-linear (grille triangulaire de Heitz-Neyret, dont le mélange linéaire laisse apparaître un motif triangulaire), hex-vp (la correction préservant la variance de la section §3.3 d’EGSR 2018, qui soustrait la moyenne, remet à l’échelle par l’inverse de la racine carrée des poids au carré et réajoute la moyenne, ce qui nécessite une relecture moyenne de 1 × 1 par texture) et iq-untiled (technique 3 à deux échantillons d’Inigo Quilez). La projection triplanaire échantillonne trois plans suivant les axes du monde et les mélange selon abs(normalWorld) élevé à une puissance de 4 à 8 afin d’éviter l’étirement sur les falaises. La préservation de la variance l’emporte en qualité, tandis que la solution à deux échantillons l’emporte en coût. Voir matériaux de terrain.

---

Partie 27 sur 29. Précédent : Partie 26 — Trois façons de créer de l’eau Suivant : Partie 28 — De l’herbe jusqu’à l’horizon et un sol qui se dissimule Guide de la série : /fr/blog/2026-02-25-open-world-browser-series-guide