3D Designer, UI/UX Designer, Developer
Solo Project
HTML, CSS, Javascript, WebGL, Threejs, Cinema4D, Adobe XD
14 weeks
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.
"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."
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.
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.
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.
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.
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.
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.