Project Overview

I collaborated with Liquona on an augmented reality (AR) invitation for a VMware event. This static front-end project utilized smartphone cameras for engaging 3D/AR interactions with physical objects. Users received a link to our web app, enabling them to scan a QR code on printed material, which was then replaced with a 3D model in real-time. By moving their cameras, users could view the model from all angles.

Key Challenges

  • In-browser Augmented Reality: This project allowed me to explore new applications of my web development skills using three.js.
  • Device Support: Ensuring compatibility with recent browsers on modern Android and iOS smartphones posed a significant challenge, as physical interactions are difficult to test on emulators.
  • Performance: Achieving reliable, smooth performance at a decent frame rate was crucial for the success of this project.

Solution

I developed a front-end web app that utilized custom 3D models provided by Liquona, integrating the user’s camera to produce real-time AR in the browser. Collaborating closely with Liquona, we optimized the 3D models for fast loading times and high frame rates across all major browsers and supported hardware.

Technical Implementation

  • three.js: Used for achieving augmented reality and real-time 3D animation in the web app.
  • vue.js: Employed for wrapping and integrating three.js code into the 2D user interface.
  • Infrastructure: Implemented using nginx, Docker, Docker Swarm for container orchestration, and continuous integration and deployment.

Results

The final product delivered reliable and high-performing augmented reality in a web application, providing a fun and engaging user experience. The mobile first responsive user interface built in vue provided a consistent user experience on all supported devices.

Thoughts and feelings

Working on unique projects with quick turnarounds is always satisfying. Achieving stability on iOS devices was challenging, but through persistence and several iterations, we succeeded. Projects that combine physical and digital interfaces captivate me, and I was pleasantly surprised by the reliability and performance of browser-based AR. Upcoming standards promise even better in-browser AR experiences in future.