AR Postcards

Taking the way you share your travels to the next level using augmented reality.

CPSC 581 - Human Computer Interaction II
University of Calgary, Fall 2023

Ariel Lin, Britney Phan, Alokik Kinra, Yvonne Ng

Live Demo

Source Code

Concept Video

Demo Video

Concept Sketches

My concept sketches involved the enhancement of collaborative activies like games, music, and tutorials. I believe that with the recent progressions in remote work, we're still lacking in a real recreation of the aspect that makes things fun, especially when other people are involved.

I brainstormed ideas that tried to go beyond the surface of voice and text, and hoped to recreate the experience of enjoying an in-person group activity through augmented and virtual reality.

Refined Sketches

When sharing our travels with friends and family, the main form of communication involves sending images and text. We took Britney's initial "location sticker" idea and transformed it into our postcard one.

From the traditional handwritten letter to current digital media, our group aimed to take the classic line of "wish you were here!" on a postcard, to the next level.

Rotoscope Sketch

After further developing our idea, we imagined a scenario where someone could take a picture of a scene (monuments, streets, etc.) and then tried to visualize the process of sharing them through postcards. The core concept we wanted to convey was the landmark transformation, and how it would "spring to life" from a 2D image into a 3D interactable object.

Final Design & Implementation

Our final design was implemented on Glitch as a Node app using HTML, CSS, and JavaScript. It creates a socket connection, which allows the postcards to be saved and viewable by others. We integrated a teachable machine to predict the location of a user's photos, and leveraged A-Frame for model viewing in AR and VR.

Due to time constraints, we focused on implementing the 2D to 3D transition without the addition of a spoken message, instead opting for regular text in our final design. In addition, pre-loaded assets were used instead of a full landmark to object recognition and conversion for the same reasons. In total, we achieved the following in our final implementation:

Instant Send and Receive
Users can send and receive postcards instantly, facilitating swift communication and share experiences in real time.
3D Landmarks
Transforms regular postcards into immersive 3D experiences, offering users a vivid and engaging experience.
Multi-User Viewing
Supports multi-user interaction, allowing many individuals to view and engage with the same postcard simultaneously.

Contribution

My biggest contributions to the team were in the creative aspects of the project. From further developing Britney's location sticker idea, I ideated its refinements and created the rotoscope sketches. I also created the concept and demo videos by leading their direction, editing, and additional artistic assets. Footage was mainly mine, and supplemented by my group members (acting and additional filming). I also created the front-facing media and branding of our project. This includes the banners, thumbnails, and props that were made as needed.