Learn Spark AR Studio

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.

Tutorial: Building Effects with 3D Objects

Something Went Wrong
We're having trouble playing this video.

In this tutorial, you'll learn how to:

  1. Insert, group, manipulate and occlude 3D objects.
  2. Use layers.
  3. Use materials and textures, and built-in shaders.
  4. Support more than one face in a scene.

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.

Inserting and Grouping 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:

  1. Right-click on the face tracker in the Scene tab.
  2. Select Insert.
  3. Select Null Object.

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.

Importing 3D Objects

To import the frames and insert them as a child of the null object:

  1. Right-click on glasses in the Scene tab.
  2. Select Insert
  3. Select 3D Object
  4. Open frames.dae - Spark AR Studio also supports other 3D file formats.

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

Occluding Objects

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:

  1. Right-click on the face tracker.
  2. Select Insert.
  3. Select 3d Object, and open head_occluder.dae.

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:

  1. In the Scene tab, select the child of head_occluder1 - called head_occluder.
  2. In the Inspector panel, click the arrow next to No material selected, and select Create New Material.
  3. Double click the material you've created to open its properties in the Inspector panel, and change the Opacity level to 1% - the object should now have disappeared.

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:

  1. Right-click on the face tracker in the Scene tab.
  2. Select Insert.
  3. Select Face Mesh.

You should now see the face mesh in the scene. The face mesh is already selected in the Scene tab, so:

  1. Go to the Inspector panel
  2. Click + next to Material.
  3. Apply occluder_mat.

The face mesh should now have disappeared as well.

Adding New Layers

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:

  1. Go to the Layers tab and click +.
  2. Change the name of layer1 to occluder_layer.
  3. Move it to the bottom of the list.

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.

Inserting Lenses

You'll insert lenses as 3D objects. To do this:

  1. Right-click on the null object, glasses, in the Scene tab.
  2. Select Insert.
  3. Select 3D Object, and open lenses.dae from the sample content folder.

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.

Inserting Textures

Import textures from the sample content. You'll apply these textures to a material to change the appearance of your glasses.

To do this:

  1. Go to Assets.
  2. Click +.
  3. Select Import Assets.

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.

Creating Materials

To create the materials for the frames:

  1. Select frames in the Scene tab.
  2. Click the arrow next to No material selected in the Inspector panel.
  3. Select Create New Material.

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:

  1. Click the arrow next to No material selected and select Create New Material.
  2. Double-click the material to open its properties.
  3. Click Choose File... below Diffuse.
  4. In the sample content folder, open Textures, open the lens_anim_hearts folder and select the first file.

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.

Creating Overlays

This effect overlays a pink vignette using a 2D canvas, a rectangle, a material and a texture.

First, insert a rectangle:

  1. Click Insert.
  2. Select Rectangle.
  3. Click Insert.

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%.

Finishing the Layers

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.

Adding a Second Face

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.

Changing the Animation and the Frame

To change the animation in the second pair of frames:

  1. Go to facetracker1 in the Scene tab and select lenses1.
  2. Create a new material and change the name to lens_1_mat.
  3. Go to Diffuse and click Choose File... next to Texture.
  4. Open the Textures 2 subfolder in the sample content and then select the first file in the Lens_anim_xo folder. Remember to check the box next to Sequence, then click Open.

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:

  1. Go back to facetracker1 in the Scene tab and select frames1.
  2. Create a new material and rename it frame_1_mat.
  3. Set Texture below Diffuse to VDAY_glasses_frames.

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.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.

Read FAQs