Responses by Tom Anderson, creative director; and Ash Thornton, lead creative developer, Green Chameleon.

Background: The Sea We Breathe is an immersive educational experience commissioned by Blue Marine Foundation, an organization dedicated to the restoration and protection of the ocean. The project’s goal was to create a platform that successfully educates people on the importance of our oceans and the solutions we can implement to mitigate climate change. The ocean’s health affects every one of us, and for that reason, the site aims to connect with as broad an audience as possible, from students to policymakers.

The Sea We Breathe focuses on three core topics: sustainable fishing, blue carbon habitats and marine protected areas. Each topic comes to life through an interactive underwater journey narrated by Stephen Fry. Our goal was to encapsulate the users through highly engaging multisensory adventures, help to create lasting emotional connections through the discovery of information, and ultimately, raise awareness and inspire people to take action and help preserve our oceanic ecosystems.

Design core: The site submerges users in realistic underwater worlds using interactive 3-D environments and an engaging user interface to create a holistic learning experience. We drew inspiration from navigational interfaces to create a head-up-display-styled UI, which contrasts nicely against the natural environments. The site’s homepage not only introduces the broader topic of ocean preservation but also contains a breathing exercise, which studies have shown helps to reduce tension and improve concentration and memory. This was an intentional choice to help users focus their minds before diving in.

The three journeys form the project’s core focus, each telling its own story and representing unique locations around the world: from the turquoise waters of the Maldives to the deep blue depths of the Atlantic Ocean. Carefully crafting the content was pivotal in the success of the project. We wanted to leave users feeling hopeful and inspired to take meaningful action.

Challenges: Re-creating the natural world in 3-D is notoriously tricky, especially with the added restrictions of building for the web. We had to consider the performance at all times when designing and building this experience. Lighting played a huge role in the visual quality; dynamic lighting is very taxing on performance. As a result, we needed to use several alternative techniques to achieve the final aesthetic. “Fake” God rays helped create the feeling of forward motion throughout the journey and indicated the global lighting direction. Realistic caustics and shadows matching the directional light played a key role in the scene’s realism. Every texture in the scene takes the lighting into consideration to ensure it was all visually tied together. Creating realistic yet performant textures was a balancing act we needed to get just right to achieve the effect we were after. We then used a mixture of prebaked animations and interactive elements to bring the scenes and marine species to life, adding that final layer of realism.

Special navigational features: We wanted the whole experience to flow organically and let the user’s curiosity guide them through the information. The navigation needed to serve a functional purpose while also adding to the overall immersion. The Journeys menu acts as a signpost for the website’s main body of content and comes in the surreal form of a tangle of currents ready to whisk you away to your chosen journey. We chose this slightly abstract mechanic to help suspend disbelief before users embark on their journey of discovery. The rest of the site can be traversed by the simple act of scrolling, enabling users to swim at their own pace as they absorb vital knowledge along the way.

Technology: The primary language we utilized was JavaScript, which provided access to the WebGL API via the popular three.js library. Alongside this was a significant amount of HTML that makes up the UI throughout the site. Some content is managed via our in-house version of WordPress. The scenes were designed in Blender, and the data was exported using a custom script we developed for this project. This pipeline allowed us to quickly test and iterate the journey’s composition, flow and length with minimal impact on development timelines.

Anything else? The musical score was composed in-house by our designer Charlie Davies, also known as Mozart.