Everything you need to know to create an interactive augmented reality experience.
There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.
In this tutorial, you'll learn how to:
3D objects have to be created in a 3D modeling program, but we've given you the objects you need for this tutorial - download the sample content to follow along. If you open the finished effect, you'll see the effect you're going to build includes a pair of glasses with animated lenses.
It's worth learning to create a basic mask effect before building effects with 3D objects.
Open Spark AR Studio and click Create New Project.
To map the 3D objects you're going to import to your face, you'll need a face tracker. Click Insert, select Face Tracker, then select Insert.
You should now see axes tracking your face in the Viewport and a face tracker listed in the Scene tab.
The glasses come in 2 parts: the frames and the lenses. You're going to start with the frames and insert the lenses later.
To make sure you can apply transformations to both the frames and the lenses as if they're one object, you'll need to group them. Use a null object to do this. The null object acts like a container. If you make objects the children of a null object, any transformations you apply to the null object are applied to the container, which transforms the children.
To insert a null object as a child of the face tracker:
You should now see the null object in the Scene tab.
To help you keep track of the objects in your scene, change the name of the null object to Glasses.
To import the frames and insert them as a child of the null object:
You should see the frames in the Viewport and in the Simulator.
In the Scene tab, you should see 2 new objects nested below the null object: a 3D object instance called frames and a mesh, also called frames.
You should also see frames listed in the Assets panel, because 3D objects are treated like assets. If you expand it and select its child, you'll see that the description in the Inspector panel says 3D Object (Master). This master object was automatically instantiated, which means that a clone of it was created and inserted into the scene. This is what you can see in the Scene tab.
If you wanted to insert more instances, you'd right-click on the master object and select Instantiate from the menu
If you turn your head to the side, you'll see that the arms of the glasses are visible through your face. In real life, the arms of your glasses would be hidden from view by your head.
To make this effect more realistic, you need to hide or occlude the arms using a 3D object called an occluder. There's one in the sample folder.
To insert the occluder:
You should now see a model of a head tracking your face in the scene and 2 objects called head_occluder in the Scene tab. Rename the first one head_occluder1.
Next, add a material to the occluder object:
Rename the material to occluder_mat by going to the Materials folder in the Assets panel and right-clicking on the material.
The occluder object is static and has a fixed face shape. It doesn't respond to the movement of your face. To make it do this, you'll need to insert a second occluder object - a face mesh. To insert a face mesh:
You should now see the face mesh in the scene. The face mesh is already selected in the Scene tab, so:
The face mesh should now have disappeared as well.
If you turn your head, you can still see the arms of the glasses through your face. This is because 3D objects are rendered in a specific order. You'll need to use layers to make sure objects appear in the order that you want.
You'll need to create a separate layer for the occluder objects and set it to render last.
To do this:
Next you'll need to move the occluder objects to the occluder_layer. In the Scene tab, select head_occluder1. In the Inspector panel, assign it to the occluder_layer. Do the same for its children and the face mesh.
If you turn your head, you'll see that the arms of the glasses are no longer visible through your face.
You'll insert lenses as 3D objects. To do this:
You should now see lenses in the Scene tab, nested below glasses. You should also see lenses listed in the Assets panel, and a pair of lenses in the scene.
Import textures from the sample content. You'll apply these textures to a material to change the appearance of your glasses.
To do this:
Import all 4 of the single PNG and JPG files in the Textures subfolder. You can also drag and drop the files directly into Spark AR Studio. You'll see the textures in the Assets panel.
To create the materials for the frames:
To apply the texture to the material, double-click on the material you just created then go to its properties in the Inspector panel. Below Diffuse, click in the gray box next to Texture and select VDAY_glasses_frames from the menu.
Check the box next to Specular and set the Texture to RFL_frames. This helps make the effect look more realistic.
In the Assets panel change the name to frame_0_mat.
Next, you're going to create a new material for the lenses. This material will be animated, so you'll use a sequence as the texture to do this. A texture sequence is a folder with individual texture files inside, one for each frame of the animation.
To start, select lenses in the Scene tab, Then:
Spark AR Studio automatically includes the rest of the files in the folder.
Import as: is set to Texture by default. To change this, check the box next to Sequence, then click Open.
You should now see the animation playing on the lenses. The texture file should be in the Textures folder of the Assets panel and the animation should be in the Animations folder.
To make the lenses look more realistic set Specular to RFL_lens. Change the Opacity level to 70%, so that you can see your eyes through the animation.
To help you distinguish between materials, rename the material lens_0_mat.
This effect overlays a pink vignette using a 2D canvas, a rectangle, a material and a texture.
First, insert a rectangle:
In the Scene tab, you'll see the rectangle has automatically been inserted as a child of the 2D canvas.
To make the vignette cover the full screen, you'll need to make the rectangle fit the screen. Select the rectangle, then in the Inspector panel select Stretch from the dropdown menu next to Fill Mode. The box should now have expanded to cover the Viewport and Simulator.
You've already imported the texture, PinkVignette.png, which you'll use for the overlay. To do this, create a new material for the rectangle, then change its name to vignette_mat. Go to the material's properties and set the Texture below Diffuse to PinkVignette.
Your pink vignette is now in the scene, but it's too bright. To adjust the brightness, change the Opacity level to 35%.
You'll need to separate the overlay objects into their own layer. There should be 2 layers in the Layers tab already - layer0 and occluder_layer. Create one more and rename it overlay_layer. Change the name of layer0 to glasses_layer.
Reorder the layers - make sure occluder_layer is at the bottom of the list, then glasses_layer, then overlay_layer.
Move the overlay objects into the correct layer by going back to the Scene tab and assigning the 2D canvas and the rectangle to the overlay layer.
Your objects are now set up to render in the right order - the overlay layer will render first and the occluder layer will render last.
To add the option for 2 faces in your scene, you need to add another face tracker. We're going to do this by duplicating the existing effect.
Right-click on the face tracker in the Scene tab and select Duplicate. A copy called facetracker1 with copies of its children nested within it will be in the Scene tab.
Click and drag facetracker1 and all of its children onto the Focal Distance node. This moves them to the top of the list. Now select facetracker0, go to the Inspector panel and change Tracked face to Face 2.
You'll need to make some changes to the materials, so the effects look different for each face.
To change the animation in the second pair of frames:
Check the box next to Specular and set Texture to the same RFL_lens as before. Then, change the Opacity level to 70%.
To change the color of the frame:
Then, check the box next to Specular and set Texture to RFL_frames.
To change the color, go back to Diffuse. Click in the box next to Color to open the color palette and choose a shade of purple.
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community