New Murabba Interactive map
New Murabba represents Riyadh’s bold vision for a modern, future-ready downtown. Blending cutting-edge technology with Saudi Arabia’s deep cultural heritage, this landmark development is set to become one of the world’s most remarkable destinations to live, work, and flourish.
To bring this vision to life at an event exhibition, Squint Opera was tasked with creating an interactive map of New Murabba. The map was designed to engage, educate, and inform visitors about the diverse districts that make up the project.
Pre production
At the outset of the project, 3D files, planning documents, and concept visuals were provided as reference materials. Since New Murabba remains in the concept phase, many elements were open to interpretation, requiring our team to stay highly attentive to the accuracy of landmarks and infrastructure throughout the process.
The 3D files we received were large, unoptimized, and required extensive cleanup. Establishing a streamlined system took time but was essential for maintaining agility during the five-week production schedule.
The development team built the experience in Unity, making close collaboration critical to ensure smooth delivery and prevent issues in the final build. Because the installation’s output resolution had not yet been confirmed, all assets were maintained in a 1:1 aspect ratio until the final specifications were determined.
Building a system
Building the 3D scene of New Murabba came with several challenges. The original files provided were extremely large, which significantly slowed down the workflow. Both Cinema 4D and 3ds Max struggled to handle the heavy data efficiently, leading to performance issues. To overcome this, we explored and tested multiple solutions aimed at optimizing and accelerating the process.
Procedural Shading
Redshift was used to calculate a single shader for the terrain, driven by vertex maps. Multiple vertex maps were created, forming a flexible system that could be adjusted quickly. Elements such as grass, vegetation, pathways, and sand were dynamically controlled based on their proximity to the vertex maps referenced within the Redshift shader. Each vertex map was connected to the unified shader, which streamlined the workflow. These same vertex maps also served as references for distributing 3D vegetation through cloners and proxies.
Execution
Experimenting and building different systems created a foundation to be agile. Vegetation, grass and the look of the terrain could easily be changed. Myself and the creative director (Reuben) meet daily to iterate on the final look. Each region required a separate camera animation to be triggered in app to allow users to see each district in detail.
Camera Animation
Before texturing and lighting were applied, I exported pre-visualized camera movements for the team to review and provide feedback on. This approach allowed us to refine and adjust camera motions efficiently, without the need to render textures or lighting at that stage. Working closely with the creative director, I also developed creative solutions to ensure the visuals aligned with the required aspect ratio and final delivery resolution.
Design & UI
UI played a crucial role in shaping the user experience when navigating the different districts of Murabba. To start, I created a basic placeholder layout to map out the functionality. Drawing on my background in digital design, I was able to mock up an initial UI concept. However, balancing UI development with the demands of 3D production proved challenging, so a dedicated designer was brought in to support the process.
My experience in graphic and digital design enabled me to provide clear direction to the designer. I supplied a working prototype of the UI along with a breakdown of the districts that needed emphasis. This gave the designer a structured overview of the moving parts, helping them develop a cohesive interface that delivered an intuitive and engaging user experience.
After Effects & Neat Video AI Denoiser
The third-party plugin Neat Video Denoiser was instrumental in reducing render times. Certain areas of the 3D render initially contained noise, and achieving clean, high-resolution outputs would have required heavy processing and significant time. By integrating Neat Video Denoiser, we were able to lower sample rates without compromising quality, ultimately saving dozens of hours in rendering. The final image sequences were then denoised and color-corrected in After Effects.
Editing techniques in After Effects
The app needed to zoom in and out of each district. Rendering both the “Zoom in” and “Zoom Out” would have been time consuming especially if the camera needed to be amended. The “Zoom out sequence” is the “Zoom in” time reversed in After Effects. I was able to keep the whole process agile by using simple video editing techniques to both the “zoom in” and “zoom out” from one camera animation.
Building in Unity
The application was built in Unity by the developer on our team. Working closely together, we aligned all assets to ensure a seamless final delivery. Throughout the process, we tested multiple formats and established a pipeline that was both efficient and agile, supporting smooth production from start to finish.
