Clean Energy Project

An interactive experience made through WebGL, specifically the ThreeJS library to make the audience go through the journey of energy consumption and how we can make a change through sustainable energy resources.

reviews2
Click on the above picture to access the interactive model


Problem

As an interaction designer, I wanted to highlight the problems of modern age pollution while making the user to go through a unique interactive 3D experience. This work is focused on showing the effects of the current mainstream energy sources on the environment and the alternate sustainable energy solutions that are provided by nature and can be a great replacement for our current energy requirements.


Our Solution

Today modern human is using energy in all shapes and forms to fuel technology and continuing our modern way of life. However, the resources for these technologies are supplied from non-sustainable material like fossil fuels which are believed to damage our environment. Now more than ever we need this change to use clean energy in our way of life.The energy that is available in the immediate environment we live in, planet earth.

Click or tap the following link to enjoy the full experience (Desktop version only) : www.cleanenergyproject.com


Process

Storyboard and Ideation

The idea was initiated with showing an island consisting the elements of modern life, and the factors that are essential to our daily lives. Through progress of the story, the island was supposed to take two ways towards its destiny. A polluted city using fossil fuels and a clean city harvesting natural sources of sustainable energy. However, through iteration and user experience this idea was further developed to two separate islands showing the change and progress more dynamic for the user to follow and explore.

reviews2
reviews2

Mockups and Initial sketches

Mockups and sketches were done in 2D, and the UI has evolved through different ideations and iterations. The idea of two back to back islands were formed so it could have an even more dynamic identity through 3D space.

reviews2
reviews2
reviews2
reviews2

Modeling

The modeling phase was mostly focused on taking the low polygon approach in order to make it easier for the web browser to load considering the number of details required to be loaded. Different types of users that may visit the website was to be considered.

reviews2
reviews2
reviews2
reviews2

Coding

To transfer the modeling into the web browser based interactive model, a series of JavaScript 3D libraries were used. The transition was not smooth at first and required a lot of tweaking in the process. Some of the libraries which were used are as follows:

  • Collada Loader.js
  • Three.js
  • RenderPass.js
  • Tweening.min.js

Reflection

This is an awareness piece which could be run through almost every browser without any requirement of high-end graphics cards, maximizing its reach and spreading this message in a more unique way.


Next Work : Exploration