Yallie Likes to Move it Move it

Our favorite mascot has taken to the Augmented Reality space and throwing down everything he has. And to boot, it all works in a browser! With platforms like 8th Wall, Zapworks, or Onirix, webAR has made it incredibly easy for users to jump into a branded AR experience, snap a pic with a custom face filter, or make your advertisement images come alive.

For this lab, we took to using 8th wall as our webAR platform and A-frame as the coding framework and a then popped in a rigged version of Yallie into Adobe's mixamo to add some funky animations to him.

This platform is probably the most varied of all the tools at offer. We have options like hand-tracking, face-tracking, or image-tracking to fix 3D models to these real world objects. There's also an ability to register the sky and have massive 3D objects flying across the sky line. And finally 8th Wall boasts the best world tracking (Simultaneous Localization and Mapping or SLAM) in the webAR world. So whole virtual worlds are interact-able right through your phone's browser.

A-frame as a framework makes quick work of a project like this as we just make a scene, a camera (that's controlled by the motion of your phone), load our 3D model of Yallie with all his dance moves. And finally we place an invisible box around our scene so that when our user touches the screen, we can find where on the box this action happened and place yallie right there. The really nice fact about this framework is that it looks startingly like regular HTML and in fact we place our A-frame tags right in the body of our HTML!

But being the crafty programmers that we are, we can develop combine webAR with much more technical frameworks (not for the faint of heart) like Threejs or React Three Fiber. This allows us to have full control over the materials, functionality, and interactivity of our 3D scenes to build pretty much whatever we'd like!

Finally, we harnessed the power of Adobe's free 3D animation tool to rig our big blue guy to leave it all on the dance floor. But it's not just dancing that we can do, there's also a whole host of other prebuilt animations that we can incorporate. Be it running, jumping, fighting, the library is vast and enables us to quickly add new animations to any rigged humanoid model that we have! The opportunities are endless.

That about cuts it. With the mainstream adoption of VR/AR still emerging, it's more important than ever to see the possibilities that webAR has. Just like websites in the early 2000s, AR is seemingly that next evolution of digital branding. And as the technology gets better and better, we might just see the physical world becoming less realized without the digital.

Scan our QR code here!