UI/UX
3D Design
Coding

Great Barrier Reef

Deliverables

3D Designer, UI/UX Designer, Developer

Team Members

Solo Project

Tools Used

HTML, CSS, Javascript, WebGL, Threejs, Cinema4D, Adobe XD

Duration

14 weeks

Problem

The Great Barrier Reef is in critical condition due to coral bleaching

The effects of climate change from ocean warming and acidification is causing coral reefs to die off through coral bleaching. Coral bleaching affects 98% of the Great Barrier Reef, which is our largest coral reef system and one of the top 7 wonders of the world.

Design Challenge

"Using 3D models and WebGL, create an interactive experience that prompts users to take action against climate change from one of the 350.org's topics."

Solution

In order to raise awareness of the impact of the environment, this interactive experience uses multiple 3D models to show how coral bleaching occurs. By having the user control the changes of carbon dioxide levels and see coral lose its colour accordingly, it provides a visual impact and persuades them to take action.

These visuals represent how the user would interact with the 3D models
and the changes that occur to show the reality of what happens during climate change.

Change the Carbon Dioxide Levels

The user will see the water levels rise in the 3D model when they drag the slider at the bottom to change the carbon dioxide levels. The ships and cars that I animated in the code are releasing carbon emissions (appears as a cloud-like gas) show them a visual of how this affects our planet.

See the Process of Coral Bleaching

The user will see fishes swimming around and the vibrant and colourful coral. When they press the "Click Me!" button, the coral will lose its colour due to the rise in temperatures.

Brainstorming

Storyboards

Style Tile

Inspiration

Process

This shows the process of building the 3D models and the iterations I had before the final version. My rounded coral shapes made my file size too large and it would lag when I tried to load it onto the browser. In order to fix this, I designed all of my models using low-poly.

The lighting I had in Cinema 4D would look different compared to when it was on the browser. I changed certain lines of code to change the lighting settings and kept experimenting until I was happy with the result.

Since the models take a bit of time to load, it would create a white flash between the pages. In order to combat this issue, I created a loading page for a smoother experience.

Final Result

Takeaways

How to 3D Model in Cinema 4D

Prior to this project, I had never used Cinema 4D before. It was a huge learning curve for me because I did not know how to 3D model. But, after watching many tutorials and making many iterations I became more comfortable using this program. I enjoyed the challenge of learning a new program and incorporated multiple 3D models in my project because I had a lot of fun working on it.

Working within the Scope of the Project

Since I wanted to have complicated 3D models with a lot of rounded shapes, it was not possible to load them into the browser without lagging and a long wait time. I had to make the shapes less complicated and use low-poly shapes to decrease the file size.