From the lab

Edutainment Game: Plastic Waste in the Ocean

We built an interactive, game-like experience where you control a plastic bag at the bottom of the sea to encourage people to be mindful of their impact on the environment.

Tech used

  • Threejs
  • Cannon.js
  • Tone.js

Background

One of our teammates knew there was a data model of the Mariana Trench and that it would be fun to do something with it and test three.js together with react via react-three-fiber. Furthermore, since a plastic bag was recently discovered in the Mariana Trench, we decided to create an interactive, game-like experience where the user could see and control a plastic bag at the bottom of the sea to raise awareness about the issue of plastic pollution and its far-reaching consequences on marine ecosystems.

The Process

The week's goal was to explore 3D states in the browser and create a truly immersive experience to educate and inform players about the environmental impacts of plastic waste. We wanted to create a truly immersive experience so the users are "seeing" a plastic bag at the bottom of the sea. Could we, for example, provide the user a simple sentence of their location and utilize game development techniques to achieve that?

We began by rendering the bottom of the sea with the help of free models of the Mariana Trench and creating a plastic bag model. We then added physics to the plastic bag model so that it moved like an actual bag in water and looked realistic doing so. To achieve this, we used the lightweight physics engine cannon.js.

To create a truly immersive experience, we used audio synthesis via Tone.js to generate realistic sound effects of underwater movement and the rustling of plastic bags. We also ensured that the controls were easy to use, as good controls are often essential in game development and can make a world of difference to the user experience.

Results

After a week of intense work, we got the job done – creating an immersive and educational experience that raises awareness about plastic waste in the ocean. The game-like environment we created was both highly playable and engaging, making it an excellent tool for educating people about the dangers of plastic pollution.




Several key lessons were learned during the process, including:

  • How important it is to be flexible and adaptable.
  • Changing the course can be essential to progress.
  • Communication is key to getting results.

While there is a long list of things that could make it into the next version of the product, there is no guarantee that it would create a better experience for the end user. That is, unfortunately, just the nature of these kinds of projects. With that said, the team hopes to add more features to the game in the future, such as a multi-player option and a mega end-game experience. We also plan to create a fully physical bag model that reacts to water-like forces.

Press here to try out the game.