Building an immersive web-based hub for the Meebits

When Yuga Labs first approached DOGSTUDIO/DEPT®, it was the beginning of an ongoing collaboration, with the initial goal to celebrate their owners. 

As we began to work on the project, we had to ensure that we could meet Yuga Labs’ strict guidelines for security, while also setting a solid foundation for our future projects. While meeting those guidelines, the project presented two key challenges: 

• Integrate the immersive homepage and connected wallet gate with the ordering management of the posters based on Shopify. Despite being separate, these elements needed to work together seamlessly. To accomplish this, we utilised React and Nuxt.js to build a cohesive experience that aligned with Yuga Labs’ other products.
• The desired seamless experience came at a cost of requiring additional security measures. With the help of Yuga Labs’ engineering team and our stack-agnostic WebGL technology, we were able to overcome this challenge.

When envisioning Meebits coming to life and exploring their surroundings, we envisioned them being the stars of the show, always together, having fun, and embracing their individuality.

Inspired by Yuga Labs’ prior media campaign and poster design, we designed the entire platform to be quirky and bold. From typography and icons to motion graphics, everything was designed to reflect the pixel-driven universe in which the Meebits live in, and to give the community glimpses of future developments.

In this immersive experience where the Meebits were the centre of attention, we created two levels of zoom triggered by a prominent ON/OFF button leading to a library of playable characters. We also added several modes for exploring, some secretly hidden, offering an immersive experience that would generate excitement within the NFT community.

When we were first assigned this project, we knew we wanted to create an experience that users could dance, play, and enjoy. With a collection of 20,000 unique characters, each with their own traits, types, and rarities, it was important to bring them to life.

We created three modes, each setting the characters in a different environment ready to party. To make things even better, we worked with Yuga Labs to create a simple and straightforward process for Meebit holders to retrieve their posters.

Because it is not a party without music, Yuga Labs teamed up with WarpSound, an AI-powered collective of virtual artists, to create an AI-generated playlist.

The team wanted to bring the Meebits to life through animations, lighting, and shadows, leading them to use the Mixamo animation catalogue for quick access to a wide range of animations. This required significant modifications to our custom made WebGL engine called AstroGL, although this project gave us the opportunity to further test our continuously-growing piece of engineering. 

The rendering of the Meebits also presented challenges because we had to match the neo-8 bit style posters. 

To do this, we had to adjust the PBR real-time rendering material and add real-time sharp shadow capabilities while maintaining performance standards. One issue that arose during production was that each colour in the model had its own sub-mesh, which impacted performance when displaying multiple Meebits. To resolve this, DOGSTUDIO/DEPT® created code to merge all sub-meshes into one draw call per Meebit, ensuring that a party with multiple Meebit friends would be smooth and enjoyable.