Shoreline
Mayhem

Html, Css, Javascript, Threejs, 3D Modelling

Shoreline Mayhem is an interactive informatory experience, that hopes to teach users about oceanlife and pollution. It uses a coded 3D environment to show the damage that we have caused to our oceans.

Full Project

How might I inform and enlighten users about a global climate change problem using factual information and interactive 3D graphics.

Introduction

When tackling this issue I wanted to focus on research so that I could learn more about a topic, and inform others accurately. With very concept driven projects such as this one, I feel that having a solid base before building the site is necessary.

Tools & Programs Used

Research

My research began by researching oil spills and wildlife damage done as a result of oil spills, and oil in the water. I wrote a short paper highlighting the key points that were to be my focus for the project.

During the research, some of the information shifted my initial beliefs of the damage oil could cause, because of this, my focus had to be adjusted slightly when creating my narrative. Focusing more specifically on shorelines and shallow ocean animals, and explaining the topic of Oceanic Pollution in a simple and easy to understand way.

Hand drawn project sketches that show rough 3d shapes.

3D Modelling

Before modelling, the forms were sketched (as you can see above), to give some context and explore the visual style. When beginning to model, It was my first time, and because of my lack of experience with 3D modelling, much of it became a challenge. With certain forms being simplified down, and relying heavily on doing more with code.

Mockups & Storyboarding

Then graphical mockups were created in Illustrator to demonstrate the aesthetic style that was going to be used, as well as colour variations. In addition, a storyboard was made to guide my scenes into an easier to understand process.

A series of 6 storyboard frames that show the progression of Shoreline Mayhem.
A test render of the visuals.

Coding

This project used THREEJS, TweenJs, and a few other JavaScript libraries to integrate 3D models on the page. The hardest part was modifying noise to create the water-like blocks, setting the 3D stage and positioning all of my 3D models. I tried to keep it relatively simple and lightweight, so that load times could be faster.


View on GitHub

Final Product

The final product went according to both my storyboard and graphical model, and a was a personal success. The overall process allowed me to explore 3D graphics and animation in a new and interesting way, and create something to be passionate about and inform people about a topic. If I were to continue building this or create something similar in the future, I would have used more polished 3D forms, web layout, and made the page more accessible, I learned that although it was important to create something intricate, I should have kept UX at the forefront as well.

Alto: An app to better your mood with music...

To Top