Skip to main content

Shoe Try-On Quick Setup

Learn how to set up shoe try-on effect in DeepAR Studio​


The basic setup for a shoe try-on effect is as follows:​

Foot Try-On

Starting from an empty effect, switch to Camera space, add an empty node named Left Foot, and attach a Foot Position component to this node.

Foot Try-On 1

This will show you the foot guide in the editor:

Foot Try-On 2

Add a Foot Occluder Mesh from the Assets Menu.

Foot Try-On 3

Drag it into the scene as a child of your Foot Tracking Node and set up the Occluder (for more information on creating a basic occluder, see Docs).

Set the X scale to -1 to mirror the mesh to match the guide.

Foot Try-On 4

Repeat the necessary steps for the other foot.

Foot Try-On 5

You can temporarily disable the foot tracking component to offset the objects so they don't overlap. This will not impact the tracking.

Foot Try-On 6

You can then add your shoe model as a chid of the foot tracking object. Scale it according to the the guide and setup the materials. Create a mirrored duplicate for the other foot.

Foot Try-On 7

To preview the foot tracking effect start the Web preview:

Foot Try-On 8

Foot Try-On 9

You can run your new shoe try on effect on your web page with the code from our Shoe Try-On GitHub example.