AR glasses try-on, part 1

- [Tutor] In the next couple of videos, we'll create this AR Glasses Try-On app, where the user can try different glasses choose between different color options and click on the Buy Now button to go to the product page. So let's get started. Let's create a new scene. Right click, create. I'll this Glasses Try-On. Open the scene, turn on the Auto-Generate Lightening, and let's set up the AR scene. So delete the main camera. Right click. We need, ER Session Origin and ER Session. As we saw in the previous video, to enable face tracking we need to add AR Face Manager Script to the AR Session Origin Object. So we'll add the ER Face Manager Script. Here, we need to add the prefab which we want to show when the face is detected. Since we want to try on glasses we'll add a glasses prefab here. Let's import this package, GlassesModels.unitypackage, which I'll provide in the Exercise Files section of the course. This contains three different glasses models. Import this. Go to assets. This is the package that we imported. It has three different glasses models and prefabs. Let's have a look. This is the Glasses 1, prefab, and this is how it looks. I'm just going to delete it. You can directly add this prefab. Anyone of these Glasses 1, Glasses 2 or Glasses 3, right here. Whichever model you want to display when the face is detected. I'll add Glasses 1, prefab right here. Now, click on File, Build Settings and click on Add Open Scenes to add the AR Glasses Try-On scene. And since we want the Glasses Try-On scene and not the Face Paint scene let's disable it and now run the app. And this is what you will see. As you can see, the glasses don't appear at the correct position. It's because we haven't defined the position of the glasses with respect to our face. To do that, we need to add a reference face model so that we can position the glasses according to it. I'll import this face model which you can find in the Exercise Files section. Drag the reference face model that we imported in the hierarchy. Now, according to this face, we'll position the glasses So I just drag this prefab in the scene. And this is where the glasses appear right now a little below our eyes, as you saw in the video. So let's adjust these. We want them right here. This looks fine. Now let's add the glasses as a child of the face and turn off the face mesh render because we don't want to see the face mesh. And now let's create a prefab for this face. Let's change the name to Face Parent. Let's create a prefab and deleted from here. We don't need it. Click on ER Session Origin. And instead of glasses one, now we have a new prefab where the glasses are positioned perfectly. So we'll add this Face Parent pre-fab that we created right here. If you run it now, you will see the glasses at the correct position. But there's something wrong. The whole frame of the glasses is visible. In reality, the sides of the glasses should be hidden behind the face. So let's fix that. So click on Face Parent that we created, the prefab, click on Open Prefab, because we need to edit this. Let's enable the Skin Mesh Renderer to get that realistic occlusion effect where the face hides the sides of the glasses. We need to add a special material, that is the occlusion material on the face. So for that, we need to import the masking shader or the occlusion shader, and let's create a material and I'll name this Mask. Choose the shader, Custom, Mask. And change this value to 1999. Now you can add this material on the face to get that occlusion effect. So if you see it from here the whole frame is visible as it should be. But if you see it from this side this side of the frame hides behind the face, and this is what we want. Same with this side as well. So let's go back, save the project. And if you run it right now, this is what you will see. And now it looks much better. That's all for this video and I'll see you in the next one.