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 BlendergtlfAR.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.