A Holiday Card Reimagined with AR and WebGL

When I joined the company, there was a tradition of creating holiday cards to spread some festive spirit. Typically, this involved designing simple 2D graphics, printing them, and sending them out to employees and clients. However, in my first year, I saw an opportunity to do something different—something that would showcase the potential of creative technology.

Instead of settling for the standard approach, I teamed up with our graphic designer to create an experience that blended 3D design with Augmented Reality (AR). I didn’t want to spend time simply modeling a car in the snow—anyone could do that. I wanted the project to feel modern, interactive, and inspiring. That’s when I began exploring WebGL libraries, specifically A-Frame and AR.js, to build an AR-powered holiday card that could run seamlessly as a web app.

placeholder image 1 placeholder image 2
AR.js + A-Frame and ARCode

Challenges and Solutions

  1. Optimization: Making 3D content web-friendly is no small feat. I had to dive deep into WebGL profiling, reduce draw calls, and eliminate artifacts caused by exporting 3D models. Every vertex and texture had to be optimized for performance.

  2. QR Code Recognition: Ensuring accurate and reliable ‘humming distance’ (the ideal scanning range) for QR codes was another challenge. It needed to work effectively across multiple phones and various lighting conditions.

  3. Balancing Performance and Quality: Web apps have limitations, especially for AR. Therefore, I focused on creating a visually engaging experience without sacrificing load times or responsiveness.

The entire project took about a week from ideation to execution. The result? A holiday card that exceeded expectations—a simple QR scan brought a festive 3D scene to life through AR, directly in the browser. It amazed both employees and clients, showcasing not just the holiday spirit, but also the power of blending creativity with technology.

What started as a small idea turned into a proof of concept for what AR and WebGL could achieve in the future. It served as a great reminder that sometimes, even small projects can inspire significant innovation.

Updated: