Bryce from Nyce

Bryce-like Fractal Terrain Generator

What

It's a 3D terrain editor. Currently, only the Diamond-Square algorithm is implemented.

How

It runs with ECMAScript, served by Bun, built on Hono, rendered with BabylonJS, reactived with AlpineJS, designed with PicoCSS and containerized with Docker.

No JSX nor hooks were harmed in the process.

This webapp is conveniently dockerized, to run it, simply clone this repo and launch :

$ docker compose up

And launch the browser to access to http://localhost:3000

Of course, if you know how to use Bun, you can simply launch :

$ bun run index.js

What is special about this implementation of Diamond-Square algorithm ?

Two points : unlike many implementions of this algorithm you can find on the net, this release is divided into steps. Each step adds more refinement to the mesh and you can increase or decrease this tesselation afterward generating the terrain.

The second point is the texturing algorithm that uses 3 textures (top, bottom and slope) that are mixed according to height and slope of the terrain. The slope texture is visible when the terrain is steep.

With the help of transfer functions and convolution matrices, you can rapidly generate realist terrains.

API

• src/Terrain.js : all mathematical stuff
• src/editor.js : all 3d stuff
• src/TransferFunction.js : transfer function object to be applied on Terrain objects
• template/index.html : the page
• texture/ : default textures

TODO (from probable to improbable)

• Fog
• Skybox
• Exporting the scene
• Managing a camera on the terrain
• Exporting a screenshot
• Undo - need to refactor TransferFunction and convolutions workflow
• Other algorithms for generating terrains
• Other algorithms for generating texturing
• Procedural mapping like original Bryce with pixel shaders ?
• Other primitives into the scene ?