Background
My Roles
ARVR Designer, Developer
Duration
2024 Sep
Project Type
Side Project
on Meta Quest
on Meta Quest
Tool
Unity, Cesium, Blender, Figma
What it does
Design concept
As a passionate fan of YouTube, I wanted to elevate the video-watching experience by making it more immersive and informative. With Navideo, I aimed to bridge the gap between video content and geographic awareness. This VR experience enables users to visualize the exact locations featured in videos, such as travel vlogs, allowing them to better understand where each place is on a 3D map. My goal is to make watching videos more engaging and interactive for the audience. By providing a real-time map that syncs with the video content, users can explore destinations as they appear in the video, adding an exciting layer of context and exploration.
User flow
To transform my abstract idea into a clear picture, I structured the user flow for Navideo, ensuring intuitive navigation and interaction throughout the journey.
UI
Designing a UI for an AR/VR experience like Navideo presents limitless possibilities, but I prioritized simplicity and familiarity to ensure ease of use. The UI draws inspiration from well-established video platforms, making it intuitive for users who are already familiar with navigating video content.
Demo Video
After days of trial and error, I finally made it! This video demo showcases the full functionality of Navideo, where an immersive VR experience combines a travel vlog with a real-time, interactive 3D map. As the video progresses, you can see how the map updates to show the exact tourist spots being featured, enhancing user awareness of the location.
Travel Video Source: 12 Things to Do in Vancouver for First Time Visitors by Must Do Canada
How I built it
Unity
I used the Meta XR All-in-One SDK to create the core VR experience, leveraging Canvas for the UI, C# for scripting, and Unity Animator for the map marker spinning animation.
Cesium
I integrated Cesium's photorealistic 3D tiles for real-world 3D mapping. Sub-scenes were used to load and manage location data in sync with the video content.
Blender, Figma
I designed custom map pins and UI elements, using Blender for 3D models and Figma for UI layout and styling.
Challenges
Outdated Unity Version
I initially encountered problems with compatibility issues with the Meta SDK due to not updating to the latest version of Unity, which taught me a big lesson.
Missing Data for Location
Originally, I wanted to create a map for the Banff region in Alberta. Unfortunately, Banff’s tiles were missing in Cesium’s database, so I had to find another location.
Limited Resources
I faced challenges finding comprehensive tutorials for Cesium and VR integration, which slowed down the development process and needed to make a few changes to meet my expectations.
Accomplishments
Here are some accomplishments that I am proud of in this project:
Explore Cesium
Cesium is an outstanding tool for creating map-based applications. I am excited to have had the opportunity to explore and integrate this tool into my project. It opened up new possibilities for me in 3D mapping and georeferenced data.
My first VR project
While I’ve developed a few AR projects in the past, Navideo marks my first step into VR development. Even though there’s still a lot for me to learn and improve, I’m satisfied with the outcome and proud of the progress I've made.
Innovative Concept
The idea came to me while using an app called Wooorld on Meta Quest, which inspired me to combine navigation and video content. I love this concept and plan to continue developing more map and navigation applications in the future.
Reflection
What’s next
I plan to further develop Navideo by making the 3D map more interactive, allowing users to click on specific locations while watching the video to explore additional information or view other related content. This will enhance user engagement and make the experience even more immersive.
Learnings
The Motion sickness Issue
As I explored movement methods in AR applications through Navideo, I found that certain movements can cause significant discomfort and dizziness for users. In particular, continuous, sudden, or floating movements can lead to uncomfortable experiences. While AR offers transformative experiences, such as simulated flight, motion sickness can limit these possibilities. I aim to address this challenge by refining movement mechanics in future projects to enhance engagement and accessibility for users.
The Challenges of AR/VR Design
Designing for AR/VR is a whole new world compared to traditional desktop or mobile UI. In AR/VR, you have an entire 360-degree space to work with, and the possibilities are endless. However, this freedom also presents significant challenges, especially when creating understandable and intuitive interfaces. It’s much more intricate than designing 2D UI, but this "wild-west" environment is what excites me the most. I can’t wait to explore and experiment with more designs in the AR/VR space!
