TerraSpace

A procedural terrain generator built using a combination of 3D voxel-based graphics and Perlin Noise algorithms.

Comment

Inspiration

Our inspiration originally stemmed from the concept of cellular automata. Having completed coursework on the topic in Year 1 and researching the theory and applications behind them further in Year 2, we wanted to build some form of interactive generative software that could produce similar sorts of models. With this in mind, we decided to create a terrain builder that allows users to explore and generate their own.

What it does

Terraspace is a procedural terrain generator, built using a combination of 3d voxel-based graphics and Perlin Noise algorithms. By adjusting the amplitude, voxel density and model colour, users can generate their own 3d terrains to explore and navigate. Additionally, users can utilise the "Randomise Model" function to create unique instances of terrains, randomly generated from their parameters.

How we built it

We built this project over the 24 hour duration of the hackathon, mostly using HTML, CSS and JavaScript, as well as the three.js library especially for the 3d graphics. Within the three.js library we developed an intractable and adjustable voxel environment that meshes all the voxels together to create a single hollow object - drastically increasing the efficiency and optimising the app to run on all computers smoothly.

The terrain generation algorithm we used is our own implementation of the famous Perlin Noise; for the regular terrain we project a 2D Perlin Noise map onto a 3D plane, and our CheeseSpace feature makes use of a subtractive 3D Perlin Noise map. We also implemented 2 sliders that allow the user to vary the voxel density and amplitude of the model. The domain name is taken from the GoDaddy registry, managed with Porkbun, and linked to our own GitHub pages site.

Challenges we ran into

We ran into many challenges on our journey to making TerraSpace, both with the graphics and version control. One of the big challenges for us was understanding voxels, the maths behind them, and how to programmatically generate them so that we could apply the Perlin Noise algorithm. We also had problems with rendering times, which we alleviated by rendering the background once when the page loads in rather than every time we redrew the terrain. Another big challenge was keeping track of all the branches we had in git, and transferring them across repositories so that GitHub Pages could host the site.

Accomplishments that we're proud of

Having very limited front-end development experience, with our whole team only coding very basic websites prior to the event, most of the technical aspects of this project were very new to us. From the algorithms used to generate terrains, applying the 3d aspect of the graphical side using three.js and also building and styling the website and UI itself, this whole project was a huge learning experience for the whole team. We are extremely proud to have stuck through all the challenges we faced to develop what we think is one of the best hackathon projects we have built.

What we learned

Over the duration of the hackathon, we were exposed to entirely new technologies. By throwing ourselves out of our comfort zones to work with completely new developer tools, we were able to hugely broaden our knowledge on how front-end development, domain hosting, generative algorithms and 3d graphics (to name a few) work.

What's next for TerraSpace

There are plenty of features we would love to see implemented in TerraSpace, that would extend far beyond the 24 hours we spent coding it.

One feature we would really like in particular is better mobile experience - currently, the application is configured for desktop users, with the mobile version being somewhat buggy. With more time, we could develop a responsive CSS styling to our website - giving mobile device users a greater user experience.

Another feature we would like to see implemented is loading and saving. By integrating a database to TerraSpace, we could create different seeds corresponding to set noise generation parameters that users have created. With a login system, users could then store their favourite terrain builds to view again and explore.

Share this project:

Updates