Spark AR

Iris Tracking

For this effect, my goal was to do a simple iris texture replacement with one or more triggers to modify the effect. The first thing that came to mind when brainstorming ideas was the Sharingan.

Something that is really great about SparkAR is that so many of the tools and assets you need to get started are already provided. All I needed to do to get started on this project was to add a facetracker to the scene and it becomes immediately placed and hooked up to the facefinder and face select. Then we need to add a facemesh as a child of the facetracker. This lays the groundwork for tracking the materials to my face in-camera.

The entire effect needs to be 2 - 4MB total when exported so the texture for the irises should be a fairly small PNG (256 x 256 px should be fine) with transparency. I threw this together in Illustrator and then imported it as a texture. The next step is to create a material and select the texture we just created from the drop-down menu in the inspector.

We need to set up the irises individually so we can map the texture and material we created to track on the face. To do this we go to the scene tab, click on the iris child object below the facetracker and then in the inspector click the circles next to 3D position and 3D rotation. Clicking on these will create the blue patches in the patch editor that we will need for the next step. In the patch editor create a facefinder, face select, eyeball and then click and drag to link the corresponding iris values to the blue ones we just created. Now the irises are linked and tracked by the face. we should see the texture mapping correctly now.

To set up the trigger to rotate the iris texture we need to create another copy of the facetracker in the patch editor. I’m going to use a blink trigger so we’ll add a blink patch, a switch, a pulse, an animation, a transition and we need two more copies of the iris 3D rotation values in the patch editor so we’ll need to click on the iris tracker and then click on the circles in the inspector to create the representative patches. Once we’ve created all of these we can start hooking them all up. We can connect the blink trigger to the face tracker and to the switch to flip so when we blink the switch is flipped on/off accordingly. in the pulse we only want to map the turned on value because we don’t need to stop or reverse the effect, we just want it to toggle on → complete one rotation. I’ve also got the pulse hooked up to the reset parameter in the animation so that if a user blinks multiple times before the animation can complete it starts over from the beginning rather than queueing up a lot of rotations. In the Transition patch we need to set an end value for the rotation of the Z value. 0 is the start position and 360 is one complete revolution. We want to select Quadratic in/out for the curve because it will ease the animation and make it more pleasant to look at by slowing the ends and speeding up the middle. (You can learn more about easing functions here). Finally we’ll hook up each iris rotation patch to the transition’s progress values. If you use the facetime camera and blink you should see the blink trigger execute and rotate the texture.

Ultimately this is what the effect should look like once all of the patches have been properly connected.