Face Mask Web AR
Web augmented reality face mask application using 8th wall for professional Canadian hockey team - Edmonton Oilers....
By John Phung
2020-08-20
A Brief Overview
A project completed for a media agency based in Canada for a professional Canadian hockey team - Edmonton Oilers, also sponsored by Ford. Due to the COVID-19 situation and rise in popularity for custom face masks, a web AR application was devised to garner social engagement with try on face mask with different patterns and social sharing - just in time for Hockey season!
The Tech
The tech stack behind relied on 8th wall AR library for facial recognition landmarks and standard javascript, HTML and CSS. The process of integration was fairly straightforward, utilising GLB 3d model formats and ensuring the right scale and position for proper placement of mask over face.
The Features
- Swap different 3D model masks
- Capture photo and share on social media
Challenges
A few challenges included sharing of photos on mobile devices on a browser which is not as straight forward as Apps and watermarking images without loss of resolution for logos. I only just found out that by holding a finger down on an image using ios enables a sharing popup.