There may be differences between your version of AR Studio and this tutorial because the product is currently in beta and we update it regularly.
Building Effects with 3D Objects
In the Quick Start Guide, you learned how to make a make a basic mask effect. Now we're going to introduce some new concepts and features.
In this tutorial, you'll learn how to insert, group, manipulate and occlude 3D objects. You'll also learn how to use layers, add an overlay and 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.
Please download the sample content to follow along.
If you open the finished effect in the sample content folder, you'll see that the effect you're going to build includes a pair of glasses with animated lenses.
Inserting and Grouping Objects
To get started, open 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, so 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 themselves 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 that you can apply transformations to both the frames and the lenses as if they're one object, you can group them. To do this you'll need to use a null object, which 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, right-click on the face tracker in the Scene tab, select Insert and then 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. Renaming your objects and materials isn't required, but it's good practice and will make it easier to distinguish between your materials later on.
Importing 3D Objects
To import the frames and insert them as a child of the null object, right-click on glasses in the Scene tab, select Insert, select 3D Object and then open frames.dae. As you can see, this is a DAE file, but AR Studio also supports other 3D file formats. You should now see the frames in the Viewport and in the Simulator.
If you go to the Scene tab, you should see 2 new objects nested below the null object: a 3D object instance called frames.dae and a mesh called frames. You should also see frames listed in the Objects folder of the Assets panel, because 3D objects are treated like assets. If you click on it, 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.
There are a couple of steps to occlusion, but the first is to insert a 3D object called an occluder. We've given you one in the sample content folder. So, right-click on the face tracker, select Insert, select 3D Object and open head_occluder.dae. You should now see a model of a head tracking your face in the scene.
The occluder object needs a material, so go to the Scene tab and select the child of head_occluder.dae, called head_occluder, go to the Inspector panel, click the arrow next to No material selected and select Create New Material. Then, double click on 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. Next, go to the Materials folder in the Assets panel, right-click on the material and change its name to occluder_mat.
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 one, right-click on the face tracker in the Scene tab, select Insert and then select Face Mesh. You should now see the face mesh in the scene. The face mesh is already selected in the Scene tab, so go to the Inspector panel, click the plus sign next to Material and apply occluder_mat. 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. To finish occluding the object, you'll need to use layers.
Adding New Layers
When AR Studio renders a 3D scene, the 3D objects are rendered in a specific order. If this order is incorrect, objects that you want to appear in front of other objects, may appear behind them and vice versa. Layers solve this problem.
What you need to do is create a separate layer for the occluder objects and set then set it to render last. To do this, go to the Layers tab and click the plus sign. Change the name of layer1 to occluder_layer, then move it to the bottom of the list.
Now you have to move the occluder objects to the occluder_layer, so go back to the Scene tab, select head_occluder.dae and assign it to the occluder_layer in the Inspector panel. Do the same for its children and the face mesh that you just inserted.
We'll come back to layers later. If you turn your head, you'll see that the arms of the glasses are no longer visible through your face.
You're now ready to add the lenses to the frames, so insert right-click on the null object, glasses, in the Scene tab, select Insert and then select 3D Object. Open lenses.dae from the sample content folder on your computer. You should now see lenses.dae in the Scene tab, nested below glasses. You should also see lenses listed in the Objects folder of the Assets panel, and a pair of lenses in the scene itself.
The next step is to import some textures so you can start building out your glasses. You'll use 2 of them to create the materials for the frames. To do this, go to Assets, click +, then select Import Assets... and import all 4 of the single PNG and JPG files in the Textures subfolder. You can also drag and drop the files directly into AR Studio. You should now see the textures you imported in the Textures folder of the Assets panel.
To create the materials for the frames, select frames in the Scene tab, click the arrow next to No material selected in the Inspector panel and select Create New Material. Double-click on the material you just created to go to its properties. Below Diffuse, click in the gray box next to Texture and select VDAY_glasses_frames from the menu. Then, check the box next to Specular and set the Texture to RFL_frames. This texture helps make the effect look more realistic. The material should now be on the frames. Next, go to the material in the Assets panel and change the name to frame_0_mat to help you distinguish between materials later on.
Next, you're going to create a new material for the lenses. This material will be animated and you're going to use a sequence as the texture. A texture sequence is a folder with individual textures files inside, one for each frame of the animation. To start, select lenses in the Scene tab, click the arrow next to No material selected and select Create New Material. Now double-click to go to the material's properties. Click Choose File... below Diffuse. In the sample content folder, open Textures, open the lens_anim_hearts folder, select the first file inside. AR Studio automatically includes the rest of the files in the folder. Import as: is set to Texture by default, but you'll need to check the box next to Sequence and 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.
There's an specular texture for the lenses as well, so set Specular to RFL_lens and then 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.
Now that you've built the glasses and the lenses and set up the first two layers, you can move onto the next step. This effect includes a pink vignette. To overlay it, you'll need a 2D canvas, a rectangle, a material and a texture. Let's start with the rectangle and 2D canvas. Click the Insert button, select Rectangle and then click Insert. If you look at the Scene tab, you'll see the rectangle has automatically been inserted as a child of the 2D canvas.
For this overlay, you want the rectangle to fit the screen. Make sure the rectangle is selected and then go to 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.
Earlier, you imported the custom 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 for this effect. To adjust the brightness, change the Opacity level to 35%.
Finishing the Layers
It's time to separate the overlay objects into their own layer. There should be 2 layers in the Layers tab already - layer0 and occluder_layer - but you'll need to create one more and rename it overlay_layer. Change the name of layer0 to glasses_layer and make sure that occluder_layer is at the bottom of the list, then glasses_layer and finally, overlay_layer at the top.
To move the overlay objects into the correct layer, go back to the Scene tab and assign 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. For this project though, we're going to duplicate the existing glasses. To do this, right-click on the face tracker in the Scene tab and select Duplicate. If you scroll down in the Scene tab, you should now find a copy called facetracker1 with copies of its children nested within it.
To finish the duplication, 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 that the effects look different for each face. For this effect, that means changing the animation on the lenses and the color of the frames.
Changing the Animation and the Frame
Let's start by changing the animation. Go to facetracker1 in the Scene tab, select lenses, create a new material and change the name to lens_1_mat. Go to Diffuse, click Choose File... next to Texture, 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 and click Open. Once you've done that, 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, go back to facetracker1 in the Scene tab, select frames, create a new material and rename it frame_1_mat. When you're done, set Texture below Diffuse to VDAY_glasses_frames. Then, check the box next to Specular and set Texture to RFL_frames. Go back to Diffuse, click in the box next to Color to open the color palette and choose a shade of purple. The second pair of glasses is now finished.
Congratulations, you've built your first effect with 3D objects! You can ask a friend to help you test what you've built.
To recap, in this tutorial you learned how to to insert, group, manipulate and occlude 3D objects. You also learned how to use layers, add an overlay and support more than one face in a scene.