HXRC Team: Designing an Interactive 3D Map for Jontas Sport & Eko Park

Text by Alma Hoque and Samuli Haltimo 

Hi, I’m Alma Hoque, a 3D artist at the Helsinki XR Center, where I’ve been working for nearly a year. I graduated in May 2024 from the XR Design degree program at Metropolia University of Applied Sciences and also completed my internship at HXRC. Jontas Interactive 3D Map was one the many projects that I have had the chance to work with during my internship. The Jontas Interactive 3D Map was one of the many projects I had the opportunity to work on during my internship. Next, I’ll share more about Project Jontas and its role in the Virtual Nature project.

The Virtual Nature project aims to guide and assist tourism operators in producing virtual nature tourism packages for international markets, pilot them with different target groups and find new and potential sales channels for the products. Project Jontas was one of the many pilot projects that Helsinki XR Center developed during 2024. 

Our client in this project was Jontas Sport & Eko Park, a brand new wellness and experience village in Sipoo, Finland, which is estimated to be open to the public in 2026. The park will feature a football golf course along with various exercise areas. Additionally, it will serve as a showcase for sustainable construction solutions. Our task was to design a concept that the client could use to demonstrate future land-use possibilities in Jontas Sport & Eko Park to potential investors.

From drafts to 3D – How it all came together

We quickly began drafting the possible final product with our amazing development team Janina Rannikko, Emmi Isokirmo, Juho Puurunen, Samuli Haltimo, Ville Varhala and myself. From the very beginning, we all agreed to move forward with the idea of creating an interactive 3D map.

Interactive 3D maps provide a fun and engaging way to showcase what a particular area has to offer, and our team felt this was the suitable approach. To enhance interactivity, we implemented a feature that allows users to switch between different variations of selected areas. The client had a vision to enable the future sponsors to see how their solutions could possibly look like at Jontas Sport & Eko Park.

First, I created 2D drafts of the map, outlining all the key elements that needed to be included and estimating the space each would occupy. I ensured that the layout aligned with the client’s vision, maintaining both accuracy and clarity. I continued my work by listing how many variations certain areas needed and also what would be possible within the given time frame. This project lasted around 3,5 months. In the beginning, I also started to plan the art style for the 3D Map, and very soon decided to continue with semi low poly assets. I was inspired by flyAR Augmented Reality Studio’s Elävät Juuret AR application, which effectively presents a vast area around Lake Tuusula in Finland in a clear and informative way. Similarly, I wanted the Jontas Map to be both visually clear and engaging, ensuring an enjoyable user experience.

Concepting & deciding the borders for the 3D Map.

I wanted the map’s art style to avoid looking too cartoonish, as it would be presented to potential funders. Additionally, since I was designing for WebGL, I needed to ensure smooth performance.

First 3D drafts.

Ultimately, designing both the 3D elements and the UI was a smooth process. I encountered a few minor challenges along the way but always managed to find solutions, thanks to timely feedback and support. Throughout the project, I gained valuable experience working with glTF and received great optimization tips from Emmi Isokirmo. I also was responsible for the communication between the client and Helsinki XR Center.

For 3D-modeling, I used Blender 4.1. Most of the assets I modeled by myself but cars, lamp-posts, flowers, and playground assets were from Sketchfab. One of the major struggles during the project was not modeling the trees by myself from the very beginning. I started with some ready-made trees from Sketchfab. However, this decision became a challenge when I started baking the lights in Unity and immediately ran into issues. Fortunately, I quickly realized the problem and switched to using self-made trees, which resolved the issue.

Assets mostly ready and the amount of model variations for all the areas.

Drafting the garden variations.

Light baking in Unity.

The final product was a WebGL build made with Unity 2022.3.21f1. I was mostly bringing 3D elements to Unity and also baked lights and implemented my UI designs there. All the 3D models were first exported from Blender as embedded glTF files, but me and my team quickly realized that Unity had some issues with the file formats. A quick fix was to change all of them to glTF binary files.

A vast majority of my time went into optimizing the 3D Map. At some point the number of batches in Unity was 1494, but luckily we were able to decrease the number to around 200-250 by combining lots of models together. Some models sourced from Sketchfab required significant topology fixes. When it comes to batches or draw calls, the goal is to combine multiple meshes into a single draw call rather than multiple separate ones. Draw calls indicate how many times Unity renders objects in a scene, and this number can increase significantly if there are too many materials present.

Final adjustments after the client’s feedback.

In the Jontas Interactive 3D Map, users can explore the environment, interact with specific areas, and modify layouts or models while learning about the possibilities each area offers. A huge thanks goes to our incredible coders — especially Samuli Haltimo — for bringing these functionalities to life in the final product.

Handing over to Samuli to tell us about the code design and development process:

Hey, I’m Samuli Haltimo, a game developer intern at Helsinki XR Center. I am still studying Game Development in Metropolia and expect to graduate early 2025. For this project, I was responsible for both the code design and development. My work built on the foundation laid by Ville Varhala, who had previously contributed to the project as an intern. I was given a lot of freedom to design the code as I saw fit, which made this project a great learning experience.

This was my first time developing a WebGL-based application in Unity, which presented its own challenges. Some features that worked smoothly in mobile-targeted builds didn’t function as expected in the WebGL version. Luckily, our code lead Juho Puurunen was highly experienced with WebGL builds, so I received valuable support from him. In the end, we were able to achieve a final product that performed similarly to a downloadable application.

I was also responsible for designing code for Tytyri, which was another pilot project part of The Virtual Nature project, while simultaneously working on Jontas. This dual responsibility made the design process an exciting challenge, as I aimed to create reusable code for both projects. One area in particular, the camera movement, was shared between the two projects. Although small adjustments were needed for each, the core system was designed to function smoothly in both. Aside from the camera functionality, the projects were quite different. This was also my first experience designing code architecture at such a large scale, so there were certainly challenges along the way. However, now that both projects are complete, I feel I’ve successfully overcome those challenges, and I’m pleased with the result.

Final thoughts

Project Jontas was interesting and fun to work with, and the communication between the client and Helsinki XR Center worked extremely smoothly. This was one of the rare times I had the chance to concept and create quite freely as a 3D artist. I am happy with the outcome and very grateful to have this chance to work with such an amazing team and project.

To see previous news about our trainees’ projects, head over to the Trainee news section.

Follow us on social media for more posts: Facebook | LinkedIn | Twitter | Instagram