Responses by Adoratorio Studio.

Background: The Blue Desert is an R&D project developed to experiment new ways of conveying information usually confined to PDFs, such as global impact reports and corporate press releases. We strongly believe in the power of storytelling to convey otherwise forgettable—but literally future-defining—data, and we wanted to show it to the world.

The experience showcases two narratives: First, an overarching sci-fi narrative recounting a wanderer’s journey through his ravished world, forever changed by a massive desertification effect. Second, a data-driven narrative told through pins scattered around the experience that compare the climate change goals set by COP21 and the current progress we have achieved toward them alongside our shortcomings.

The unusual pairing of content and approach garnered interest from very diverse audiences. Initially, we received a great response from the design community, who enjoyed the story as well as the imaginative world it takes place in, the curated 3-D models and the original music we produced for the experience. Following this recognition, many brands also took notice and reached out, finding the approach fresh and engaging to highlight years of efforts in achieving higher sustainability standards.

Design core: Without a doubt, the brushed, soft and warm style of the 3-D models characterize each step of the experience. From the color palette to the font choice and design elements, we strived to maintain an enveloping yet sandy finish to complement the narrative and setting—a continuity that can be noticed from the smallest icons to the more noticeable transitions. We meticulously studied the smooth camera movements that take the user through the various scenes and often reworked them throughout the process.

Favorite details: What makes or breaks this kind of experience lies in the details, so there are many we’re particularly proud of. Each of the scenes presents a custom interaction, like a fast flow of a waterfall, the flourishing of flowers on tree crowns or the rejuvenation of the blue desert when touched by the blobby komai. In terms of overall experience, we’re always taken aback by the profound, AI-generated (and human-tweaked) voiceover paired with the original soundtrack and variety of sound effects.

Challenges: As the wanderer shares at the start of the experience, “The more we know, the more we realize we don’t know.” And, in working on such a unique digital experience, we initially hadn’t realized how much we didn’t know still!

On the 3-D side, the biggest challenge was definitely orchestrating so many different scenes in a continuous flow, both in terms of navigation and optimization of the exported assets. After prototyping this first part, the second challenge was dealing with a project structure whose size we rarely encountered before, given the breadth of every single scene. We had to specifically consider cameras, backgrounds and the quality of textures closer to the POV.

In terms of development, the grand challenge lay in ensuring a constant frame rate for the user—something we achieved by implementing a double optimization process on both desktop and mobile on top of three.js’s frustum culling. The close collaboration between our 3-D and dev departments on the project also had us experiment (and implement) diverse aspects of InstancedMesh, particularly focusing on shader materials and vertex shaders.

New lessons: Given that the project was pretty much carried out in parallel between our 3-D and dev departments, the first phase of both teams consisted of a wide variety of specific experimentations that lasted from a few days to a week to first master and then be able to customize to our needs. These included a variety of technical specifics from texturing, UV-map creation, modeling and understanding the shortcomings of optimization tools like glTF Transform to specific tests on shaders and animations.

The biggest lesson and achievement was definitely structuring a smoother, more natural collaboration and hand-over process between the two teams—something that we did not learn without some hardships.

Technology: The Blue Desert front-end is built with Vue.js paired with three.js for 3-D WebGL elements. Animations throughout the site are handled using GSAP, while we managed audio integration through howler.js. In terms of programming languages, the development is primarily done in JavaScript with GLSL used for custom shader effects within the WebGL components. The website didn’t have a back end as we employed static JSON files.