Hi, within this lecture, we're going to see how we can create our own views inside of an augmented reality project. So, in order to do that, I'm going to create a new Xcode project because eventually we're going to create our own solar planet app in this project as well. So, I'm not going to use the old one, I'm just going to create a new one. So, come over here to create a new project and make sure you select 'Augmented reality app' one more time and this will be our solar system app. So, I'm going to name the SolarSystemArKit and make sure SceneKit is selected as technology and I'm going to place this under my iOS app folder. So, here you go now our app is created.

So, let me bring this up and let me make this into a full screen mode. So, let me come over to my view controller and I'm going to delete everything because we're going to create everything from scratch. So, let me get rid of this as well. All we have to do is just leave the sceneView.delegate to serve in the viewDidLoad because we're going to create all the scenes nodes and everything in here. So, first of all we're going to see what a node is and we're going to see how we can add our nodes to the scene views.

And of course in order to create nodes, we have to create other objects as well. As I said before, nodes by themselves do not do much, they just actually specify the coordinates, the materials that we are using inside of our scene. So, as you can see if I write SCN, I can see there are some options like SCNBox, SCNSphere, and other things as well. We're going to work with all of these things. So, first of all, I'm going to create an SCNBox. So, this is a view, this is a box view that we can create and as you can see it has some width, and height, and length. And as the 4th parameter, we have some radius as well, maybe you can't think that this isn't even a sphere. Why do we have a radius over here? But in fact SCNBox is not a rectangle or a cube by itself, it can be a polygonal thing so that we can have more than four dimensions over here. So, for width I'm going to go with 0.1 and for height and length I will do the same thing, and for radius I'm not going to go for something big, I'm just going to go for 0.01. And remember all these measures are in meters, so don't go crazy in here, you have to specify something less than one meter most of the time. I'm going to assign this to be a variable called myBox. So, this will be myBox. After that, I have to specify the texture, the material that this box will have. So, if you say myBox.materials as you can see, it asks us to create an SCNMaterial array in which we define the content of this box. And I'm going to say this will be equal to some array, but in order to do that, of course I have to create that material first. So, let me create this and I'm going to call this something like box material. Of course you can call it whatever you want. After that, it will be an SCNMaterial like this and this will be not sufficient. Of course we have to specify the texture or image that this material will take, but eventually we will come down to here and say this will be box material inside of an array, just like it asks.

Later on, we can specify the image that this material will take. So, in order to do that, let us find some images, let us find some textures that we can use. So, I'm going to go over to this open gameart.org one more time. Remember that's what we used in the SpriteKit section as well. So, we have some free images over here to use it, use them in our games, in our augmented reality apps, and in other apps as well. For example, we can see the 3D art, we can see the textures over here.

So, I'm going to create a box and I want to wrap this box with some texture and I will just look around over here to find a good texture. I'm just doing this randomly, so you can try with other textures as well. For example, I see a wood texture over here, it would be good to wrap my box around. So, let me open this in another tab and I will continue to find other textures as well. For example, we have something over here. It kind of looks like a wall but I don't believe it's good so I'm moving over. I see a grass over here so it may be interesting. So, let me open it as well. And over here I see some wall, I'm going to take this as well.

So, if you don't want to do the steps, you can just take them out of my GitHub account as well, but I will download those and I will try them one by one. So, let me take this grass and I believe we have a lot of grass options alternatives over here. It doesn't matter, let me just download it. And we have two walls over here, I'm going to go for the first one. So, let me download this as well. And here we go, now we are ready. Let me open my downloads folder and I'm going to create a new folder called ARKit Visuals, and I'm going to bring all of these images inside of my folder so that we can see it better. So, under this folder now I have a zipped file. I'm going to open this with Archive Utility or any other unzipping software that you have. For example, we have different kinds of grasses over here. So, let me name this wall, let me name this wood, and let me choose a grass from this list. And I believe this is good. Let me name this grass. And we're going to bring them in to our art.Sarts folder.

So, let me choose everything from here and bring them in like this. Great, now we're going to use those visuals in order to wrap our box around. So, way to do that is to give this as a content to our materials. So, you have to come over here and say boxMaterial.diffuse, and if you say diffuse, you get to change the content of this material. So, after that you can say content like this and it will ask you any object and I'm going to give it a UI image object and it will have the name of our newly brought in wall.png or other things, but we cannot come over here and say wall.png, we have to say art.scnasset, so whatever we see over here, so it has to be exactly the same as it is. And then a slash and then something like wall.png. So, if you're doing this with another visual then you're more than welcome to do so but you have to specify art.scnassets folder first. And after that, we're going to create our node because we want to specify the position that this box will take in our scene.

So, it will be an SCN node and this node will have a position and if you write position like this, you can see that this asks for an SCN Vector three dimension. So, let's choose this. And if you open parentheses, you will see that it asks you to give some X, Y, and Z coordinates. Again, I'm going to give zero for X and 0.1 for y. So, it will be 100 centimeters above us and I'm going to say -0.5. so it will be 500 centimeters away from us.

After that we are now ready to add this to our scene view actually. But let me give this geometry first because we have to connect our node with our SCNBox. So, that's the way to do it. Now I can come over here and say sceneView.scene.rootNode. So, remember the root node? That's how we add child to the root node. So, add child nodes and this will be the node. So, that's why we have done this four loop before in the previous lecture, remember I told you you will understand it much better once we do that and now you see why? Because we can reach all the nodes inside of the scene with that loop that we have done in the previous lecture. So, let's run this on our phones so that we can see how our wall.png will look like in our living room. So, let me run this and here we go. So, I'm going to bring in my phone to my screen, and once I open the app you will see the box wrapped around the wall.png, and here you go. Now we can see every aspect of this and as you can see it's looking good, it's a cube and it has the wall.png wrapped around.

Now I believe we can test this with other visuals as well. For example, let's go for the grass. So, let me run this one more time to see grass.png wrapped around my box. So, let's run this with our phones again. So, here you go build succeeded and once we open it we will see the grass. It doesn't look good because this image is not very suitable for our box I believe, but this is working well at least. So, let me test this with other visual as well. I believe it's called wood but wood.jpg rather than PNG. So, make sure you change the extension as well. So, once we do that, here we go now, this is better. So, this is a cube wrapped around with wood.jpg. So, as you can see we can bring in our own views, we can create the views, we can set some materials and contents, we can assign them together to show them in our scene. So, that's cool. So, let's stop here and within the next lecture we're going to create a sphere rather than a box and we will wrap the sphere with our content so that we can see how it looks like.