Inspiration

Planets

The Purpose

The purpose of our project is to create a simulation of our galaxy to show how small we are compared to the grand scale of things.

How Our Program Works

Our program works by implementing a camera at a top-down view. What we did is to let the camera go through several layers representing the depth of our universe.

  • Layer 1: The camera goes through the planet Earth, which has an height map of elevated features of our planet. Such as mountainous terrain, hills, as well as simple natural elevations. Meaning that sea levels are shown deeper than continental shelves.

  • Layer 2: The camera goes through a plane manipulated to look like earth-like mountain terrain. We used simplex noise to alter the vertices and create mountain features. Thus resulting in procedurally generated terrain. Also we had to implement a vertex and fragment shader to manipulate the colour of the terrain based off of the noise value (i.e lower noise = lower elevations), resulting in biomes.

  • Layer 3: The camera goes through our solar system, displaying a multitude of planets and stars.

  • Layer 4: The camera goes through different galaxies.

  • Layer 5: The camera goes through our universe.

  • Layer 6: The camera reaches an end point, and a final message is displayed to the user.

    Technologies

    In the development of this simulation, we used ThreeJS and WebGL to create figures on a JavaScript Canvas.

Additionally, we used NodeJS to help with the configuration of this project, as well as default web technologies such as HTML and CSS.

Issues That We Faced

Some of the issues that were invloved in our project is the following:

  • The procedural generation of the terrain took time, as we had to learn how to manipulate the vertices on a plane.

  • We had issues applying the procedural generation on a sphere (Basically a cube that we shaped into a sphere), as it would look more like an asteroid rather than a planet with terrain features.

  • While implementing the shaders, we had to learn how the colour values work so we could set the colour for the specified elevation.

  • We had issues with the panning of the camera, as we had to learn how to position it, and make it scroll smoothly.

  • Additionally, we had issues spawning in the objects as sometimes it wouldn't show, or that our alterations wouldn't take effect.

Major Takeaway

Since we were all new to ThreeJS, we found this project difficult to implement. We had to learn the functionalities on the fly as well as manipulation of vectors, fragments and shaders.

We had many big ideas that we couldn't implement, however, we decided to go for a minimum viable product. This meant that we had to make sure that every feature works perfectly, as well as providing GUI options to alter terrain formation.

Overall, we were glad that we took up this opportunity as we learned many things, challenged ourselves, as well as meet new people.

What's next for ADVANCED | Planets

We would like the generation for planets to be completely procedurally generated, such as its terrain features

Share this project:

Updates