Zappar face tracking tutorial
Blog -
In our last tutorial, we went over how to use ZapWorks image tracking. In this tutorial, we’ll see how to create a web-based face tracking tutorial using ZapWorks Studio.
The inspiration behind this demo is the legendary Arnold Schwarzenegger from Predator.
1. If you’ve gone through our previous tutorial on ZapWorks, skip this step. Otherwise, sign up for ZapWorks Studio (free for 30 days) and download it onto your computer. (Optional step: review the ZapWorks documentation page).
2. Download the following assets to follow along with the tutorial:
- Animated helicopter (fbx format)
- War Helmet (gltf format)
- Gun 1 (gltf format)
- Gun 2 (gltf format)
- Warpaint
3. Open the ZapWorks Studio program on your computer. Press ‘New Project’, select ‘Face Tracking 3D Object’ and name your project.
4. Delete what you don’t need by left-clicking on ‘Zappar Helmet’ and selecting ‘Delete’.
5. Put in the war helmet model by dragging the glb and gltf files from your Finder into the top right box under ‘Media Library’, selecting ‘Unlit Material’, and dragging material_diffuse.jpg into the diffuse input field. Finally, click ‘Finish’.
6. In order to put the model on top of the head, find the model under ‘Symbol Definitions’ in the bottom right and drag as a child of? ‘Origin’ and a sibling of ‘Head Mask’.
7. Now you’ll need to rearrange the attributes so that the helmet fits properly on top of the head. You can either change attributes in the top bar or in the properties fields. In the top bar, the buttons ‘s-scale’, ‘r-rotation’, ‘p-position,’ when clicked, will allow you to adjust the model. In the properties, you can more finely attune the scale, rotation, and position of the model. Whichever tool you use, adjust the helmet models so it looks like the image below.
8. Using the same instructions as the helmet, drag the gltf and glb model of a gun model into the Media Library, choose ‘Unlit Materials’, and drag all the exports into the first input field. Then drag the symbol into the hierarchy as a child of ‘Origin’. Reposition the gun so it’s to one side of the face.
9. Do the same thing with the second gun model and reposition it so it is on the other side of the face. By now, your scene should look like this:
10. Now add the helicopter by dragging the fbx file into ‘Media Library’, choose ‘Unlit Material’, click ‘Finish’ and drag the symbol into the hierarchy on the left side. Reposition the helicopter above and slightly behind the head.
11. To animate the helicopter model, follow this video made by the Zappar team.
12. Once you’ve added the timeline, when pressing play, you should see the helicopter blades moving, but there’s one more step. Left-click on the ‘Face Group’ folder in the hierarchy and, at the bottom, left-click on ‘Add’. Select ‘On First Seen > Play Timeline > animController > animTimeline’ and then click the ‘From start’ and ‘Loop’ toggles.
13. Now is a good time to write a commit, so on the top bar, click the ‘Commit’ button and write your commit message.
14. To add some war paint to the face, right-click the origin folder in the hierarchy and select > New > Tracking > Face Paint. Drag the warpaint image you download into the Media Library. Then select the Face Paint element and in the properties panel at the bottom, change the material to warpaint31.jpg. You should now see the face paint on the face.
15. To make sure everything is working properly, click ‘Preview,’ which requires you to log into your ZapWorks account. Once the preview application is running, the camera feed should turn on and show the helmet, the two guns, the helicopter, and the facepaint around your face.
16. If you’re happy with what you’ve built so far, the next step is to publish your project. But before you can publish, you’ll need to create a project on your ZapWorks online account. Once logged in, create a new project by clicking on the big red button at the top, name your project, and select ‘Studio’. In the next step, choose ‘WebAR QR code’ and then select ‘Create Project.’
17. Back in ZapWorks Studio, click the ‘Publish’ button, right next to the ‘Preview’ button. Select the name of your project, press ‘Choose Selected’ and then ‘Publish’.
18. Go back to your browser to your ZapWorks projects page and select ‘Go to Triggers.’ Click ‘PNG’ next to the QR code, so that it downloads onto your computer.
19. Either print it out or view the QR code on your computer. By pointing your phone’s camera at the QR code, you will have the option to follow a link in your browser.
20. Tap the popup and your browser should open with the Zappar branded launch page. Tap ‘Launch’ and your camera feed will begin. Point the camera at your face and you should see everything working properly.
That’s it! You now have a WebAR face tracking scene running directly from the browser that you can share with your friends and family. Next, try building your own scene. We’d love to see what you come up with!
If you’re interested in developing WebAR applications with Zappar’s technology for big brands like Sony, Disney, Warner Bros, Universal, and others, sign up as a creator for Poplar Studio and get paid to build amazing AR experiences.
