AR Birthday Card

This was a personal project I developed to celebrate a family members birthday. The model and animation was developed in Blender. The completed asset was then exported as a gtlf file. This is an open and portable format accepted my many applications frameworks. In this case, I used the AR.js framework to import and view the asset on a webpage.

The printed birthday card opens to reveal a QR code and an AR marker. The QR code directs the mobile device to a webpage page that utilizes AR.js to load the asset and place it into the camera view.

process pipline

While the pipeline of Blender ⇒ gtlf ⇒ AR.js was relatively simple, there were many subtle pitfalls. Preparing the Blender animation to be correctly displayed in AR.js proved to be a very touchy processes. As well, AR.js requires specific (and somewhat obscure) parameters to display the model without z-ordering artifacts.