This project aims to create a procedural (infinite) terrain using the three.js JavaScript library and WebGL. The terrain itself is made of a 3x3 matrix of tiles that are continuosly generated as the scene moves, by using one among three different pseudorandom noise algorithms: Perlin noise, Simplex noise and Diamond-Square noise.
The tile generation algorithm that allows the new tiles to perfectly match the old ones on their edges has been specially created for this project by the author.
A series of dat.GUI, mouse and keyboard controls allow the user to change the terrain and scene parameters, as well as move around the camera.
The project can be viewed in action here: Procedural Terrain.
This project uses the following libraries:
- three.js by Mr.doob (main library)
- dat.GUI by Google Data Arts Team (graphical user interface)
- noiseJS by Joseph Gentle (Perlin & Simplex noise)
- Olsen noise by Tatarize (deterministic, infinite Diamond-Square noise)
The following images have been freely adapted by the author to be used as textures:
- Mountain rock seamless texture by Giles Hodges (terrain)
- Water Normals Texture by by Mr.doob (water)
- Night Sky Background from PNGio.com (night skybox)
More references can be found in the documentation.
The main script file, proceduralTerrain.js, has been heavily commented in the hopes that people trying to re-create this project will better understand how the scene and terrain generation works, since the author has deemed insufficiently documented other similar projects found around the web.