Three.js - Génération procédurale avec THREE.Terrain

Pour créer un terrain naturel en 3D, il éxiste deux méthodes: 

• La sculpture manuelle avec des CAD ou logiciels de modélisation (tel que Blender, par exemple).
• La génération procédurale.

L'avantage de la sculpture manuelle est qu'on peut passer autant de temps que l'ont veut pour créer un paysage unique et détaillé.

L'avantage de la génération procédurale est que c'est automatique, rapide, et potentiellement infini.

La génération procédurale

Pour générer de l'information infiniment, nous pouvons, par exemple, créer une liste de N taille, rempli de caractères aléatoires. C'est en effet la base de la génération procédurale, mais l'utilité d'une liste aléatoire a ses limites.

Pour générer un terrain naturel, une texture, etc., Il nous faut une certaine logique entre la valeur de liste[1] et liste[2], n'est-ce pas?

Le bruit Perlin

l'algorithme de bruit Perlin, concu en 1983 par Ken Perlin, est un exemple très populaire d'algorithme qui, justement, cherche à générer des valeurs aléatoires. Cependant, l'algorithme cherche à produire un résultat dont l'apparence est plus naturelle/arrondie. 

Exemple aléatoire visuel: 

Exemple perlin visuel:

L'exemple avec perlin ressemble un peu comme du marbre, n'est-ce pas? En associant ce bruit à, par exemple, l'élévation d'un terrain, il est possible de créer des mondes surprenamment détaillés.

THREE.Terrain

THREE.Terrain est un module complémentaire à Three.js qui cherche à faciliter l'implémentation de terrain procédural. Il est disponible sur GitHub, sous license MIT. 

l'installation d'un module complémentaire se fait avec npm, comme avec Three.js 

npm install three.terrain.js

une fois installé dans le répertoire de Three.js, nous pouvons l'utiliser immédiatement. THREE.Terrain est composé d'une seule classe: Terrain.

ajoutons-la à notre page:

terrainScene = THREE.Terrain({

    easing: THREE.Terrain.Linear, //type d'interpolation entre deux valeurs

    frequency: 2.5, //complexité du bruit. le plus haut la valeur, le moins de différence entre deux positions voisines.

    heightmap: THREE.Terrain.Perlin, //algorithme.

    material: new THREE.MeshBasicMaterial({color: 0x5566aa}), //matériel Three.js

    maxHeight: 100, //hauteur maximum

    minHeight: -100, //hauteur minimum

    steps: 1, //je suis pas trop sur?

    //dimensions

    xSegments: xS,

    xSize: 1024,

    ySegments: yS,

    ySize: 1024,

});

une démo du résultat se trouve sur https://icecreamyou.github.io/THREE.Terrain/

Sources:

IceCreamYou. (n.d.). GitHub - IceCreamYou/THREE.Terrain: A procedural terrain generation engine for use with the Three.js 3D graphics library for the web. GitHub. https://github.com/IceCreamYou/THREE.Terrain

Perlin noise (article) | Noise | Khan Academy. (n.d.). Khan Academy. https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-noise/a/perlin-noise

Three.js – JavaScript 3D library. (n.d.). https://threejs.org/