Project Landsale - An Interactive Metaverse Map

In my time at Rocknitive, I transitioned from a short-term frontend development gig to spearheading a groundbreaking project for Space Metaverse. The project, dubbed "Project Landsale," involved creating a virtual island where users could buy parcels tied to virtual rooms developed by Space. This case study outlines the journey, challenges, and solutions that brought this ambitious project to life.

Initially, I was tasked with assisting in the development of a back-office dashboard for Space Metaverse. However, after sharing my personal interests and showcasing my 3D and game development side-projects, I was invited to lead the "Landsale" project. The goal was to create an interactive map for a virtual island, where users could navigate and purchase parcels of land.

After purchasing a parcel on this virtual island, the owner could set up everything from art galleries, meeting spaces, to fully-fledged and integrated shops. The parcels enabled individuals to host events, showcase artwork, or conduct virtual business operations within the immersive environment of the metaverse.

I was given a guideline, a Google Sheets document, that roughly depicted how the map was supposed look.

From this guideline, I created a low-fidelity wireframe of how this map would look like and how it would be integrated with the virtual spaces other teams were developing.

Using three.js and React, I created a basic map prototype that allowed users to zoom in and out, and navigate by dragging. The map was structured hierarchically, with biomes subdivided into districts, zones, and then individual parcels. This initial version, while functional, needed enhancements in terms of graphical presentation.

While waiting for feedback on the prototype, an idea was discussed with the project director to explore an alternative visual style and approach for the map. I was directed to look at The Otherside for inspiration.

After reading several papers on random distribution, I chose a model that could be better explained with mathematics. The concept was to draw shapes that symbolized islands on an archipelago. These islands would then be divided into cells, with each cell containing a piece of land.

After the experiment, I received feedback from a meeting with the concept art team, and we agreed to stick with the original idea. Shortly after, the team drafted up a proposal depicting their vision for the map, and it looked impressive!

I took a step back to think how I could apply the learned lessons from the experimental idea to rework the current map to look more like the concept, while making it more responsive and visually appealing.

First I tackled the districts and zones. Instead of showing a zones of only the selected district, I implemented a system where districts appeared fluidly as users zoomed in for all zones in view, providing a more seamless experience.

The concept map was then taken as inspiration, and from it I sculpted a 3D model which I painted over.

This high fidelity model was remeshed in order to lower the triangle count, and the textures were then baked onto the new low-poly version.

Integrating the 3D model into the map was challenging, especially with the requirement for a 3D visual that remained practical for navigation. I developed a solution where the 3D model floated below the grid, adjusting the camera angle and squishing the model to eliminate parallax issues.

One of the most challenging aspects of the project was integrating parcels of various sizes into the existing map structure. The requirement was to have parcels of different dimensions (1x1, 1x2, 4x4, etc.) distributed according to specific quotas for each biome, as provided in a new Google Sheets document.

To tackle this problem, I used principles learned from a couple of university courses I was taking at the time. The solution involved creating several different parcel mosaics that could be assigned to each zone within the map.

Each mosaic is essentially a layout that tells each district how to arrange its parcels and how big should each parcel be.

I started by extracting the key information from the provided Google Sheets document, which outlined the quotas for each parcel size within each biome.

Using Figma, I designed multiple mosaic patterns while avoiding visual artifacts such as obvious borders between zones. Each mosaic represented a unique arrangement of parcels, ensuring that the specified quotas were met. I color-coded the mosaics to indicate different parcel sizes and assigned them to zones accordingly.

While still in Figma, I modified the mosaics so that every rectangle encoded a specific type of parcel through it's position, size, and opacity.

I exported each mosaic from Figma as an SVG file. These SVGs contained rectangles representing individual parcels within the mosaic.

To visualize and test these mosaics, I developed a custom tool. This tool allowed me to import the SVG files directly, unpack them, and plot them on a grid. It provided zooming and panning functionality, enabling me to inspect the layout closely and ensure there were no collisions or unwanted visual artifacts such as Moiré patterns or obvious district borders.

After several iterations and refinements, I finalized eight distinct mosaic patterns, each effectively distributed across the zones. The result was a map that not only met the technical requirements but also provided a visually coherent and engaging user experience.

This detailed approach to parcel size distribution was crucial in achieving the project's goals, demonstrating the power of combinatorial problem-solving and custom tooling in complex frontend development tasks.

As the project neared completion, I felt the map needed an artistic touch to enhance its visual appeal while also improving the map's functionality. Since the project was planned to launch in phases, with parcels from only one biome available for purchase initially, I proposed adding a "fog of war" system, similar to those in RTS games like Warcraft 3. This "fog of war" would cover all unavailable areas, and focus the user to the available ones. We decided to pursue this idea, and eventually decided to implement it as Clash of Clans-inspired cloud coverage instead of fog.

To implement this, I used Blender to design a system for shaping cloud coverage. By defining fronts, chunks, and large details, I could generate realistic-looking volumetric clouds.

These clouds were then isolated from the landscape and rendered as 2D images. This approach ensured that the clouds looked detailed and fluffy while keeping them lightweight enough for fast load times on the website. The rendered images were then used as textures on a low poly cloud coverage mesh that roughly followed the terrain's contours.

This cloud system allowed for easy modification, making newly available biomes visible in subsequent phases. The low-polygon plane mesh with textured clouds optimized performance, providing an immersive and visually appealing experience for users. This final touch not only enhanced the aesthetic quality of the map but also effectively guided visitors' attention to the areas available for purchase, seamlessly integrating form and function.

The final implementation included a pin system that displayed small logos on occupied parcels. When users navigated the map, pins would dynamically appear on parcels that were zoomed in on, showcasing the logos of their respective owners.

Implementing the pin system required making a communication channel between the 3D world of three.js and the 2D world of React. This was acheived by tracking the points above which the pins should appear, and projecting them to the viewscreen. These projected coordinates were then rendered by React.

The appearance of pins was calibrated based on the zoom level and the value of the parcel. Higher-valued parcels, typically located in prime areas like city centers, would display their logos from a greater distance to draw attention to these hotspots. This approach prevented the map from becoming cluttered with pins when zoomed out, maintaining a clean and navigable interface.

Project "Landsale" was an exciting and transformative project that allowed me to improve my skills in frontend development, realtime 3D graphics, and problem-solving.

Collaborating with a talented team and engaging with stakeholders provided valuable insights and drove the project's success. Despite the project not launching publicly, the journey offered invaluable experience and showcased the potential of combining real-world applications with immersive virtual environments.

The final product, an intricate and visually appealing map, stands as a testament to the power of creative solutions and effective teamwork. I'm proud of what we accomplished and excited to share the demo link for others to explore the virtual island and appreciate the effort behind the project.