Adding iris tracking in Spark AR Studio allows you to create effects that change the appearance of someone's eyes, by tracking 3D objects to the irises.
Download this example project to try it out. In the unfinished project, you'll see:
You can adapt the example project to make your own iris tracking AR effects.
You can either use the Patch Editor or scripting to create an effect with iris tracking. We've included instructions and a script for doing both in this guide.
If you haven't used the Patch Editor before, it's worth learning the basics.
Drag the face tracker from the Scene panel into the Patch Editor. You'll see a group of 3 patches: Face Finder, Face Select and Face Follower.
The purple Face Follower patch is usually used to detect and follow the entire face. You'll need to replace this patch with an Eyeball patch, which can detect and follow someone's eyes. To do this:
Here's how your graph will look:
The Eyeball patch has 6 outputs:
For this effect you'll use the Left and Right Iris Position and the Left and Right Iris Rotation output ports.
You'll need to connect these ports to patches that represent the Position and Rotation properties of the left and right iris 3D objects:
To do this:
This should create 4 yellow patches, representing each value:
Here's how this part of your graph will look:
And your finished graph will look like this:
The objects should cover and track the eyes in your finished effect:
In the Assets view, click +, then Create New Script.
You'll see a new script in the Assets panel.
Double-click the script to open it in a text editor, then paste this script:
var FaceTracking = require("FaceTracking"); var IrisTracking = require("IrisTracking"); var Scene = require("Scene"); var leftIris = Scene.root.find("left iris"); var rightIris = Scene.root.find("right iris"); var leftEyeballInfo = IrisTracking.leftEyeball(FaceTracking.face(0)); var rightEyeballInfo = IrisTracking.rightEyeball(FaceTracking.face(0)); leftIris.transform.position = leftEyeballInfo.iris; rightIris.transform.position = rightEyeballInfo.iris; leftIris.transform.rotation = leftEyeballInfo.rotation; rightIris.transform.rotation = rightEyeballInfo.rotation;
Eyeball object stored in
rightEyeballInfo has three properties:
iris, which gives the pupil's central position relative to the face tracker.
center, which gives the position of the center of the whole eyeball relative to the face tracker.
rotation, which gives the rotation of the eyeball.