iOS 12 & Swift 4: Mastering ARKit 2 from scratch | Arash Ahadzadeh | Skillshare

iOS 12 & Swift 4: Mastering ARKit 2 from scratch

Arash Ahadzadeh, iOS Developer & UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (2h 23m)
    • 1. Promo Video

      1:41
    • 2. What is Augmented Reality?

      2:49
    • 3. Crating an augmented reality project

      8:33
    • 4. Creating a 3D model inside Xcode 10

      10:01
    • 5. 3D Modeling Softwares

      1:56
    • 6. Importing 3D model into Xcode 10

      5:09
    • 7. Arkit 2 Configuration

      8:00
    • 8. Plane Detection

      4:25
    • 9. Focus Square

      17:40
    • 10. Adding a model

      16:17
    • 11. Image Tracking

      10:32
    • 12. Animation & Lighting

      8:16
    • 13. Buttons and Interactions

      7:04
    • 14. Multiple Screens

      20:23
    • 15. What is Quick Look framework

      1:10
    • 16. Setting up a Quick Look project

      3:00
    • 17. Adding a Collection View

      9:51
    • 18. QL Preview Controller

      5:13
    • 19. The End Video

      0:45

About This Class

b18f6c16

Master ARKit 2 for iOS 12 step by step. Using Xcode 10 & Swift 4. Including Image Tracking and Quick Look framework.

 

Have you ever wanted to make an Augmented Reality app? Did you want to make apps like IKEA place or Pokémon GO? If so, you are in the right place.

Welcome to the brand-new ARKit 2 course. In this course, you will learn all the things you need to know about ARKit 2 which is the latest Apple's technology in three different levels by making real-world applications. First of all, we will dive into the fundamentals of ARKit 2 and Swift 4, then you will learn how to configure an AR app with Swift 4 and Xcode 10.
Second of all, you will learn how to create a 3D Apple Watch model inside of Xcode 10. In the intermediate section, we will jump into horizontal and vertical plane detection and then we will place an object on top of it.

You will also learn how to track an image with ARKit 2, Animation & Lighting, changing the texture of your 3D model in an interactive way, working with buttons and much more.

We will also make another Augmented Reality app with the help of the Quick Look framework which is so powerful for presenting a 3D model in a 3D environment and also augmenting that in the real world.

So what will you learn in this course?

  • Fundamentals of ARKit 2

  • Creating a 3D Apple Watch model inside Xcode 10

  • Plane Detection (Horizontal & Vertical)

  • Adding 3D objects to the scene

  • Interaction with your 3D models

  • Animation & Lighting

  • SpriteKit & SceneKit

  • Adding a Focus Square to the scene

  • Image Tracking (NEW)

  • Texture modification in an interactive way

  • Making a fully-functional AR app

  • Developing an AR app with Quick Look framework (NEW)

  • Fundamentals of Swift 4

  • And much more…

WHAT'S INCLUDED?

The course is accompanied by all the code and design sample files so you can re-use them in your private or commercial projects. It will save you so much time.

Nowadays, so many brands are looking for skilled ARKit developers but because the technology is relatively new there is a lack of trained ARKit iOS developers. So it's an amazing opportunity for you to build your Augmented Reality apps and submit them to the App Store before it becomes a crowded space. Eventually, you will have a strong portfolio to get a junior or senior iOS development job.

Don't you have enough time to learn all of this information?

It's not a problem at all. We have designed this course in a way that you can learn everything you need in just 2 hours.

Don't you know how to set up Xcode or how to program with Swift 4 language?

Well, you do not have to worry about it. We also created a separate section to teach you how to download and set up the Xcode 10 and also how to work with that. Furthermore, there is another section which covers all of the Swift basics for you. All in one course!

Don't just take my word for it, see what my past students had to say about my courses:

STUDENT REVIEWS

★★★★★ "Excellent course! It covered every concept of iOS development in a clear and simple way. Examples are applicable to the real-world applications. It's absolutely up to date and brand new."

★★★★★ "It's an amazing course for those who want to master Augmented Reality. I absolutely recommend it."

★★★★★ "All the concepts taught were taught very well and thoroughly. Everything that was taught was applicable to the real-world application."

Who this course is for:

  • iOS Developers who want to make Augmented Reality apps
  • If you want to learn about ARKit 2 and SceneKit
  • If you want to learn about animation & interaction in ARKit
  • If you want to learn about Image Tracking
  • If you want to learn how to create an AR app like IKEA place or Pokémon GO.

Transcripts

1. Promo Video: Hi. Have you ever wanted to make an amazing augmented reality app? Did you try to learn the fundamentals? But it was too difficult for you to understand. Did you like to make an air app like a key A place or Pokemon? Go. If so, you are in the right place. In these course we're going to be covering a are key to which is the latest apple's technology in three different levels by making riel world applications. At first you will learn how to create an augmented reality app with Exco 10 and then we will jump into a orchid configuration to make our first they are app. Then you will learn how to create a three D apple watch model inside Exco 10 and after that you will understand how to detect a resentful or vertical plane in order to place your objects on top of it. In the intermediate section, you will learn how to add a focused square to the scene in order to place an object on a plane and in the advanced section will dive into image drinking with a Yorkie to animation and lighting, and also you will learn how to change the texture of your three D model in an interactive way, in addition, will create an augmented reality out with quick look framework, which is the newest Apple's technology for presenting and augmenting a three D model in the real world, I gather together all this information in a brand new arias to, of course, or you. You can also take a look at the reviews off my previous courses to see what my students have to say about them. I'm are rash and this is my master class. 2. What is Augmented Reality?: had. Everyone will come back to another section of this course in these section. We're going to talk about augmented reality. What is admitted reality augmented reality is the integration of digital information with the users environments in gree of time. Probably you heard of usual reality before, but these two technologies are quite different. So what is the difference between a R, which stands for augmented reality, and VR, which stands for reassure? Reality, as you may guess we are, is a technology which creates a totally artificial environment. But they are, on the other hand, uses the existing environments and overlays new information on top of it. So what are the best examples off A. R. APs? The first example is called Pokemon Go, which is a popular game nowadays, and the second example is a key, a place. It's an amazing app, which helps you to bring virtual fair and share it your place. And the third example is instagram. It also uses they are for making some cool features in the app, such as filters and stories set all right, what is a arc eat? Actually, a orchids is Apple's augmented reality development platform for all your mobile devices. And let me tell you about the newest features. Off A are key to the 1st 1 is improved face tracking The 2nd 1 is realistic rendering, which is so important. The 3rd 1 is three. The object detection and the next one is persistence, experiences and also shared experiences, which is so useful if you have a plan to make an augmented reality game. And the last one is us decent format support. Actually, Apple work together with peaks are to develop a new file format for augmented reality objects called U. S. D Zet All right, whether the devices that support a R Keith actually you cannot use a are keyed on each iPhone or each iPad. So the devices that support air kids are iPhone S E iPhone success, and later I, Pattani 17 and later, and also all iPad pro models. All right, let's open up the a orchid section of Apple's website. All right. As you can see, you have all the information here, and I would like to mention that you can use a our kids to Onley on your stools, so you need to download. And so the Exco 10 in order to use our your stools. And these are the features that I already talked about. And these parts is about us desired formats. All right, thank you so much for watching this video. And in the next video, we will create our first augmented reality project together. So see you then. 3. Crating an augmented reality project: Hi. Everyone will come back to another video of this tutorial in these video. We're going to create our first augmented reality project together. All right, so let's open up the X coat. But first of all, you have to download the X Go 10 in order to work with a are key to because we need to work with our US Tall I already download the debate aversion off Exco 10 and you can download it from your Apple developer account for free. And if you don't know how to do that, I already recorded a video forgetting debate. Aversion off Exco 10 You can watch it and do it for yourself. All right, Without further ado, let's get a start it with opening up the X Code beta great. And let's create a new X good project. All right, As you can see this time, we don't need to use single view app. You're going to use augmented reality app. So just click on that and click on next. Great. So let's name our project as they are, and let's change the organisation, identify your to a are 2018 great and click on next. Create perfect So now I need to mention that in order to work with a r. Keith and in order to run your app, you need to have a physical device so you cannot launch your app on a simulator. If you want to work with augmented reality and in order to launch your app on a physical device, the only thing you need to do is to connect your phone with the U. S B cable to your computer. And as soon as you connected, you can open up this least over there and find your device, which in this case, is our ice iPhone. But as you can see, it says always version lower than deployment target. And it means that the all US version in my phone is lower than all use 12 which is dedicated to deployment target over there. So what should be doing these case? Actually, I didn't want to update my oh surgeon to 12 yet, but in order to fix this problem, we can easily change deployment target to 11.4. And now if we just open up this least you can see that there is no explanation after my phone's name, All right. So let me explain you some basic stops about augmented reality project. In these kind of projects, we need to work with something called Sink It. And if you just click on this little air over there, you can see that these template project you have a ship, that scene and the texture. So what is this? Let me click on that. And as you can see, it's an example project. So it's a model. It's a three D model, which is designed by apple, and you can rotate it with your mouse. And if you want to zoom in and zoom out, you can easily just hold option key and a scroll your mouse. And if you want to move around, the page can hold option and easily move around the surface. All right, so let me explain something about thes sections. The first option is fine, inspector. And here you can change defy lame and five form. It's the 2nd 1 is Quick help, Inspector. And here we can look for documentation. And the 3rd 1 is no inspector. So what is a note? Actually, here we have a note because we're working with the three D model. So these cube here is called a note. So as you can see here, we can apply transformations, visibility or even we can add animations. And the next option is attributes, Inspector, that we already worked with. That's before, and here we can change the geometry settings, and the next one is material inspector, which you can change colors and apply textures. The next option is physics inspector, which you can apply physics to the three D models. But we don't work with this option and lot in this project. And the last option is seen, Inspector. But you can change the background and also the physics wars, for example. Here you can just change the background to procedural sky and you can work on your project and your model easily. But in this project, we will focus on the note, Inspector attribute inspector and materials Inspector. All right, so let's get started. We didn't know the inspector first and let me explain to you what you can do In the section here, you can see a section which is called transforms, and you have some options here. The 1st 1 is positioned and there are three different coordinates that you can change and the 1st 1 is X. The 2nd 1 is lying and the 3rd 1 is Z and X represents the X axis. And why represents the Y Axis and Z represents the Z axis. As you can see here, this is why this is Z access and this is the X axis and the Oiler is for rotation of your model or your note. Let me increase the eggs and see what happens. As you can see when we increase the X here, our model rotates around the X axis. And if we increase the why, you can see that the sheep rotates around the Y axis and also for dizzy, it happens the same thing. And also we have scale here, which is for scaling and let me increase the X. The why and also dizzy. And these three components are so important because, for example, a position is where you place your model. So you need to know in which point you want to place your model and the initial position is set to zero. So let me change them to zero. And here, as you can see, we cannot see the object clearly. So in order to just zoom out and see the whole model, you can double click on this note. There we go. And here we have bounding box. It's the dimensions off our assets in meters as you can see 1.1 meters, 0.5 meters and 0.8 meters. All right, so let's head over to the Material Inspector here. But before that, make sure that you selected our model here. Shipments, as you can see in click on Material Inspector. Great. Basically a three D model is just like a skeleton and it doesn't have any skin around itself. So if we didn't have these texture here, as you can see, it would be a boring model. So let me change. These takes chair, for example, to black. As you can see, it's just the skeleton, right? And here diffuse is the skin that wraps the object. And here it's said to texture that P and G that we already put it there. It also can be a caller, as I showed you. And the next important component is speculator here actually speculative scribes. The light that is reflected off a surface from the source of light, similar to the reflection on to mirror. A normal is what adds a roughness to smooth surface, giving mawr an illusion of a really object in three D. And here we also have a median, which is the color or blow immediate on a surface, regardless of light. All right, let's run our app and see the result. As you can see, we have our model here. It's a little with large, so let's make it smaller and try again. All right, let's come over there and let's decrease its X. No. So it's why and also it Z. And let's try to gain all right. As you can see now it's better. And you can recognize this model. That's awesome. Did you see how easy it is to just make nag mental reality app? All right. Thank you so much for watching this video in the next video. We'll talk about how you can create your own three D model inside the Exco 10. So see you then 4. Creating a 3D model inside Xcode 10: Hi, everyone. In today's video, we're going to make a three D model inside the Exco 10. I just decided to create this beautiful Apple y series three together in order to explain to you the concept off creating three D model in a simple war. So without further ado, let's head over to Exco 10. All right, First of all, let me explain to you some of the features of an augmented reality project. Let's head over to the object library over there. All right. As you can see, we have some kind of objects. The yellow ones are our lights. The blue one is our camera, and the green ones are our objects. And as you can see here, we can add some physics to our model and also some animations. But in today's video, we're going to work with these objects and also lights. So, first of all, let's get started with dragging blacks over there. Let's drop it here, So as you can see, it's not that clear. So let's double click on these little Q P er, which is our node, and after that I'm going to change the background. So let's go there. Seen inspector. And let's change the background to procedural sky awesome. And now we need to change the size of our box. So let's go to the attributes inspector over there. All right, now we need the dimensions. How can we get that? Let me head over to Apple's website, and if I just scroll down, you can see the dimensions here. These are in millimeters, so I'm going to convert it to meter in order to make it simpler for you. And then we can scale it now. All right, So let's set the with 23.33 and also high to 3.86 also the length off. One point for Team and let me double treat on this little note. Great. And now let's set the radius to 0.5. Awesome. And now let's head over to the North Inspector, and that's reposition it to initial position, which is the Euro 00 Great. All right, now is time to sign a collar tude. So in order to do that, let's head over to materials inspector Great. And let's change the shading to glean. And let's set the diffuse to Let's see, I think this is great. All right, now it's time to Dragon Drop in light. So let's head over to the Object library over there and let's drag and drop and only light and let me put it over there. Great. And let me add another one also and put it here. All right, that's awesome. All right, so let's go to the North Inspector and changed Z access in order to find the best place for our light. Let me see. I think now it's fine. That looks great. All right. Now let's go to Material Inspector and just don't forget to select box here. And let's set the speculator to White in order to get this beautiful reflection here and now. Let's change a little with the light in order to make it better. All right, now it's time to create our screen. So let's open up the object library and let's search for a plane. Great is it concedes over there, but it's a little with small, so we need to modify that. Let's go to the Attribute inspector and set the with off three and also height of 3.5. And let's set the corner radius to zero point for And let's head over to know the inspector and reposition it 200 all right, as it can see its fine. But as you may realize, we need to modify the Z axis because we can see this grey space here. So something is wrong if I just change it to 0.58. As you can see, it would be great. But as you can see, we have a little with empty space here. But we're not going to create a perfect model in these module. I just want you to know how to create a three D model in site X scope. Of course, you can import your three D model from other applications, which is a great way. I really suggest you to just design your model inside other applications. Such a cinema, four d etcetera. But for now, that's great. All right, so let's change the color of our plane. So let's go to Material Inspector and change the shading to Blaine. Awesome! All right, so let's open up the object library here and look for a cylinder. Great. Let's put it here, all right, and let's go to the attributes Inspector and change the radius to zero point four and also the height to 0.2. And also let's go to Material Inspector and change the shading to bleed as well. Awesome. And as you know, we need to rotate it 90 degrees. So let's go to the node Inspector and change the easy access in Oiler section to 90. Awesome! And you can also reposition it simply. And now it's time to add a bottle over here. So let's open up the object library and look for a capsule. Great, Let's drag and drop and go to the Attribute inspector and change the cap radius to 0.3 and also the high to 1.5. And we need to go to the Material Inspector in order to change the shading to blink awesome . And also we need to reposition it. So let's go to the North Inspector and set the X two 1.4 and that 20 And for the why we can just change its position by these little arrow over there, this green arrow. As you can see, I think we can change the X a little with now it's better all right. Now what's missing the bracelet. So let's look for a tube. Great on. Let's go to the attribute, inspector. And as you can see, a tube has two different radius is the inner radius and the outer radius. So let's set the inner radius to 2.3 and the outer radius to 2.5 and also the high, too. Two point fine. Now let's go to Material Inspector and change its shading to Blaine as well. And let's change. It's diffused to something like black. Let's see the picture. Yeah, I think black is going to be fine, and now we need to rotate it as well. So let's go to note, Inspector, and let's set the Z 2 90 degree Great. And for the position, let's initialize the X 20 and also for why zero? And for Z minus 1.95 Great. As you can see, we have a non awesome model here. What do you think? Did you see how easy it is to just create a model inside X gold? That's beautiful. All right, Now let's change some colors, so we need to change our plane color to black in order to make it more beautiful. So let's go to Material Inspector and change its diffused to black as you can see this model. And also let's change the color of our cylinder to Gray and this one as well. Great And last but not least, we need to scale our watch down. As you remember, we set our nine mentions two meter and now we need to scale it down. So how can we do that? So to do that, let's select playing cylinder capsule and to you and let's Dragon drop It's over dir All right Now Box is the parent of thes four objects, and we can simply just scale the box down so we can just select box and go to note Inspector. And in the scale, we can just write 0.1 for why 0.1 as low and for the 0.1 as well. And now we cannot see anything. So, as you know, we need to double click on these que but no murder. Everything looks fine. So now let's run our app and see the result. So before that, let's change its name to watch all right. So now that we have changed its name, we need to change the name of our model inside of our code. So let's change it to watch. And now let's run out at all, right? As you can see, everything looks fine. And we successfully created our three d model Inside X code and we could implement it on our I commented reality app, which is awesome. All right. Thank you so much for watching this video. I hope you enjoyed it. And in the next videos, we will work on more advanced topics. So see you then. 5. 3D Modeling Softwares: have everyone in today's video. I'm going to introduce some of the three D modeling suffers to you, nor to use them for creating your three D models. The fair software is seen him a 40 which is a user friendly application, and it's so easy to work with because of its great user interface. You can also save some of your previous version of your modeling in order to not losing the previous version off your model. But it comes at a high price, and you can try it with the demo version before buying that the next application is catch up, which is so useful for those who work on architecture and interior design projects. And also it has a comprehensive library in order to use and share your models. And it can also download all the assets for free from three D Warehouse in the next project will also use this platform in order to download our three D model and imported to exclude 10. The next application is Blender. It's a free application, and it's ideal for those who want to start modeling. But unfortunately it's not that easy to work fit because of existence of so many functionalities. It also has an integrated game in Gene. The next application is three Days Max, which is a so popular suffer a mine video game developers, and also it's great for visual effects. But unfortunately, it only supports Windows, so you cannot use it on your Mac or I Mac. And last but not least, is Autodesk Maya, which is a so powerful software in order to create your three D model. It's a great software for animations, motion graphics, and also you can use for beautiful studio effects. And you can also get a free trial off these sulphur. All right, thank you so much for watching this video and I receive in the next video. 6. Importing 3D model into Xcode 10: Hello, River. Welcome back to another video of this section. In this video. I'm going to show you how you can import a model into your ex coat. So to do that, as I mentioned before, you can download so many free three D models from three D warehouse website. So let's look for an iPhone X and that's used this one. All right, click on download Anglican Collateral Fi, which is supported by Ex Code by default. All right. And now that's rename our file to iPhone eggs three d. Great. And if you open up, this five can see our model here, and you can open it up and, as you can see, can rotate it and check it out, which is awesome. And also, we have a model fuller here, which is our screen. All right, so how can we import this model into the X go tear? It's so simple. Let's head over back to Exco 10 and let's drag and drop these folder right under art. That s e and assets. Great. As you can see, we have imported our model. But now we have model with the extension of D A in order to make it easier for you. It's better to convert the model to sink it format. So how can we do that? You can just click on model, go to the editor many over there, and click and convert to sink its seen file format. And now press convert. And now, as you can see, we have model that s sea air. And here, if I just click on these little arrow, we have our cameras here, which we don't need in this project, so we can just simply remove them. And we have our Children and parents note. All right, So before going for their let's rename our model and our screen picture So let's rename our model to iPhone picks. And also that's Rene me to screen. And now that we have changed this name, we need to go to Material Inspector and change the diffuse to screen. All right, now we need to change the place off our private point. The pilot point is the intersection of these three little arrows here, and we need to reposition it. So how can we do that? If you just change the perspective to top and click on sketch up over there and let's go to know the inspector. You can see the with is 2.8 and the death is 5.6. So in order to make it center, we need to just simply divide these numbers by two. So let's click a group, underline zero and let's set the X axis to minus one point for one and dizzy to 2.818 And if I just click and sketch up again, as you can see, our private point is in the center right now, all right. The next thing we need to do is to flatten these notes into one single note. So to do that just right click on, sketch up over there and choose flatten selection. All right, now we have one single note. So why did we do that? Actually, it's more easier to work with one single no, rather than 100 notes. All right, now it's time to run our app and check it out. But before that, we need to change the reference off our model in view controller file. So let's go here and change it to iPhone X Treaty, which is the name of our folder because in this case, we have a folder as well Slash iPhone. It's all right. So everything is fine. And now, before running our app, lets change something here. Let's change perspective to front, and I'm going to just rotate it by 90 degree in order to make it stand up. Great. And now let's run our app and see what happens. All right? Now, unfortunately, we cannot see anything because hair river is gray. Right? So what's wrong with that? Actually, it looks like a giant iPhone X, so we need to scale it down a little bit. So let me head over to the node inspector and just scale it by 0.0 25 and the same for why , and the same for Z. All right. And now let's try to gain all right. Now, as you can see, everything looks fine. That's awesome. All right. Thank you so much for watching this video. And I hope you enjoyed it. And you could learn something new about augmented reality. And I will see you in the next video. So see you then 7. Arkit 2 Configuration: Hi, everyone. I hope you're doing there in this video. We're going to talk about the configuration for a arc. Eat all the template is available for starting your A our project. It is so crucial to know how it's structured because sometimes you probably prefer to start from the scratch and not using a template. And in the city, I'm going to talk about the main elements off a arc eat in order to make you familiar with the fundamentals of Air Keat. All right, so let's open up the main that story word over there. As you know, the main that storyboard reflects how are user interface looks like And here is story word editor, and this is our view controller, and it's our fair scene when we run our app and it's initialized with these little arrow over there, you can also add so many of you controllers and then you can make some connections in order to manage them. This is our document outlines, and you can see all the components in our storyboard. As you can see, we have you controller here, and it's our view, and inside our view we have the safe area we have seen view, which is this one and our constraints. Now let's talk about inspectors over there. The 1st 1 is fine, inspector, and you can see the name of your file and the type of that and also the location of it. And the 2nd 1 is quick help. You can search for documentation here if you need any further information about any specific topic or object. The third bun is identity inspector, and you can set a class or module to your seen or to your object. The next one is attributes, inspector. As you can see, you can change some variables about view and also sink its view. And the next one is size inspector that you can change size of your scene or your object. And also you can customize your constraints over there. And the last one is connections, Inspector. And here is our referencing outlets, and you can see all the connections to the view controller or other files as well. So let me open up the view controller file here, and as you can see, we have an idea outlet here, seen view, air seen view and let me come back to Maine that storyboards. And at the top, you have a little square here with this little arrow here. And if you lying press on that, you can see two options. The 1st 1 is sure objects library. So let me click on that. And there we go. These are all objects that we can use. And if you're using the X good nine, it's located over there at the bottom, right, All right. And if you choose the show media library, you can see all the media that you have, for example, all the assets. And as you can see, we have screen here, which is located over the ER, and in the future we can easily change it. All right. As I mentioned before, we have a nay are seen over there. So if you want to create your project but yourself from the scratch, you need to drag and drop an air seen from the object library, and you can easily find that over there. This is our air. Kids sink it view, and this fee reflects what the camera sees in displayed on your screen. It's like our eyes. All right. Now let's talk about coat so Let's go to view controller that swift At the top, we have our Keats or our frameworks. The 1st 1 is you like eat in. The 2nd 1 is seeing Keat, As I talked about before, we needed to work with augmented reality projects. And the last one is a arc Eat just our augmented reality. Keat, These are our frameworks that are designed by Apple before, So we just need to import them in order to make our life easier. And here we have you controller class and these two are our protocols. The 1st 1 is you, Ivy Controller Particle. And the 2nd 1 is a R s e n. Which stands for your seen view. Delegates and protocols are something that do something on behalf of someone else or something else for us. For example, the apple already wrote some cold inside of this protocol. And these protocol simply does that for us. You can just head over to quick help and read the definition and all the information you need. All right, let's scroll down a little bit. Here, in view, will appear function. We have a constant which is called configuration, which is equal toe air war tracking configuration, and these function gives the devices position and orientation, and after that we need to run a session. The session controls all the processing with its session incenses, and it starts when you begin your experience. All right, Do you remember when we first ran our app? There was a pop up message asking for permission to use the camera. And if you go to info dot p list over there, you can find a key value roll over their privacy camera usage description, and it can change its value by yourself here. And it's an obligatory step because every time you want to get access to the users camera, you need to get permission before using that. All right, let's head over to view controller again and see what else do we need to explain right here ? We have seen view that shows the statistics which is equal to troop. The statistics provide information about the performance of scene rendering life, the number off frames per second, or even physics or animation, and if you run your app, you can see it at the bottom, and if you want to make it hidden, you can easily set it to false like this. All right, now it's time to talk about debug options. Basically, there are two debug options available that give us reference in the scene. So let's add them to our coat. Lets right seen view that debug options is equal to a R. S. C n debunk options that show features point. This is one of our debug options. All right now, as you can see, we have our model here, but we also have some yellow points over there. As you can see, these are our feature points that can recognize a surface in order to push an object on top of it. And if I said the show's status six to true now you can see the statistics at the bottom, and if I expand it, you can see all the information is here all right, and the other D bike option is word origin. So let's right seeing view that debug options is equal to a R. S. C n debug options that show ward origin. It's over there, and you can also create an array and put both off them into one array. And now let's run are at once more. As you can see, we have word origin here, which is the starting position of our camera when the view loads. All right, so let's talk about lighting. So here we can write seen view. That's totally enables. Default lighting is he called the truth. So what does that mean? So it means you're seeing with add lights to the object and to the scene where it's needed . And in order to update them automatically, let's write seen view that's automatically updates. Lighting is equality. Truth arrived. Thank you so much for watching this video. I hope you enjoyed it. I will see you in the next video. See you that. 8. Plane Detection: Hi, everyone. I hope you're doing well in this video. We're talking about how to detect a horizontal plane in order to place your object on top of it. Because if you're working on an augmented reality app, it is so crucial to know how to detect a horizontal plane or even a vertical plane. So let's get started. So first of all, as I mentioned before in this project, we're working with this protocol a r S, e n view delegates, which handles so many things for us. And there are so many methods inside these protocol. So I'm going to create another file and store all the methods we need inside that fight. So that's just right. Click over there new file and let's use a sweet file next and let's call it daily. Get, create. Awesome. And as you can see, we have foundation by default here, and we need to remove it and import sink eats instead and also a r keyt. And now I'm going to create an extension. So let's right extension for Wii Controller Colin. And now let's write a r s e n delegate in open carry brackets. Awesome! All right, as you can see we've got an error here. So what does that mean, redundant conformance of the controller to protocal, a rse and view delegate. That's because we already have a protocol with the same name. So let's remove it. And also let's scroll down and we have a comment here. So let's remove it as well, because we don't need that great. And now let's open up the delegate file once more. And as you can see, the error is done. All right. Now, inside our extension, that's right, Deed ad. And as you can see, we've got Orender. So let's use that. Actually, the deed at Render method is going to help us to find the plane in our app, and here also, we have an anchor, and these air anchor is a really your position and orientation that can be used for placing objects in an air seen so it can help us to place our objects on the right place. So now let's write our quote here. That's right. If Anchor is a our plane anchor, then that's bringing something in order to recognize that on our council. So let's write or resentful plane, detect it all right, and now let's write else return. All right, so now it's time to run our app. But before that, let's go to view controller, that suit file and I'm going to come in something out. This one. I don't want to see our model for now, So let's commented out. And also this one and these two debug options as well. All right, But before running our app, we need to add something here and that's right configuration that playing detection is equal to dot horizontal, and now we're good to run our app and check it out. All right, so let me move my phone. And as you can see in the console, you can see that horizontal plane detected when I just hover my camera on my desk, and that's awesome. And now I'm going to add another method into our extension. So let's go over there and that's right Deed update and render right. You're going to do the same thing but for updating our plane detection. So now let's write if anchor it is air pain anchor, then creamed for resentful plane. Update it, my right. And now let's run are up and see what happens? As you can see, we've got resentful. Plane updated. All right. Thank you so much for watching this video. And I will see you in the next video. 9. Focus Square: Hi, everyone. And welcome back to another video of this tutorial. In the last video, you have learned how to detect a resentful plane in order to place your object on top of it . And as I mentioned before, they are the anchors to place objects. So in these video, we're going to talk about Focused Square and how we can recognize a specific place in order to place our object on top of it. All right, so without further ado, let's get started. First of all, unity, import the assets to your project and you can download the assets at the end of these section. So let me import it to our project. Right? We have two files here. We have two images here. The 1st 1 is close and the 2nd 1 is open. And in a few minutes I will explain to you why do we need to use them in our project? So, first of all, we need to create a class for our focus square. So let's right. Click over there new file a sweet file next, and let's call it Focus Square and create great. And now let's replace the foundation with SCN keyt and after that I'm going to create a class. So let's write class Focus square of type SC and note an open Kerry brackets and make sure that you use a capital F order because we're creating the class. All right. Now it's time to define an initial Isar, so let's right in it. And as you can see, we have over right here. So what does that mean and why it appears over there, actually, because SCN note has its own properties and we're going to add some extra properties to diet. We need to override those properties, and because of that, we need to use override keyword over there. And what's the job of these initialize er here? Actually, it's going to perform some extra steps whenever we create a new folks square in our project . So now inside code, let's write super. That's in it. And as you can see, we've got an error here. So it says required initialize er in it colder must be provided by subclass of S e and note nerd. To fix that is click here and press fix. Great. Thanks to the X gold, we don't need to even write that all right. Now it's time to create our focus. Square. So right under our initial Isar. That's right. Let's plane is equal to S e and plain Parent is us and we need to use with and height. So for with that's right 0.1 and for the height, that's right. 0.1 as well. And now let's write plane. That's first material. A question mark dot defused that contents is equal to you. Image Parent is is named strength. So here we need to write the name off our image. So let's check it out here. We have close and open. So now let's right close. And then that's right. Geometry is equal to plane, and also we need to change the Oiler angle. So let's write Oiler angles. That X is equal to G l k Math de greased radiations. And here let's write minus 90 Right, So let me explain what happens just now. Actually, here we try to rotate our plane by 90 degrees and here we change the degrees to ratings. With these lineup, court can make sure that our focus square is aligned as the table. All right, that's it for our class. But for now, we cannot see that the what you to do next. So let's go to view, control or file grave. And over there I'm going to declare a class variable. So let's right of our focus. Square of type Focus Square in a question mark, which is an optional all right. And now we need to call this variable. So let's go to Delhi. Get that suit file. So here, let's right guard is equal to Focus Square and it's new. Els. Let's return return. Great. Actually, it means if it already exists, then do not make a new one. And then we need to create a new instance off our focus. Square variable. So let's right, Let focus square local is equal to focus Square parent is is and then let's write self dots scene. Have you not seen that's root? Note that ad child node parentis is focus square local. Sorry, we need to change it. It's not self. That's right. And after that we need to right itself. That focus square is equal to focus square, local. So why did you use the word local over there and also here because it's going to be used locally and in order to prevent any confusion. We used local at the end of that. All right, so now I'm going to change these. If anchor is airplane anchor to something gills. But it does the same thing for us, so let's remove them. And that's right. Guard anchor is airplane anchor Els return. So it does the same thing for us. And now we can run our app and see what happens, all right, And now, as you can see, our focus Square piers. But its place is not good, so we need to change something in order to make it better. All right, let's go to view controller that suit file. And here we need to add another variable solar. Try to our screen center of type C G point, an exclamation mark, right, And now let's add something to our view. Did load methods. So let's go over there and here we can add Screen Center is equal to view that center great . All right, now let's come back to our delegate file, and we need to add another method here, So let's right updates at a time. Great. And in these method, we're going to create another local focus square note. So let's right guard. Let focus Square Local is equal to Focus Square Els return. And basically, what it means is that we make sure that we have a focused square before we continue. All right. As you remember, we define the screen center as a two D point and also for positioning and note on the screen. We need three D coordinates. So how can we transform something from two D to three D? All right, there is a method called a R. He test result that can help us to do that. So let's right. Let Heat test is equal to seen view that he test the 1st 1 and four point Let's right screen center and types. That's existing plane, All right. Actually, the heat test returns us at least of results, but we only need the 1st 1 So suppose that you hover your camera on top of your table. You only need the table, not the floor, and the table is the first element. So now let's write. Let he test result is equal to he test that first. All right, And now let's right guard. Let's world transform easy pull to heat test result. Question mark dot World transform Els Return All right? Actually, world Transform is a four by four matrix, and the position is kept in the fourth column. And because The Matrix is a multi dimensional array and then race starts at a value of zero . So the number of the fourth column is three. So now let's write. Let yeah transform! Column three is equal to world transform dot columns 0.0.3, and lastly, we need to assign that position to the Focus Square. So let's right, Let's right. Focus Square local. That position is equal to S C and vector tree Parentis is world transform Column three That's eggs comma World Transform COLUMN three that Why and world transform column three Z All right now let's run the app and see what happens. Awesome. As you can see, our focus square now is placed on the table. This is what exactly want it All right now we need to add another method to are we control or file. So let's go over there and here under we will appear method. Let's right, find update. Focus. Square Parent is is an open Carol brackets. And here, let's right guard. Let focus Square Local is equal to Focus Square Els return. And then, that's right. Let him test is equal to seen Were you that hit test? And for the point, Let's right screen center gain And this time for the types. Let's right. That's existing playing using extent, all right, And now we need to check whether our focus square it's a plane or not. So let's right if let he test result is equal to hey, test dot first, then creams Focus. Square hits the plane. Els creamed Focus Square doesn't It's a plane, all right, and now it's time to call our methods. So let's go to delegate fine over there. And in this method, I mean update at time, let's call it. But first of all, we need to write something here. We need to you dispatch Q. So that's right. Dispatch que dots main. That's a sink. And here, let's write, update focus square, and now we can see that we've got an error. So call to method update for square enclosure requires X place itself. Yes, because we're using our method inside a closure. We need to add self at the beginning of that, and now the error is gone. So why do we need to use dispatch? Keep as you can see, this patch queue manages the execution of work items, and each work item submitted to Q is processed in a pool of threat managed by the system. Because we are executing the code on the background threat, we need to use the Spanish cue in order to use thes update method in the main threat. I mean, on the you are all right. And now I want to comment this line out because it updates 60 frames per second and I don't want to overlap. All right, so now let's around the APP. Great. As you can see in the council, we've got focused Square. He It's a plane. That's pretty amazing. All right, As you may have realized, we added to assets here an open, focused square and a close focus square. So now let's go to focus square file and over there I'm going to create another variable here. So let's right Bar is closed of type. Boolean is equal to true and open Kerry bracket. And here let's write deep set and again Open Kerry bracket. That's right. Geometry. Question mark dot first material That question mark dot defused dot continents is equal to self that is closed. Question mark and you I image named Close column you image named Open. So what does that mean? What's this question mark and this calling me? Actually, it's a short way of using if statement, so it means, if is closed, is true, then do this or set the image to close else. Set the image to open. All right, now, let's go back to you, Controller And here in our update focus Square method. Let's right here in if statement. Let's right, let on. New model is equal to heat test result. That's anchor is a our plane anchor, and then focus Square local that is closed is equal to at new model. So it means whenever we can add a model, the focus square should be closed. Otherwise, we need to make it open. In the else part. Let's right focused square local that is closed is equal to falls. And now let's run the app and see what happens right. As you can see whenever the focus square does not hit a plane. It shows thes image, and whenever it heats a plane, it shows this one. And this is pretty awesome. All right, So for the last step, we need to update the center point of the screen when we switch you landscape moment. So first of all, we need to add a view. Will transition subclass right above the update for square function? So let's go over there. All right, Let's right. Were you will transition. All right, we're overriding this. So let's write Super. That view will transition to size and for the with That's right coordinator and then let you center is equal to CG Point and you're gonna choose this fund for the X. Let's right sighs that with, and that's divided by two. And for the while it's right size. That's height and also divided by two. And then that's right screen center is equal to view center right. And now let's run our app and see what's the result. Great. And now let's shift to the landscape mode. As you can see, everything is done perfectly all right. Thank you so much for watching this video. You have learned so many things in this video, and I hope you enjoyed it. If you had any question about each part of this video, please feel free to ask me, because I know there were so many complicated concepts and sometimes it's confusing, so don't worry about it and just try to figure it out and let me know if you have any question or I thank you so much and receiving the next video. 10. Adding a model: Hi, everyone. Welcome to another video piece tutorial. In the last video, we have learned how to put Focus Square on the screen in order to place an object on top of it. So in this video we're going to talk about adding a model to the view. So without further ado, let's get sergeant. First of all, you need to add the assets I already added here and you can download them at the end of this section. I added an ad I can also delete Icon and also a recent icon. We're going to use the ad I can in this video, and also we will use thes two icons in the next videos. So let's open up the main that story word. As you can see, we have a are seen view over there, and now we need to place an at Botton over there. But right now we're unable to do that because we need to have a view in order to add a bottom to that. So let's delete these current view right here and now we need to add a you I've you to our view controller, So let's do it for you. I view and Dragon Drop over Dir. And then we need to select the same air kids seen view. So let's write a our kids sink. It's over there and let's put it here and let's make it bigger to feed our screen. And after that we need to add constraints. So let's click on constraints and said 0000 from each side. And make sure that this constraint is said to view, not the safe area. I think we can add for constraints. Great. If you remember, we already talked about the configuration of a our kit. And if I Cleveland, this one, you can see that we have an I B outlet here which were connected to our previous air seeing kids view. But now it's broken, so we need to make this connection again. How can we do that? It's so simple. Can you see this legal circle? Here you can dragon drop toe our air sin view, and that's done. And now let's close this code over there and let's add a button. So let's look for you. I button great and dragon drop it over there. All right, so now let's go to the attributes Inspector and let's remove the spot and text. And now let's set its image to add Great. And now it's time to add constraints. So let's click on that and set the bottom two to any. But let's set it to save area. And after that, let's on check and strain to margins and click on. Add one constraint, and we need to do one more step, which is the alignment. So let's click on alignment Bottle over there and check resentful in container and add one constraint. Awesome. All right now we need to connect our bottom to our coat. So let's click on the Axis and Editor and let's scroll down and legal weed. And now we can hold control button and Dragon. Drop right over there and make sure that the connection is said to action. And let's call it at Botton pressed and you can connect all right, And now let's print something whenever our bottom is tapped. So let's write print. The bottom is pressed. And now let's come in these out. All right. And now we can run our app and see what happens. Now look at here. We've got our focus square And also we've got thesis little bottom here and now. Look at the console whenever I heat this button to get the button is pressed, which means our bottom works. So now we need to just create its functionality. All right. Now let's create a Sufi file. So let's right. Click over Dir new file Sweet smile and Next and let's write Object the station create Let's Closed the SS and editor All right, here we need to import you, like eat as always. And also we need to import sink it and also Nass, but not least a arc eat and let's create an extension of you Controller Care Lee brackets. And now let's write file. Private funk gets model That's right, named name of Type String, which returns SCN node, which is optional, and open care lee brackets and inside we need to write. Let scene is equal to SCN seen named art dot SCN assets as they have this folder order slash and back slash inside name and again slash backslash name. That s C n. All right. And now let's right guard. Let's model is equal to seen, which is optional Dutch roots. Note that child knows with name That's right. Sketch up because our notes name is sketch up and recursive Lee. Let's set it to falls. Ills return Neil. And after that, let's write Model. That's name is equal to name. And then we need to return model right. All errors are gone. And now, in order to make our life more easier, let's connect our bottom two D's file. So let's go to your controller and just select this button and cut it. Come back to object addition and write and write here. Paste it. All right, So here, let's right guard Focus Square is not Neil Ills return. And then that's right. Let's model name is equal to iPhone X as we have it over there and again. That's right guard. Let Model is equal to gets model, which is the function we just created. And for name That's right Model Name else preens the is unable load Modern lame here from files, then return. And now let's write seen view that scene that's root. Note that a child node and here model and after that, let's write print the model lane, and that's right. Just had it to the screen. All right. So now, before running our lab and see the result, let's check if our names are correct, because it's so important. As you can see, we need to use the same name, folder and also the same name for our model. But here we have iPhone X three D, and if I just open this folder can see the name of our model is iPhone X, which is different from thes folders name. We need to make them the same. So let me just change this name, toe iPhone, eggs. And now we're good to run a rap and see what happens. Now you can see that the app just detected the plane for us, and the Focus Square just appeared. So let's see what happens when we click on that button. We've got iPhone X just added to the screen and let me move my phone. There we go. So this is our model. But as you can see, it's not only standing up but also floating in the air, so we need to write some code in order to fix it. All right for sure, we're going to use the same method he testing in order to fix that. So let's go over there and right. Let hit test is equal to seen view that he test and four point that's right screen center. If we're types, that's right. That existing playing using extent and then that's right guard Let world transform. Column three is equal to he test that First, which is optional darts World Transform, which is a matrix that columns 0.3 l's return and then we need to write model. That position is equal to SCN Victor three Parents. This is war TRANSFORM COLUMN three That X comma WORLD TRANSFORM COLUMN Tree. That's why and lastly, WORLD TRANSFORM column three dot z All right. In order to lay down the phone, we need to just goto iPhone axing and that's the legs. Sketch up and go to the node inspector, and we need to set Oiler 20 All right, so now let's run our app and see what happens. So look at the table and press the button. Awesome. As you can see, our phone has been placed perfectly all right, don't you think it's nice to know how Maney models we have in the screen, So let's write something in order to make that happen. Let's go to view controller that sweep file, and we need to declare a new variable. So let's write War number off model off type array, as sin note is equal to brackets. And now let's go to object addition. And here in our bottom function, let's add something here. That's right. Number of model, that upend model. And then that's preens. We have number of model that count model in the scene. All right. Did you notice that whenever we add a model to screen, we still can see the Focus Square? It seems like Embark. So let's fix it together. So let's go to Focus Square file. And here we need to create a new function. Inertia animated. So let's right. Fine set. He didn't to hidden as its property off type rule or bullion open curly bracket. And here, let's right, you are faith too Colin of Type SC and Action. And then that's right. If hidden, then Fe two is equal to that fade out with the duration off 0.5 Els fe two he is equal to that's fade in with the duration of 0.5 as well, and after that. Let's right, let actions. He is equal to faith to comma. That's Ron. Parents says Care Lee bracket inside Focus Square of type SCN node in Focus Square that is hidden is equal to hidden. And then let's wrong the action. Ron Action dot sequins And here Let's right actions. All right, there is one more step to do. Actually want to hide the Focus square whenever we see a model on screen. But what happens if we do not see any model on the screen? We still need that focus square. All right, so let's go to you. Control or file And in the update Focus Square, let's add something guard. Let point of view is equal to seen. View dot, point of view Els return. And now let's right, Let's First Reasonable model is equal to a number of model. That first Kerry bracket Parent is is node and its returns a Boolean in return seen view that is known note. And here let's right point of view. So what does that mean? Actually, we just try to define the first visible model to be the first model on the scene. We're going to use thes first method that returns the first element. Satisfying a condition. All right, so now let's write. Let models are visible is equal to first visible model, which is not Neil. And now we need any statement. So let's right. If models are visible, is not equal to focus Square local that is hidden, Then focus Square local that set hidden two models are visible. So now if the models are shown, we will hide the focus square and wise versa arrived. Now let's run our app and see the result. So let's press the button. There we go. As you can see, we have one model in the scene. IPhone X just added to the screen, and also we successfully hide the focus square. Did you see that? So whenever it's recognizes a model in the screen, it automatically hides and vice versa. So let's add another model to the screen. There we go. All right. Everything is perfectly done. Arrived. Thank you so much for watching this video. I hope you really enjoyed it. And I will see you in the next video. So see you that 11. Image Tracking: Hi, everyone. Welcome to another video of the section in this video. We're going to learn how to detect two D image in order to put an object on top of it, or even an image or video on top of it. So, without further ado, let's get a sergeant. So first of all, let's open up the Exco 10 and create a new X with project. And then we need to choose a new augmented reality app template. Click on next. Let's call it a our kit two. And let's change its organisation. Identify your to a arc Eat too as well next and create. All right. First of all, we need to import our assets to our export. So let's open up the assets over there and I'm gonna dragon drop our assets into it. Right. And also we need to remove these two files, which is the default model move to trash. And now I'm gonna drag and drop our model, which is our iPhone eggs right under art. That s C N s. It's fire. Great. Alright, So first of all, let's go to view controller. That's a file. And here I'm going to make some changes. So first of all, let's set the shows of statistics to falls. And after that, I'm gonna comment this line of good out because we're not going to show any model when we were on our and also this line of code And here, As you can see, we have a our world tracking configuration as we work in the previous videos. But in this video, we're going to track to the image. So we need to change it to a our image tracking configuration and parents says, all right. And now we need to declare a variable for a reference image. So let's right, guard let reference image of is equal to a our reference image dot reference image in group named and here. That's right. A. Our resource is, and with the bundle of bundle dots made bills return. And now let's go to assets over there and here. As you can see, we have three files left, right and reference. So choose reference and right Click on that and choose new air resource group. All right. And now we need to drag and drop our reference to these place. So let me open up its folder And there we go. As you can see, we've got a warning here, so let's check it out. All right, So let me open up the attributes inspector over there and set the with 20.2. And now the warning is gone. All right, let's head over back to B control or five. And here we have another warning as well, which is because we didn't use our reference images constant. All right, and now we need to tell the configuration to track our image. So let's right configuration that tracking images is equal to reference images, and then we need to write configuration. That maximum number of tracked images is equal to one. So basically it means that the application on Lee tracks one target image at the time. All right, let's scroll down a little bit, and now we need to set our renderers. So let's remove these slash and stars in order to own commented. And, as you know, do render allows you to render note from the scene so we will be able to add our model on top of the image and let's right, if anchor is a our image anchor, then let playing is equal to S C and plain with With and Height and Let's set it to 0.7 and its high to 0.35. All right, and now we need to link the plain to see. So the easiest way to do that is to create a Sprite kids seen. So let's right, Look over there and choose new file. And here, let's scroll down a little bit in order to find the sink. It file can also use the search bar in order to look for that. But the's file is what we need. Spry kids seen So pelican next and let's call it device seeing create. All right, so now let's click on this icon over there, and we need to change its with and its height. So let's set its with to 1400 its high to 700. All right. And now I'm gonna add another fight to our assets for Let me drag and drop it over there, and it's going back to device sing. All right. And now, if you open up the media library over there, we can look for our assets here. So first of all, let me drag and drop iPhone X over there great, and I'm going to set its X 20 And also it's why is zero. And again, that's your media library. And this time I'm gonna drag this left fine and drop it here. Great. And one more file, which is the right one. Let's put it over there. Awesome. All right. And now let's go to view controller file and I'm going to declare a new constants right below plane Constant. So let's right, Let device scene is equal to esque. A scene with File lane device scene. And now let's define our plane by setting its content, which is our device ing. So let's write plane That first material a question mark that diffuse that contents is equal to device scene and again. Plane dot first material question mark dot is double sided is equal to true because it's pooling and it means that it's double sided and again, playing that first material. A question mark that diffuse that contents transform is equal to SCN matrix for translate, and for the 1st 1 that's right SCN matrix for scale, and we need to use this one with float and Now let's write one minus 11010 All right, So let me explain to you what's happening here exceeded the default. Positioning off the scene is too bad, and with this line of code, we are fixing its position. And also the content is only one sided. So we wrote this line of code in order to make it double sided. And now we need to know to link the geometry into its and change its rotation to match its anchor orientation. So let's right. Let Plain Node is equal to SCN node geometry playing and now playing node. That's Oiler angles. That X is equal to minus that pie and divided by two. All right, so now let's declare our three D model and the location of our seen. So let's right who are iPhone Note is equal to SCN note. Parents says, because we're using this class. And now let iPhone seen is equal to S. C and seen named art dot SCN assets slash iphone X that as CNN and let's unwrap it with adding an exclamation mark. The now let's write iPhone note is equal to iPhone. Seen that root note that child knowns that first, and let's unwrap it as well. This one is our sketch up file, which is the first element here. So if you look at here as you can see, sketch up is the first element. And now let's write iPhone Note. That position is equal to S C and Victor Tree, parents says. And now let's use this one with three integers and let's set the X 20 and why to zero and Z 20.15 clain known. That's at Child Node And here, let's write iPhone note. All right, and now we need to add one more thing here. So let's write. Note that at Child Node and here, let's write playing note. And now let's go to our iPhone X that scene and let's check its scale. It's too small. So let's change too. 0.4 0.4 and also 0.4 And now let's go to device saying there is one more step to do, and that is changing the capacity off our scene. So right now, if the Ragnar app we will see a dark screen behind our images, So in order to prevent that Let's go to color Anglican custom and let's decrease this a pass iti to zero. And now we're good to go. So let's run our app and see what's the really loved. All right? Now I'm gonna hover my phone on my iPad screen that I have the target image. There we go. Can you see how beautifully tease That's amazing. As you may realize, the position of our three d model is not that good. So in the next video, we'll work on that. And also I will teach you how to work with animations, so see that. 12. Animation & Lighting: Hi, Ron. And welcome back to another video of dese tutorial in these video. We're going to cover animation and lighting in order to make our three D model look more realistic. So let me explain to you what we're going to do. First, we're going to create a function for the Objects Rotation. It's one of the most basic and common types of animation that you may have seen before, and then we're going to add life to make the model look more beautiful. So without further ado, let's get started. So right under Orender that's creates another function and college rotation, Parental says, and it needs to return as seeing action clearly brackets. And here, let's declare a constant Let action is equal to SCN action that's rotates by and for X. Let's write zero and for Z also zero, and we're going to rotate our model by the Y axis. Well, let's set it to see ji float apperances. And here let's write G L K Math degrees to Radiance. And here let's write 360 let's set the duration to three. So let me explain to you what just happened here. As I mentioned before we're going to rotate our model by its Why access? And here we used a built in formula to convert degrees to radiant. And now let's right, Let's repeat action is equal to S C and action. That's repeat forever, because we're going to make it to rotate forever. So let's write your action, and then we need to return repeat action. All right, now, let's go toe Orender or there and let's call our function iPhone known that Ron Action and inside, let's write rotation. Great. So now let's run our app and see what happens, all right? And now I'm gonna harbor my iPhones camera on my iPad to see what happens. There we go. Can you see our three D model is rotating? That's absolutely awesome. But you may have realized that its rotation access it somehow weird, and that is because of its private point. So we need to change that in order to fix it. So if you remember in some previous videos, we talked about private point and how to change its position by changing some parameters in iPhone vaccine. But in this video, we're going to try another way, and we're going to make it programmatically, so let's get it started. So let's right, Let's mean is equal to iPhone node dot bounding bikes that mean and again let Max, which is equal to iPhone. Note that bounding bikes that Max And now let's write iPhone node. That's pilot, which is our private point is equal to SCN matrix for make translation. There we go. And for the first parameter, let's write mean dot x plus Perrin says Max. That X minus mean that's eggs. And for the second perimeter, let's write mean that Why plus parents is Max that why minus mean that why and the last one mean that's the plus parents, says Max. That's the minus mean that Z and also make sure that you divide all of them by two. All right, so now if you run our ab, everything should work perfectly. So let's check it out. All right, there we go. Can you see that? Now? It looks great. So at the moment, our three d mollo is rotating around itself by its why access, which is what exactly we wanted. All right. So have you noticed that whenever I hover my phone on top of my iPad screen. When the application recognizes Thedc Git image, our three D model immediately pops up in order to make it look better. We can add a nice animation to it, so let's do that. So let's declare a constant over there. That's right. Let animator physical to SC and action that scale. Let's scale it by 10 and the duration that set it to four. And at the end, let's add iPhone Node that Ron Action. And here let's write animator. But before running our app, we need to change something. Do you remember that we have changed the scale off our three D model in the previous video ? So now that we have used the's method SCN action that scale, we need to return those values to the previous four. So let's open up the iPhone X that scene and let's choose sketch up. And here as you remember, we removed 10 so we need to turn it back 0.4 and also 0.4 So now with these animator, we scale our three D model by 10 and it's smoothly scales when the APP recognizes the target image so Let's give it a try. All right, so let's check it out. Did you see that? Beautiful animation? As a matter of fact, these little details are so important for your user experience. Please make sure that you have paid enough attention to that. All right, and now it's time to add lighting. So first of all, Goto iPhone X that scene and select sketch up node and then go to the materials inspector and make sure that the speculator IHS said toe white. And because we have the spotlight here, if you try to rotate your phone, you can see this beautiful reflection. All right, and now let's go back to view controller file and right below our configuration, let's write seen view that photo enables default lighting is equal to true because it's a Boolean on also seen view that automatically updates. Lighting is equal to true as well, and I'm pretty sure that he remember that we have used these two lines of code before, and the last line of code is configuration. That is light estimation enabled is equal to true as well. Alright, but let me explain to you something about spotlights because we have download that these three d model. It already had this spotlight by itself. But if you're working with your own three D model, make sure that you dragon drop spotlight from here spot and you can drag and drop easily. And let me show you the settings of spotlight. If you want to manage it by yourself, there we go. The outer angle is 45 degrees, and the intensity is said to 1000 and so on. All right, so let's run our app and check it out for the last time, right? Can you see this little reflection at the bottom off? The phone can also change the position of your spotlight in order to make it better. All right. Thank you so much for watching this video. I hope you enjoyed it. And I receive in the next video. So see you soon. 13. Buttons and Interactions: Hello, everybody. And welcome back to another video of these tutorial in these video. We're going to work with Bottoms as we previously working with that, but this time we're going to add more functionalities to our Parton's. So, without further ado, let's get started. First of all, as you know, we need to go to Maine, that story war. And now, before going on, let's import our assets to our assets file. I'm gonna import these icons so we have successfully important three different icons, which is the change won the minus one and the plus for, and you can download them at the end of this section. So let's go to Maine. That's story bored. And here, as you know, in order to add a button to our view controller thirst awful. We need to delete our default view, and after that, let's add another view to our view controller. So let's look for you, I view There we go on. That's dragon. Drop it over there and now it's time to add our air seem to argue. So let's look for that. A are seen a are sinking view great, and let's make it bigger in order to fit our screen, and now it's time to add constraints. So let's Kerrigan constraints button, all right, and make sure that it's said to view, not the safe area great and zero from each site. So as for constraints, awesome, Now it's time to add our bottoms. So let's look for our buttons. You I button and that's dragon Drop order, all right, And now let's go to the attributes inspector and remove its text. And that set the image to change. Great. And I'm going to duplicate it by holding command D, and that's put it over there and once more great. And let's change the image of the middle 12 plus and the last one to minus. All right now it's time to add constraints. So select the 1st 1 Anglican at constrains. So let's set the left side to 46 make sure that's the view selected, not safe area and also the bottom 2 28 And please uncheck constraint to margins and at two constraints. Great for the 2nd 1 Let's align me to resent Aly, and also I'm gonna add a constraint to the bottom that set it to 28 as well on check constraint margins and add one constraint and the last one. Let's at constraints and set the right side to view and its amount to 46 and also set the bottom to view and its amount to 28 as well and unchecked. A constraint to margins and add to constraints. Awesome. Now everything is done. But as you remember, our connection is broken, so we need to connect our air seen view to our code as well as our bottoms. So let's Creek on the Assets and Editor. And now let's dragon drop from these little circle toe our air Sea view perfect. And also let's connect. Our buttons are code sole control and Dragon Drop over there and let's set the connection to action and name it. Change screen connect and the 2nd 1 and let's cut it plus connect and the last one minus connect. Awesome. All right, so let's declare another variable here. So let's write OIR iPhone X note is equal to SCN. Note. Appearances are right, and also we need to add another line of code here in our render function at the end. So let's write iPhone X known is equal to iPhone known. All right, so let's work on our functionalities Inside the plus button that's declare constant. Let scale Plus is equal to SCN action that scale by two and the duration of two as well. And then, as you know, iPhone X knowed that Ron Action And here, that's right, Scale plus and the same thing for R minus button. That's right. Let's scale minus is equal to SCN action that scale. But this time by 0.5 and the duration of two as well with these amounts were trying to make our model smaller and again iPhone x known dot Ron action scale minus awesome. And with this button, I mean the change screen. We're going to change the screen of our iPhone. As you can see over there, we have one screen here, and if you go to materials inspector and if you look at diffuse, you can see that we have only one screen air original screen that p and G. So I'm gonna import another screen to our project to work with. All right, there we go. So right now we have another screen as well. And now if you look at the materials. Inspector Diffuse. We have another screen here. Awesome. So let's change it to a original screen because we're going to change it programmatically and let's go to your controller file. And here that's right. IPhone X. Note that geometry. Question mark dot first material Question mark that defused dot contents is equal to you. I image named art dot SCN assets slash a Our new screen that PNG are right. You did it. So now let's give it a try. All right, there we go. And now let's try our bottoms. So I'm going to click on the plus Watan. Perfect. Can you see how beautiful it ease? And also the minus button? That's absolutely amazing. And last but not least, let's try out our change button. Did you see that? All right. Thank you so much for watching the studio. I hope you enjoyed it. And I will see you in the next video. So see you then 14. Multiple Screens: higher ruin. I hope you're doing well in the last video. You have learned how to implement your animation inside the bottom. In these video, we're going to create a collection view where we will be able to switch to our desired wallpaper. All right, so let's get started. First of all, we need to import our assets to assets file. So let's open up that. As you can see, we have three different iPhones here and also three different screens. And now let's open up the main That's story bored. And now I'm going to add another view controller to our storyboard. So let's go to our object library and dragon drop of you controller here and now let's go to the attribute inspector and change its background to clear, because we're going to create another view over there. So now it's drag and drop a you, I've you to our view controller. All right, And now let's set constrains kitty conduct button and let's set the left of you and also right to view and set those values 200 and zero and please uncheck constraint margins and set the high too. 380 at four constrains, all right, and now it's time to make our corners round it. So let's go to the identity inspector. And here we need to create a key path and let's write layer that corner radius of type number and said its value to 38. Right now, you cannot see the result. But if you run the app, you'll see that. So just be patient. And now we need to create a Segway in order to connect. Our were controllers together. So at the top over there you can see an or a circle. You can easily drag and drop it over there and please choose present Model E. And there we go. We successfully created are saving, and now we need to set on identify her for it. So let's go over there and here. Let's right main to die a look all right, And now let's drag and drop label. So let's look for label and Dragon. Drop it over dir and let's right, choose the screen and let's put it over there, all right, and now it's time to align it to the center of resentfully. There you go, and also we need to add constraints. So let's set the top 2 30 great. And let's make it bold because it looks like a tight Also, let's go over there and change the style too bold, and I'm going to change its color to something like Dark Grey. Awesome. All right now we need to drag and drop a collection view from our object library. So let's open up the object library and look for collection view. There we go. Let's drag and drop here and now it's time to add constraint, so let's click on that bottom. I know it's a little bit confusing, but don't worry. If you have any question, you can ask me any time. So let's set top 2 30 left to zero right to zero as well. And let's set the high, too. 250 at constraints. Awesome! All right, so now we need to create a class for thes view controller. But for that, as you know, we need to create a certified by holding command and can create a new file polka touch class. Click on next and let's change the subclass to you. I will you controller and it's college dialogue and click on next create Awesome. Now, if you go to Maine, that's story. Bored and kick on this little circle over there. We can set a class to this view controller over dinner and let's write dialogue. Awesome. All right, now let's click on the assistant editor, all right, and let's remove these comments. And now we need to connect our view. I collection view to our quote. So let's select Collection V over there er and hold Control and Dragon Drop right above the view did load method and let's call it screen collection Were you connect Great, All right. And now inside of you did load method we need to write screen collection view that delegate is equal to self and also screen collection view dot data source is equal to self. So what does that mean? Actually, we just connected our your collection view to our were controller. And now with these two lines of code, we just got permission to use that to your collection view inside our your eye view controller. And now, as you can see, we've got two errors, and now we need to fix that. So I'm going to create an extension in order to separate our code. So let's write extension dialogue. Colin, you I collection view delegates comma your collection view data source and carry brackets. And as you can see, we've got another error here. But the two previous errors are gone, so these time it's so easy to fix that. Let's click on this error and click and fix exclude automatically just created for us thes two necessary methods. So the first method, as you can see his number of items in section. So here, let's write return. Three. As you can see, it needs to return an integer. And for the 2nd 1 which is our cell for item at That's right, let Cell is equal to collection. View that dick your usable cell we tree use, identify air and let's right screen. But we haven't said that yet. Four Index path. And after that, we need to return sale. As you may know, it's like working with you. I tape of your controller. It's so simple to work with. All right, so let's go to Maine, that story word over there and now, as you can see, we have a small cell here and we can set on identify for it, which is screen has be used in our coat, and then I'm going to resize it. So let's change the default to custom and change the with to 140 high to 250. All right, and now let's go to screen collection view. And here we need to change the meaning spacing for cell to 20 and also section insets left to 20 as well. So right now we haven't enough space between each cell or between each image. And that's Kerrigan Cell and change its color to white. Because our collection we used white as well. And now let's drag and drop a button inside ourselves, and that's constrain it. Let's zero regains top the ratings left and also zero against right and unchecked constraint margins and set the high to 220 at constraints. So now let's select the bottom and change its image to iPhone X one. So now let's remove the text. And now let's change the content, want to aspect feet in order to prevent it from stretching, and now we need to add another label. So that's right label Dragon. Drop over there and let's change it to iPhone eggs and it said constraints zero to the bottom and uncheck constraint margins. And now let's align it resentfully. Great. Now select screen Collection V Over there and in the Attribute inspector, let's uncheck show her resentful indicator and also show vertical indicator. And that's changed a scroll direction to horizontal right? And now let's go to the controller. And here in our change screen button, let's remove this line of gold and write Perform sec. They would identify air and let's right the identify here, which is main to dialogue and descend er to kneel. So now let's run our app and see what's the results so far? All right, There we go and that's Creek on our change screen button. Perfect. It's a score herbal collection, will you? But all the images are the same, and also all the titles are the same, so we need to fix that as well. All right, so let's work with data right now. I'm going to open up the dialect file and here I'm going to declare an array and let's write screens is equal to brackets, and here I'm going to write the name off our screens which is screen one screen, too, and screen three. So right now we need to connect these array to ourselves. But none of these components are connected to ourselves, so we need to create another file for ourselves. Pelican. Next and here let's write dialogue, sell and subclass up You I collection will you sell and next create. All right, So now let's open up the main That's story bored and also kick on the assets and editor. But here we need to work with dialects. Selfies. So let's look for that manual air kid to There we go, all right, And now let's click on screen over there and said It's class to dialogue cell. And now he can hold control button and drag and drop from there to our code and create an I B outlet. And let's call it Screen Button Connect and also our label. We need to do the same thing for that. And let's right screen label Connect, All right, and now let's go to dialogue. That's a file. And here we need to downcast our cell. So let's go over there and right as an exclamation mark. Dia like cell. So what does that mean with these code, which is called down casting? We are using the components inside thes class for these reusable cell, and now our components are connected and we can use the rial later. All right, so now we can write, sell that screen button that sets image and for image. Let's write you. I image named, and we need to use our ray here screens with the index path, that role. And here let's right that normal. So now let's run the app and see what happens. All right, let me press the bottom. There we go. As you can see, all the images are different right now, but we still have a lot of work to do. So now we can use the same technique to change the labels. Toilets, dictator and new Array titles is equal to brackets. The 1st 1 That's right. I phone one. The 2nd 1 iPhone two and the last one. IPhone three. All right, and let's go over there Cell. That screen label that text is equal to titles index path, that road. So now we have Fikse to problems. The 1st 1 was our images, and the 2nd 1 waas our titles, All right, so let's go to Maine that story words and open up the assistant editor in the Dialects cell file. We need to connect an Ivy action for our bottom. So let's hold. So let's hold control and drag and drop it over there and change the connection to action. And here, let's right screen image Bottom connect. So we need to dismiss the collection we whenever the user clicks on each of those buttons. So let's dig near a protocol protocol. Diallo collection view Cell delegate and here for the requirements. Let's write funk screen image. Botton France's So Now to be able to call the delegates, we need to declare E, too. So let's go over there and declare a variable. You are Delegate Colin dialogue collection of you sell delegate, and I'm gonna make it optional than inside our screen image button. That's right. Delegate question. Mark that screen image button. And now let's go to dialogue that see file And here I'm gonna create another extension and let's write dialogue of type dialogue, collection, view cell delegates and click undies, error and fix it. And now we need to write cell that delegate is equal to self, and now inside this function, we need to write this means and you made it true. Completion, Neil. So now we can simply dismiss our collection of you. Now we need to create another protocal to be able to send a delegate to the view controller bythe Segway. So in these fire, let's declare a protocol protocol. Oh, and let's call it dialogue delegates and for the requirements that right fung screen image Bottom France's. Then let's declare it over their war. Barely get Colin off type dialogue delegates and let's scroll down a little bit. And here inside our screen image bought and function. Let's write delegate question mark dot screen image button. And now let's go to your controller and I'm going to create a new extension at the end Extension you controller off type dialogue delegates care Lee brackets. And then let's fix this error. All right, so actually, now we need the SEC mate to perform a connection between those two. That's declare an if statement, and that's right. Prepare for Segway and here. Let's right. If Segway that's identify air is equal to Maine to dialogue curly brackets and here let's right. Let two we see is equal to Segway, that destination as dialogue. And then let's right to we see that daily get is he called himself. And now we need to send the information of the index to be able to retrieve the information . Now let's go to dialect cell file and declare a variable war index is equal to zero, and we need to change something here. Inside these parenthesis is that's right index as its property and int as an integer and also here. We need to fix that and for this integer Let's right index. So now, whenever the user clicks on each image, the APP recognizes Theo Index number. And also let's go to dialect file. And here we need to add again index Colin int, And then here let's write cell. That index is equal to index path. That's row, and now here we are able to retrieve an image. So let's right image as its property of type. You are image and now we need to declare another constant. So let's right, let images is equal to brackets and here we need to write their names, so we need to change something here these constant should be called images, and this one should be called screens because these are the name of our screens. And here, let's write iPhone, Ext. One. I'm going to copy and pace it. IPhone X two and also iPhone eggs three. And now let me scroll down a little bit. And here we need to fix this error. E mail. It should be you. I image open parenthesis is named. That's right. Images brackets. And here let's right index and also when you to unwrap it. And now let's go to the view controller. So here we need to fix this error and remove that. And here, let's write iPhone X note that geometry. Question mark dot first material that defused that contents is equal to image. All right, everything is done. I know that there were a lot of information that you need to refer to, but do not forget that practice makes perfect. So let's run our app and see what's the result. All right, there we go, and that's pressed this button. So as you can see, we cannot see the camera, so we need to fix that. But all the images and all the titles work fine and let's click on one off them. As you can see, our collection views dismissed. So let's check what's the problem? So let's go to Maine that's story. Bored and check everything out. So let's click on sake, way over there. And as you can see, we set the presentation to current contexts. We need to change it to over current context. And now if you run our app for sure, our problem is solved. All right, now let's check it out. There we go. Everything looks fine. So now we need to check our buttons as well. So I'm going to select the second wallpaper. That's awesome. Did you see how niceties and let's try the 3rd 1 to make sure all of them work. Great. That's amazing. Arrive. Thank you so much for watching this video and you have successfully finished this section. In the next chapter, we will create another augmented reality project with the help of quick look framework in order to present three D models so quickly. So see you then 15. What is Quick Look framework: Hi, everyone, welcome back to another section of thes tutorial in these section. We're going to talk about a are quick look in Arya's 12. It's basically framework that allows users to preview a whole range of five formats, such as PdF's images, etcetera. In addition, now we're able to use it for showing three D models to our users. And not only can they previewed in a three D environment, but also they can augment it in the real world. That's awesome. So to implement that we need to work with us. DZ files. So let me tell you what us DZ eats. Basically, it's a Zip archive that packages the model and its texture into a single file. It stands for Universal Seen Descriptions it, and it's a five created from a collaboration with peaks er, an apple. You can convert your three D models to us DZ file easily, but the format of your model should be either that's o B J or that's D E. All right. Thank you so much for watching this video in the next video. We'll create our first quickly project together. So see you that 16. Setting up a Quick Look project: hi, everyone in these video, we're going to create our quickly project so we don't for do Let's get a start it. First of all, let's open up the X code. There we go. And let's create a new export project. All right, we need to create a single view app. So let's click on next. And here. Let's call it a quick look. And for the organisation, identify. Let's right. Quick, look as well and click on next. Create. All right, Everything is fine. So now we need to add our assets to assets. Fine. And also our models are projects Will let me just drag and drop our assets to our project. Let me go Toe assets file. And here I'm gonna drag and drop these images and also the folder of our models. And let's Dragon drop it right below. Quick, Look, Fuller. And make sure that you check these Jake box and click on finish. All right? Everything is not. And now I'm going to copy and paste an array off our models name, so let me copy and paste it. All right. As you can see, we have our ray here, and these are names of our models over there. We have this folder, and after that I'm going to declare a variable here. That's right. War thumbnails is equal to brackets and inside that we need to write you I image. And then we need to instance she ate it, all right, and also another variable. Let's call it Thumbnail Index is equal to zero, all right, and now we need to use our array over there. So let's go to beauty glowed, and I'm gonna upend our models into these array. So I'm gonna create four loop That's right for motto in Models. Then that's right. If let Thumbnail is equal to you. Image, Miranda says. And inside, let's write named Quotation Mark back slash apparatuses and inside, let's write model that J P. G, which is the extension of our images. Then Kerry brackets. That's right, Thumbnails. That's upend because you're going to add a new image into our array and inside that lets right thumbnail, which is this one. So at the moment we successfully added our images into this array because we're going to set those images to our collection view in the future. All right. Thank you so much. for watching this video. In the next video, we will set up our collection view in order to add our images and also the title for each specific image, So see you next. 17. Adding a Collection View: Hi, everyone. Welcome back to another video of these tutorial in this video. We're going to set our collection view and use it to show our images and also the title for that. So without further ado, let's get started. First of all, let's open up the main that storyboards file, All right, and here I'm going to open up the object library and look for a collection view Here. There we go and Dragon drop it to our campus. Awesome. So let's put it over her and make it a little bit larger. All right, Now it's time to add constraint, so let's click on that constrains bottom and let's set the left to view and let's set its value to zero and also right to view and zero. And let's set its high to 200 and let's set the top to you as well and set it to 60. All right, And after that, if you click on collection view over there and go to the attribution Inspector, you can change the scroll direction from vertical to horizontal and also make sure to uncheck show horizontal indicator and also on shake the show vertical indicator great and Now let's go to the size inspector and we're going to change the cell size. Let's set the with to 150 the high to 200 and also changed the mean spacing for cells to 20 and four lines to 20 as well. All right, And now, if you click on the's collection you sell over there and go to the attributes inspector, you can set on identify her for it. So let's write, sell Great. And now it's time to add a view to ourselves. So let's look for you. I view and drag and drop it right over there and try to make it fit. All right. And now let's set the constraints zero from each side and make sure toe unchecked constraint margins and add for constraints. And now let's go to the collection view and go to the size inspector over there, and I'm going to change sections that's from left to 20 from right to 20 as well as you can see, we could at thes empty space. Great. So what else do we need? We need a picture for our thumbnail and also a label for our models name. So let's add them. Go to the object library and that's dragon. Drop an image of you great. So I'm going to make it 130 to 130. That's awesome. And also we need to add a label. So let's look for that. There we go, and that's what it order, All right, and now we need to create a five for our cell class. So let's go over there and right Leak Anglican new file and select Cocoa Touch Class and click on Next and here. Let's set the subclass to you. I collection View Cell and let's call it, sell class and click on Next. Create awesome on Let's open up the main that story world in order to set our class and now click on Cell over there and go to the identity inspector and set the class to sell class. Great. And now he can hold all button Anglican, sell class file notice, split the screen and could work easier. So now what do we need to do? We need to connect our objects to our coat, so let's do that. First of all, I'm going to connect our image view, so let's hold control Watan and drag and drop it over there, and the connection should be an outlets. And let's call it model thumbnail connect and let's connect our label as well. Hold Control Watan and Dragon dropped over there. And let's call it model title Connect R right? So we successfully created our cell class, and as you can see, all objects are connected. So we need to connect our collection view to our view controller code. So let's open up your controller and I'm going to hold control. Button and Dragon dropped from collection view to my view controller file. There we go on, Let's call it collection view. Connect All right. The next step is to add our collection view protocols to our view controller class. So how can we do that? You can either at them here, or you can create an extension in order to make our code more readable. So let's write extension. Were you Controller Colin? And here let's write you I collection view daily gets comma you I collection view data source and carol brackets. So as soon as we add our protocols, the X goat will give us an error and tells us that we need to conform to obligate three methods when we're working with the U A collection of you. So let's click on that error and let's fix it and I'm going to make it larger so we can work is there before writing any quote. Here, let's register. Are you a collection view? Into our view? Did loads. So let's go over there and right collection of you. That data source is equal to self and also collection view That's delegate is equal to itself as well, and last but not least, collection view that reload data. So here in the first method, we need to return an integer. We need to return the number of items in section. So how many items do we have? You're right. These are our items, so we can just go there and return models, which is our array. With the syntax of count. We can get the number of that all right in the second method we need to create ourselves. So let's declare a constant. That's right. Let cell is equal to collection. View that D cube reusable cell with reuse, identify air and the identify iris cell as we already set that to our cell in storyboard. And here, let's right, index path. And after that we need to write as question mark. Sell class. So what does that mean? Actually, here we're down casting ourselves. It basically means that we're using the cell class as our collection view class. And after that, let's right. If let Cell is equal to sell, then let's write. Sell that model thumbnail. That's image is equal to thumbnails, brackets and inside. We need to write index path dots items. So it means that we're using the index off each cell in order to set the correct image to that. And after that, let's right, Let's title is equal to models, brackets and inside Again index path. That's item and that seat. We can also capitalize our titles so we can write sell that model title. That text is equal to title that capitalized great and last but not least, we need to return our cell, and we need to unwrap it as well. So let's write cell and add an exclamation mark. Great. Everything is fine. So now let's there on our app and see what's gonna happen all right. As you can see we have our collection view over there, and we can scroll it resentfully. And also we have our titles. But we need to change something because, as you can see, our titles are not completely visible, so we need to fix that. And if we click on each item, nothing happens because we didn't add any functionality for our quick look preview controller. All right, so let me fix this title issue. So let's go to Maine. That story words, and I'm going to select our title and let's make it bigger. And also, I'm gonna add another label as our section naval over there. So let's call it three D models and I'm gonna make its bowl. So let's go to the attributes, inspector, and let's make it bold, Awesome. And now it's time to add constrain. So that's click on that bottom and uncheck and strain to margins. Here, let's write 15 and also tend to the top and at two constraints. Great. So let's run, are up once more and see what's the result. Great. As you can see, everything is fine. All right. Thank you so much for watching this video. And in the next video we will add our que el review controller to our code in order to present another view controller. And we can see our three D models in a three D environment and also we can augment them in the real world, so see that? 18. QL Preview Controller: Hi, everyone. And welcome back to another video of peace tutorial In these video, we're going to add the quickly framework to our project. And after that, we can present our three D models with help off que el preview method. So without further ado, let's scale started with opening up the view controller file. And first of all, we need to import our quick look library. So that's right. Quick. Look. Great. All right. As you can see, we've got a warning here. File view controller that sweep this part of module quick look, ignoring import. And that is because we named our project quick. Look, so we need to change that. Otherwise we can not add our library into our view controller because it cannot recognize that library when we're working with the same name. So I recommend you to create another project with another name, or you can just simply change the name of your project. So I'm going to create another project. But in order to save your time, I'm not showing this process to you. All right. I created a new project with a are quick look app, and hopefully our problem is fixed. That you can see we didn't get any warning here and now we can easily add our quick look protocols to our project. So let's create another extension over there. Extension view Controller Colin. And here let's write que El Preview controller Delegates comma que el preview controller data source barely brackets. And here we need to conform. These two obligatory protocols, like for our collection view, and the 1st 1 refers to number of preview items. It means how many models or how maney objects do we need to preview or how many items do we need to preview at the time? So when we are dealing with three D models, we can only add one single model at the time, so it should return one. And for a preview controller, we need to create a U R L. So let's right, Let you are. L is equal to Bondo dot main that you are l for resource with extension. And here let's write models, brackets and inside. Let's right thumbnail index with extension off us DZ and we need to add an exclamation mark in origin on rapids. And after that, we need to return. You are l as que el preview item Great. So now we need to go to this extension and add another method, which is called Heat Select Item at. And here we can write. Thumbnail Index is equal to index path dot item and then let preview Controller is equal to que el preview controller and when to incense, she ate it. And then let's write preview controller. That data source is equal to self, so we're registering them. And then let's write preview controller. That's deli get is equal to self as well, and the last thing is to present our preview controller. So let's write present, Durante says. And inside that's right. Preview control, her comma animated. And here, that's right. True. All right, everything is done. So let's run our app and check it out. As you can see, our collection view works perfectly. So now let's check our three D models. Let's click on the's T part. There we go. As you can see, it presented our three D model and we can rotate its make it bigger or smaller. Can you see how beautifully teas and also you can click on A are in order to place it in real world. That's pretty awesome. And if you double click on that, its size would be 100%. And also you can take a photo. There we go. And last but not least, we can also share our model. As you can see over there, we have your activity controller, and we can share it easily. So, for example, the user can send this US DZ file to his or her friend, and they can just open it up easily if they run all yours. 12 on their phone. So let's shake other models as well. That's pretty Viasa. And they are. So let me make it smaller. Perfect. That's pretty cool arrive. Thank you so much for watching this video. I hope you enjoyed it. I will see you in the next video. 19. The End Video: Hi, everyone. I am so happy that you have completed thescore successfully. We had the line journey together, but hopefully we could pass through it. I cannot wait to see your amazing applications on the APP store. And if you made any application, please let me know. I would like to share it on my social media and you can also follow me on Instagram or subscribe to my YouTube channel for free IRS tutorials. I would appreciate if you could leave an honest review for the course, and that helps me to make the course better and better For you. This was an honor to be your instructor in these scores. And I hope to see soon in other courses, have a good time. And if you had any questions, please feel free to ask me, Thank you so much and goodbye.