The app was inspired by Khoi's trip to Vietnam with his father.
"My dad escaped Vietnam when he was 15 years old. He took us to his childhood home. Led us through the back alleys that he and family snuck through to get to the U.S. embassy. He showed me the exact spot they ate sandwiches while waiting for the helicopters that would save them."
Moments like these are really special, especially when shared with family and friends. But we don't get to do it often with constraints like travel and busy schedules. What if there was a way to still experience these types of moments using technology and the devices we use everyday.
The main reason for building this app is that we want people to share and experience real world journeys. Humans are spatial creatures, yet more and more of our lives are lived out from our seats and over the internet. It's time to bring people back exploring and experiencing reality. But that doesn't mean we have to move away from the digital world. We believe we can achieve this by combining digital and physical stories for an augmented life experience.
The User Journey
Two paths are available on the home screen: view someone's journey (a friend or family member) or create your own journey to share with others. When "Start a Journey" is selected, you see a list of existing journeys from your friends and family to select from. For this demo we only have "Dad's College" available for the experience. Once "Dad's College" is selected, you will see a profile description which includes a photo of the person who created the journey (in this case it is the dad), audio excerpt on the overall experience (optional), and a written note to the journey viewer. The idea is to create a personalized shared experience for the person who will be experiencing it.
Once you select "begin the path," the app will direct you to the starting point where yellow arrows will guide you to the first way-finder spot. This spot is the location that the journey maker has selected to highlight and talk about. The journey maker can take photos, leave notes, or add audio excerpts for the journey viewer to experience. The yellow arrows on the ground will continue to appear on the ground showing the full path of the journey that includes all the way-finder location spots. The journey viewer can also take selfies in those location spots to contribute.
The Web Development Story
We decided to build our application for WebAR, as it is an upcoming technology, which is available freely to developers and audience. The browser is a powerful tool that can be used across desktop and mobile, and it was our intention to reach out to as many people as we could using this platform.
Three.js and A-frame are the most popular frameworks for 3D graphics, with an active community and good documentation. Most of our team hadn’t previously worked with these technologies but we were particularly excited to learn and apply them to build something useful.
The most fulfilling part of the project was our vision behind it, which was to connect people through shared memories. How often have we wished to live a loved one’s journey and share their moments?
Technically, we faced several hurdles in the integration of the geo-spatial tracking code and the rendering of the graphic objects. Organizing the objects to achieve the desired look and feel with appropriate camera movement took several iterations. In addition, we worked with external images and 3D models apart from native text and geometry, which added a layer of complication to the application and needed careful consideration. Moreover, as three.js and A-frame have a smaller and niche audience, occasionally it was difficult to find suggestions to technical bugs we faced.
Overall, at the end of the hackathon, the application was what we envisioned it to be in the design phase. We implemented the major features we had planned such as accurate navigation, waypoint markers for a path, and dynamic content rendering at a location.
Future improvements include enhanced capabilities to add and retrieve memories, more sample journeys and richer media support such as audio and video.
Creative Commons and free assets.
Audio: https://www.bensound.com/royalty-free-music/track/a-new-beginning (track for A-frame app)
https://freesound.org (background track in unity app)
Created by team: Voice over file, 3D models, 2D UI, iconography and photographs.