Eight Solutions to Address Climate Change is a fully web-based interactive 3D infographic built in WebGL. Our concept was to create the experience of exploring an idealistic fully green city by bringing together case studies and best practices from megacities around the world into a single city block. The eight case study solution examples represent each of the C40 Cities target sectors: buildings, energy, lighting, ports, renewables, transportation, waste and water to demonstrate the variety of ways cities can take decisive action to reduce carbon emissions.

We designed our city in 3D using Cinema 4D in a bright cell-shaded style that complements the future-thinking, optimistic message of the C40 and fits neatly into the overall design and branding system we created for C40.org. Visitors to the site can learn about some of the problems cities confront in going green by hovering over the various elements in the exploded city block. Clicking a problem zooms in to an animated explanation of the actions the cities took to achieve the greener solution.

To bring the whole experience to life in the web browser, we utilized WebGL — an extension of Javascript that allows us to generate 3D graphics in most modern web browsers without any extra plug-ins or Flash. The Cinema 4D elements were exported to Three.js using a custom Python script that dug into the C4D API and converted both the geometry and UV texturing into a format that Three.js could render. Once we were able to successfully export the models, the assets were assembled into a scene and animated within the three.js framework using tween.js library.

Developed for C40 Cities by The Barbarian Group.

Loading more stuff…

Hmm…it looks like things are taking a while to load. Try again?

Loading videos…