In this example, we will demonstrate how to implement an effect that changes the user's eye color using the pupil tracking feature.

  • First, go to File → Create new effect

  • Select the Root and in Node properties select the Position mode to Position in camera space.

  • Next, add the new node Node → Add Empty

  • Select that Node and in menu bar go to Add Component and select Face Position component

  • Backward incompatible, to fix an old version of this effect, move it to face space.

Now, we need to add two quads, for the left and right eye.

  • Select the Node and add the first quad Node → Add Quad

  • Select new Quad, click Node → Rename. Name the new quad "LeftEye"

  • Select the LeftEye quad and in Node properties set the Depth to 1

Do the same for a second quad:

  • Select Node in Node hierarchy and click node Node → Add Quad

  • Select new Quad, click Node → Rename. Name the new quad "RightEye"

  • Select the RightEye quad and in Node properties set the Depth to 1

The Node hierarchy should now look like this:

  • Next, select Root in the Node hierarchy

  • Go to File → Add FBX and select the eyes.fbx from the eye_color_example folder

  • Select the node RootNode → group → node in the Node hierarchy

  • In Node properties change the Mesh driver to Vertices 2D - Eyes

The LeftEye and RightEye quads will be used to display the new iris colors, and eyes.fbx will be used for eyelid occlusion.

To track the user's pupils:

  • Select the LeftEye quad

  • In menu bar go to Add Component and select Left Eye Position component

Do the same for right eye:

  • Select the RightEye quad

  • In menu bar go to Add Component and select Right Eye Position component

Next, add the texture:

  • In the Textures tab click Add → Texture

  • Select the iris_mask.png texture from the eye_color_example folder.

  • The iris mask texture has to be uncompressed (PNG 100%) to preserve the alpha channel

Different shaders and blending modes can be used, the following is our recommendation for the most natural-looking results.

  • Select the node RootNode → group → node in the Node hierarchy

  • In the Material properties disable the RGB write, Alpha write and Depth test options

  • Set any shader, we selected Unlit Color for readability.

  • Only depth will be used The eye mask should now be invisible if it is not, click Reload

  • Select the LeftEye quad

  • In the Material properties disable the Depth write option

  • Set the Blend mode to Screen

  • Set the Culling mode to Off

  • Set the Shader to Unlit Texture & Color

  • For the Diffuse texture select iris_mask.png

  • For Color set the hex value "001D38"

  • Select the RightEye quad

  • Repeat the above steps, we use the same color for both eyes in this example, for a heterochromia effect select a different color in the last step.

This is the final result:

Download this example with all assets


Did this answer your question?