DEV Community

Cover image for How to Create an AR Makeup Try-On Tool in 15 Minutes or Less [Tutorial]
echo3D for echo3D

Posted on • Edited on

How to Create an AR Makeup Try-On Tool in 15 Minutes or Less [Tutorial]

Looking to create a makeup try-on tool to virtually try makeup in augmented reality (AR)? This simple face makeup demo created with Unity, AR Foundation, and echo3D is a great place to start. The full demo can also be found on echoAR’s GitHub.

1.png

Register

Don’t have an API key? Make sure to register for FREE at echo3D.

Setup

  • Create a new Unity project.
  • Clone the Unity-ARFoundation-echoAR sample code.
  • Open the sample scene under AR Foundation\Scenes\FaceTracking\FaceMesh.unity.
  • Set your API key in echoAR.cs inside the echoAR\echoAR.prefab using the the inspector.
  • Select AR Session Origin in the hierarchy. Double click FaceMeshPrefab under AR Face Manager in the inspector. Set Material Size to 1
  • Add an image hologram by uploading the makeup.png file from the images folder to the echo3D console.
  • Overwrite the existing echoAR/CustomBehaviour.cs script with the new CustomBehaviour.cs file.

Create Makeup Texture

Make sure to use an Alpha transparent texture as a custom shader. The example texture contains eye shadows, eye liners, highlight, lipstick or other coloring. When running the app, it detects a face and overlays the face material.

To create a makeup texture on your own, open the .psd file in the model folder. This model is provided by Google’s ARCore Augmented Faces Demo.

2.png

Learn more

Refer to our documentation to learn more about how to use Unity and echoAR.

Support

Feel free to reach out at support@echo3D.co or join our support channel on Slack.

Screenshot

3.gif


echo3D (http://www.echo3D.co; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

4.png

Top comments (1)

Collapse
 
lakhwin14346663 profile image
LAKHWINDER SINGH