ARKit Tutorial: The Complete ARKit Developer Course for iOS 11 - First Hour

hi there I'm Rayan and in this course you're going to build many apps using AR kit you'll go from beginner to extremely high level by building 11 apps step by step to access the full course just click on the link in the description below in this video I'm going to show you how to build this basic house and display the house in the phone's camera view and the first step to doing so will be to learn about world tracking we're going to set up the camera such that it can track the phone's orientation and position relative to the world around it Xcode is the platform you'll be using to set up your a arkad apps so open it up create a new project a single view application call the project world tracking press next and create the first thing you want to do is go to the main story board and to the initial view controller add an a arquette scene give you the a arcade scene give you gives a camera view of the real world such that the user can display three-dimensional content inside of this camera view so expand the a arcade scene get view to the edges of your super view and make sure to pin it to the bottom top leading and trailing space open up the assistant editor and make sure to link your a arcade scene Kivu to the view controller with an iboutlet called scene view connect the IB outlet close the assistant editor and bhakti review controller import a Arquette to use the AR K framework and get rid of this error and declare a constant configuration of type AR all tracking configuration so configuration is equal to AR world tracking session configuration world tracking is used to track the position and orientation of your device relative to the real world at all times this is very important because if the phone doesn't know where it's positioned relative to the world around it then it wouldn't be able to effectively display three-dimensional content in certain places of the war so make sure that as soon as the view loads you're seen he runs a sessions is that it has this configuration to do that right self the scene view the scene the session the run configuration now the device is able to track its position and orientation at all times now ad debug options to the scene view by writing self the scene view dot debug options is equal to an array type of debug options such that the scene view is going to show feature points so AR SC and debug options the show feature points and the scene view is also going to show the world origin AR SCN debug options does show world origin adding debug options doesn't really do anything in terms of functionality it simply helps us debug the app by showing us if the world origin was properly detected and if the feature points are constantly being discovered the world origin is your starting position in the real world so as soon as you launch the app world tracking detects everything in your environment and keeps track of where you started the starting position is your world origin feature points are simply information about features in the world around you that the device detected the device remembers all of that information to precisely pinpoint your position at all times this will be more clear to you when I run the app but before running it there is one last step we have to do which is to go to your info dot P list since you're using the camera you need the property privacy press on the plus button privacy camera usage description this property displays an alert to the user asking him or her to allow the app to use the camera if you don't put this property your app will simply crush add a descriptive message to that property saying you need the camera to display cool AR kick content this message is going to pop up to the user prompting him to enable the camera so run the app notice the alert prompting the user to allow the app to use the camera as well as the descriptive message you give it you need the camera to display cool erikak content so enable the camera by pressing ok and give the device a few seconds to figure out its position in the real world so now if I move backwards you should notice this three dimensional coordinate system we'll go over this coordinate system in more depth and other lectures well for now just know that this is the world origin and represents the starting position of the device relative to the real world once you launch the app the scene view runs a session such that it's configured to track the devices orientation and position after a couple of seconds after it analyzes and recognizes the environment around it it's able to track where my starting position is if I move towards the origin walk around it or even rotate my device the device is still able to pinpoint where my starting position is in other words the seen use configuration is able to track where I started and this could only mean that the phone is always keeping track of its current position and orientation this is awesome now scene is yellow dots these are called feature points one of the ways the device can always keep track of its position is by detecting features in its surrounding environment as unique pieces of information that information is used to precisely pinpoint the current position and orientation of your device in the next video we are going to display a three-dimensional virtual object in the physical world in the last video you were able to set up world tracking such that the phone always knows its position and orientation as well as its starting position in this video you are going to display a box in the physical world such that it's positioned 0.3 meters away from the starting position the world origin so first off go to the main story board and to the initial view controller add a button to the bottom left call the button add and pin it to the bottom left by about 20 pixels from the leading space and from the bottom space with a width and height of about 80 pixels ad before constraints and I seem to have placed a height of 800 where I should have placed 80 instead let me just fix that in my size inspector and it looks good now back into my attributes inspector let me place a background color of whites okay open up the assistant editor and link your button to the view controller with an IB action call the IB action ad make sure it's an action not an outlet connect the action close the assistant editor and back to your view controller this IB action gets triggered every time you press the Add button so every time you press it declare a node by a writing Latin node is equal to SC uh node so a node is simply a position in space it has no shape no size and no color put the node inside of the scene view by writing self da scene view da scene root node dot child node node so the scene is what's displaying the camera view of the real world we want to position our node inside of the scene so the scene has a root node the root node also has no shape no size or color and it's positioned exactly where your world origin is so exactly where your starting position is if I make this node a child of the root node then whatever position we give this node it's going to be positioned relative to the root node okay so now the node is inside of the scene and as I mentioned before the node is not visible on its own it's it has no special attributes we need to give it those attributes so first give it a shape by writing node geometry is equal to SC n box with a width height and length of 0.1 meters and the chamfer radius is simply how around the edges of your box are the higher the value the round are the edges well play with this in the future but for now I'm just going to leave it as zero so by giving this a value of zero the box will have firm edges because I'm telling the node to take away zero meters from the edges therefore don't take anything away from the edges leave it firm now you should give the node a color to do that write node dot geometry dot first material first material defines the appearance of the surface of our node of our box for that matter and now we right dot defuse defuse represents the color that spread across the entire surface of our box I'm going to give it a color of blue so dot contents is equal to UI color blue feel free to give it any color that you want so now you gave this node a shape it's a box what dimensions of 0.1 meters and no chamfer radius it's going to be a firm box and you also gave the node a color that's spread across its surface a color of blue the node is also inside of our scenes camera view you're only missing one thing the node sure is inside of the scenes camera view but where is it positioned that's right nowhere you need to specify the position of the node before going into this let me just run the app and show you something so let me just wait till the felon recognizes its surroundings and as soon as it does the world origin should load and here is the world origin remember how I said that the world origin your starting position is actually a coordinate system well it is the red line you see right here is the x-axis the horizontal axis and the Green Line is the y axis the vertical axis the blue line right here you see is the z axis which refers to depth how far or how close something is to the origin to the starting position inwards or outwards so back to Xcode we're going to position our node relative to the root node relative to the starting position so right node dot position is equal to SC n vector 3 0 0 and 0 SC n vector 3 represents a three dimensional vector we need a three dimensional vector since the nodes position is based on three axes the x y&z axis this represents the x value your Y value and your Z value so according to what we have right now our root node is going to be 0 meters away from the x-axis 0 meters above the y-axis and 0 meters from the z axis so basically our node should be perfectly aligned with our starting position run the app to see if that's the case so if I just wait till the phone discovers the area and as soon as it does the world origin loads now where do you think the box will be placed if I press add that's right the box gets placed exactly where your starting position is since that's what we meant to do we placed at 0 meters from the x-axis zero meters from the Y and zero meters from the Z making it perfectly aligned to our starting position so now back to Xcode what if I were to give the Z field a value of negative zero point three what will happen is the box will be zero point three meters away from the origin behind it behind it since we added and negative if we took off the negative the node would be zero point three meters in front of the world origin run the up let me just wait till lead device detects its environment and the world orange and loads and right here is the world origin now if I press add what do you think happens and there you go the box is placed 0.3 meters 30 centimeters from the world origin now if you look at the blue line like I said before that is the z axis and these that axis controls how far or how close something is to the world origin and it's pointing away from the box meaning that the box is indeed behind the z axis by 30 centimeters now here's a challenge try and have the box be 30 centimeters so 0.3 meters in front of the world origin not behind but in front and about 0.2 meters above give it a try so here's what you would do 0.3 meters in front of design axis that would just be a positive value for a 0.3 and if you want to place something above or below the world origin what you would have to do is change the Y value we're going to position it relative to the y axis so two places there a point two meters above the origin just put a zero point two for the Y field and you should be good to go run the up so I'm just going to wait till the phone detects its environment and as soon as it does the world origin should load right here and if I press add where do you think the box will be placed so zero point two meters above the y axis and zero point three meters from the blue line in front of it and there is our box zero point two meters above the y axis and zero point three meters in front of the blue line the z axis now try and place the box zero point two meters to the right of the world origin pause the video and give this one a try so I believe the challenge was to place the Box 0.3 meters to the right and what's responsible for horizontal alignment is the ax axis so if you want to play something to the right or to the left of the world origin you have to change this X field to place something to the right the value would be positive to put something to the left the value would be negative we want to place it to the right so just leave this as a positive and run the app so as I'm running the app according to this the box should be 0.3 meters to the right 0.2 meters above and 0.3 meters in front of the world origin so let me just wait till the world origin loads while that's detecting its environment and I think it just loaded it's right here so if I add my box here is what should happen the box should be 0.3 meters to the right of the world origin so let me move to there right 0.2 meters above the y axis the Green Line so go 0.2 meters above and now if I point my film such that it's looking 0.3 meters to the front of the z axis there is our box so here's your next challenge try and place the Box 0.3 meters to the left of the world origin zero point 2 meters below and 0.5 meters behind it pause the video and give this one a try I believe the challenge was 0.3 meters to the left and what controls horizontal alignment is our X field so put negative 0.3 since it's to the left and what controls the vertical alignment is our Y axis the Green Line put a negative 0.2 for that once it's it's going to be below with the vertical y-axis and 0.3 meters behind the z axis just put a negative 0.3 for this actually I believe it was 0.5 the challenge was okay so run the app okay so let me just wait until the device has a good read on its environment as soon as it does the world origin loads and now if I press add the box should be zero point three meters to the left of the x axis zero point two meters below the y axis and look at zero point five meters behind these at axis right there and that's it for positioning notes in the next video let's look at resetting a scene view session in the last video you learned how to create a node give it a shape color and position it relative to your starting position the world origin in this video we're going to look at resetting a scene view session in xcode change this back to a zero zero and negative zero point three run the app and you've seen this before it's aligned horizontally and vertically since you set the x and y fields as zero but it's zero point three meters away from these at axis of the world origin behind it you've probably noticed that if you keep pressing add over and over nothing happens well that makes sense since you're always adding the box in the same position every time so you are indeed adding a box every time it just doesn't look like anything is happening since it's always in the same position now what if I wanted the box to be positioned somewhere else the box is positioned relative to the origin so that would mean that I would have to change the position of the world origin but how do you change your starting position that's where you start it right well the answer is that you reset the scene view session such that it detects a new starting position so in your storyboard add a button right button put it to the bottom right of your view controller pin it 20 pixels from the bottom space and 20 pixels from your trailing space give it a width and height of 80 pixels add the four constraints go to your attributes inspector and give the bun a background color of orange or whatever color you like it's up to you call this button reset open up the assistant editor and Link the reset button with an IV action to your view controller call the IV action and reset connect it and close the assistant editor back to your view controller every time we press reset first we have to pause the session so write self the scene view dot session dot pause or you know what instead of having this in your reset ib action we're going to make a separate function for it so write func restart session but no argument type and no return value and then just call a restart session and reset so now every time you press reset this function gets triggered and inside this function we're going to pause the scene view session so self does scene view dot session dot pause so when you pause the session it stops keeping track of your position or orientation now remove the box note from the scene view by writing self the scene view dot scene root node dot enumerate child notes with the first argument as node and the second argument just leave it blank we're not going to use it for now okay now I explained before that node is a child of the root node you can even see it right here root node a child node node so we're enumerated through every single child node of the root node the Box node being one of them and so the box node is what we're going to remove from the parent node so right node dot remove from parent node by removing the box from the root node or its parent node were removing it from the scene view now that we got rid of the box rerun the session such that it has the same configuration so self scene view session run configuration asks for the options however we're going to have the scene such that it that's tracking so it would forget about your old starting position and make a new one based on where you are at the moment and we're going to remove existing anchors and the reason this isn't working is because it should be inside of an array so autocomplete should work now dot remove existing anchors which makes sense because this is a collection of things an array is a collection type but anyway remove existing anchors and anchor is simply information of the position and orientation of an object in the scene view we're removing all of that information as well and starting from scratch so run the app press add it gives you a box walk away from the origin reset give the device time to reestablish at surroundings add a box again and it shows up in a new position since our starting position changed so the box is positioning itself relative to a new starting origin in the next video we're going to customize our box and place it in random locations instead of just one in the last video we learned how to reset a scene view session to style we can reposition nodes based on a new starting oral origin in this video we're going to further customize nodes and position them in random places so first change the chamfer radius to about 0.03 so what this will do is it will cut off about three centimetres 0.03 meters from the edges of the box giving it a round or edge run the app if you look at the box very closely notice that the edges are rounder if you want to make a sphere back to Xcode make sure that all of these dimensions are the same and make the chamfer radius one half of all of these dimensions so write 0.1 divided by two so the trick is if all of the dimensions have the same measurement and you divide that measurement by two you will get a sphere run the app wait till the world origin loads press add and it gives us a sphere this will be useful once you get to drawing in three dimensions for now though change this back to 0.03 and give the box a specular light by writing node geometry the first material specular top contents is equal to UI color dot white so first material is the appearance of a surface as I explained before and specular is light that's reflected off of a surface we're giving that light a color of white so a white light is going to reflect off of the surface of the box run the app to see how this works wait till the world origin loads press add and notice that nothing happens there is no white light reflecting the reason is you need to give the scene view a source of light for the node to be able to reflect it so in viewdidload right when we are on our session we're going to add lighting by writing self scene view dot Auto enables default lighting is equal to true by doing this you're putting an omnidirectional light source in the scene view an omnidirectional light source is simply light that spreads across the entire scene now that we have lights run the app again wait till the world origin loads press add and you get a reflection of white from the box now have it reflect a color of orange by replacing the white specular light with an orange color run the app press ad and it reflects an orange color now instead of positioning the box in one place we're going to position it in many places this function is inside of your resources folder make sure to copy it into your Xcode project so this function takes a minimum float value and a maximum float value and it gives you a float value in between this will be used to place the Box in random directions instead of just one now don't worry about this complicated return value just know that it gives you a random value in the range that you give it so back into your add IB action right left X is equal to random numbers between negative 0.3 and 0.3 so what this will do for us is that it will return a float value that's between 0.3 meters to the left of the world origin and 0.3 meters to the right do the same thing for the Y value let Y is equal to random numbers between negative 0.3 meters below the origin and 0.3 meters above the world origin do the same thing for the Z value and this will give us a random float value that's between negative 0.3 meters behind the world origin and 0.3 meters in front of it and instead of having these static values for the positioning just put x y&z and so now we have a random horizontal vertical and depth for every single box that we add to test this just run the app let me - wait till the world origin loads and as soon as it loads let me back away from it and start adding some boxes and notice all of these boxes that are getting added in random positions every time this is pretty cool and how they're all reflecting an orange color of lights in the next video we're going to look at default and custom shapes in the last video we customized a box and placed it in random positions of the scene view in this video we're going to look at more default and custom shapes aside from the box first we're going to start with the capsule so a capsule an SCM capsule looks like a cylinder but it has two spherical ends we can modify the height of the capsule as well as its radius its thickness so back in xcode instead of declaring the box let me just comment all of this out and write node geometry is equal to SC and capsule and the capsules dimensions are going to be the following first we're going to change the cap radius let me just fix the autocomplete so as I said before the cap radius is simply how thick the capsule is so I'm going to make it about 0.1 meters thick and its height will be about 0.3 meters so let me just keep these specular and diffuse colors and run the app wait till the world origin loads as soon as it detects the environment once it does add the capsule and you know what one thing I want to change before anything is place the capsule right in front of me we're done with this random positioning stuff align it horizontally and vertically in place it 0.3 meters behind these said access since that is easier to work with just rerun it yet and so if I just wait till the world origin loads once it detects all these surfaces there it is press add and there is our capsule right in front of us it looks pretty cool it looks like a basic cylinder where the rounded caps which is essentially what it is okay now on to our next default shape the next one is going to be the cone and SCN cone has a bottom radius that we can modify a top radius as well as height so back into our Xcode project instead of giving a geometry of a capsule let's give it a geometry of a cone so node geometry is equal to SC and cone and like I said before we can modify the top radius here the top radius is pointy because it has a value of zero meters I am going to make my top radius a value of 0.1 meters the bottom radius will be about 0.3 meters with a height of let's say 0.3 meters run the app to see what the cone looks like when it's in the scene view so if I just wait till the world origin load once the phone detects its environment abdi cone and there it is notice how the top is not pointy since we gave it a radius of zero point 1 meters and the bottom radius is 0.3 meters much bigger than the top now here's a challenge try and make this cone look like a cylinder pause the video and give it a try so to make the Komen look like a cylinder all you have to do is make the top equal to the bottom so 0.34 the top radius or you know what let's just make both of them 0.1 meters they're really matter as long as these are the same run the app till the world origin loans for the film to detect its environment press add and there is our cone or cylinder for that matter okay so the next shape we're going to look at is the cylinder itself ironically we just made a cylinder out of a cone but this time we're going to mess around with the actual cylinder shape and there is not much to a cylinder you can control its radius basically how thick it is as well as its height so instead of declaring a cone declare a cylinder so right no geometry is equal to SC and cylinder with a radius of about 0.2 meters 20 centimeters and a height of 0.2 meters and you probably already know what this is going to look like so let's just run the app as soon as my world origin loads I'm just going to add the cylinder let me just back off a little bit there is our cylinder it has a radius of zero point two meters so a diameter of 40 centimeters which is why it's so wide let me just get a better angle of it and it has a height of 20 centimeters as well okay now the next shape we're going to look at let me just go to the Apple documentation is an SC and sphere an SC n sphere is a pretty basic shape you've probably seen it before all we can modify for the sphere is the radius itself so why don't you pause the video and try to make your own sphere node okay so here's how I would do it no geometry is equal to SC and sphere with a radius I'm going to give it a radius of zero point one meters so a diameter of 20 centimeters run the app Cam's going to wait till my world origin loads that the phone properly detect its environment once it does press add there is our sphere there's not much to it it simply has a circular radius now on to our next object and the reason that we're looking at all of these shapes is because in future apps we're actually going to use all of these shapes to make 3d models so the next shape we're going to look at for now is our SC and tube a tube is almost the exact same thing as a cylinder however a cylinder only has one radius whereas the tube has two of them one to control the inner radius so how wide the hole is and one outer radius how thick the entire tube is in general back to Xcode let me declare this SCN tube no dot geometry is equal to SC n tube and the inner radius how wide the hole is is going to be zero point two meters you make the outer radius about 0.3 meters so the tube is going to have a hole with a radius of zero point two a meter so the hole in general is going to have a diameter of 0.4 meters and from the center all the way to the edge of the tube we're going to have an outer radius of 0.3 meters the height will be about 0.5 meters and let's run the app to see how this looks so if I just wait till my world origin loads and then press add let me just step away from this a little bit and there is our tube the hole has a radius of zero point two meters and the tube in general has an entire radius of 0.3 so the tube has a diameter of 0.6 meters and the hole has a diameter of point 4 meters now the next shape we're going to look at is a torus so back to our Apple documentation the Taurus kind of looks like a ring it has a ring radius which extends from the middle to the edge of the rink and a pipe radius which controls the thickness of the ring we're going to use this torus shape in the future to make our basketball hoop so for now let's just declare a torus inside of our Xcode project no geometry is equal to SC n torus and the ring radius so how wide the torus is from the center all the way to the edge is going to be about 0.3 meters and the pipe radius which controls the thickness of the ring is going to be about 0.2 meters or you know what 0.1 meters you are a deist should always be smaller than your ring radius because your ring radius minus your pipe radius is basically how big the whole of your torus so if you had a ring radius of let's say zero point two meters and a pipe radius of 0.3 your hole would be negative 0.1 meters wide which makes no sense you would kind of have an inverted hole of some sort your torus would just look really weird whenever you're building a 3d model that requires a torus just make sure that your ring radius is always larger than your pipe radius and before running the app let me just start placing the nodes about negative 0.7 meters behind the world origin now let me just run it okay so I'm just going to wait till the world origin loads and then press add so here is our torus it has a ring radius of 0.3 which extends from the center all the way to the edge and a pipe radius so the thickness of the ring has a radius of zero point one meters now the next shape we're going to look at is a plane to find the plane in the Apple documentation just right SC n plane and right here you'll see that the plane is simply a vertical surface with a width and a height and it has no extrusion depth whatsoever it's simply a flat surface with no depth so let's declare a plane and the plane is something we're going to use a lot in this course especially for our vehicle app when we have to build a road so the width of the plane is going to be about point two meters and do the same thing for the heights run the up if I just wait till the world Orange and loads and then add my plane here it is from here it looks like a box but if I go from the side you'll notice that the plane has no depth it's just a flat surface will they with any height of zero point two meters okay now on to our pyramid find the pyramid I'm just going to write SC and pyramid to find it in our Apple documentation and the pyramid is exactly what you would expect it to be it has a length to control its depth a width and a height so let's declare a pyramid right into our project known geometry is equal to SC and pyramid the pyramid is going to have a width of 0.1 meters and the length a depth of 0.1 meters now if I just press add here is our pyramid from here it looks like a triangle but this pyramid actually has a depth so if I just go from the side it has a depth of 0.1 meters which we specified right here okay now we're going to go into some cool stuff which is the Bezier path the Bezier path is used to create custom shapes from a path that you draw so what do I mean by this first off right let path is equal to uij Bezier path we're going to start our path 0 meters from where you positioned it so 2cg point x is 0 and Y is 0 think of the game connect the if you connect every dot with a line eventually are going to form a drawing this is the same concept we're going to draw lines from one point to another until we form a custom shape let's remove this node geometry since we're not going to put at pyramid anymore so we're aligning our path exactly where our node is currently positioned and then we're going to add a line from this position so right path dot add line to CG point X being 0 and now Y it will be zero point two so we're starting our path wherever it's positioned so right here and then we're adding a line then that goes zero point two meters up words so let's assign this to our geometry and to do that write less shape is equal to SC n shape the path is simply going to be the path that you jur and the extrusion depth basically gives your drawing a certain thickness we're going to give it a thickness of 0.2 meters and now assign this shape to the geometry of I already know geometry is equal to shape and if you're not sure what happened it'll be more clear to you once I run the app and explain it just going to wait till the world origin loads as soon as it loads add your Bezier path and this is the line that we drew the line starts 0 meters from the current position that you gave it and it goes zero point two meters upwards so we drew a line from zero meters of the position that you gave it such that it goes point two meters upwards and the line has a thickness and extrusion depth of 0.2 meters and from the top we're going to go diagonally up I want you to pause the video and try and do that one yourself so we need to add another line that goes diagonally upwards from this position so what you would do is write path dot add line to CG point since we want to go diagonally that means that we have to change its horizontal positioning so write x zero point two and y zero point three so here's what would happen our path at first was horizontally aligned to the current position so now our path is going to end up being zero point two meters to the right of this position and zero point three meters above it which is basically going to be zero point two meters to the right of the previous point in the path and zero point one meters above the previous point in the path which is essentially going to form a diagonal line that goes zero point two meters to the right and zero point one meters above run the app add your path and this makes perfect sense the shape is perfectly aligned with where we positioned our note and then you're drawing a line that goes zero point two meters upwards from the current position so now we're going to meters to their right and zero point one meters above the current vertical position which is zero point three therefore drawing a diagonal path from that current point now from this point we want to draw a diagonal path that goes downwards so how would you do this pause the video and give this one a try so we need to go diagonally downwards our x-value has to change such that it goes to the right and our y-value have to change as well such that it goes back down from this point we're going to add another line so right path dot add line 2 CG point and now from the position that's zero point two meters to the right of the origin we're going to go another zero point two here so zero point four but this time we're going to travel back downwards we're going to travel back to zero point two meters above the origin so we're starting off such that the path is exactly where the node is positioned perfectly aligned horizontally and vertically but then we're moving zero point two meters up words such that the path is now zero point two meters from the y-axis of the origin and then we're moving zero point two meters to the right as well as zero point one meters from the previous point so we're moving at an upwards diagonal and then from there we're moving another zero point two meters to the right so zero point four meters from the origin and we're moving back downwards by zero point one meters so this is going to lead to us drawing a diagonal path downwards zero point two meters to the right and zero point one meters downwards let's run the app to see how this looks okay so I'm just going to wait till my world origin loads and as soon as it does add my path and this makes sense as well so we're starting at the current position zero zero and then we're moving zero point two meters above the position and then we're moving zero point two meters to the rights as well as zero point one meters above the current vertical position so now we're a zero point two meters to the right of the origin and zero point three meters above then we're moving another zero point two meters to there right such that where zero point four meters to the right in the origin but we're moving zero point one meters back down so now our position is zero point four meters to the right of this position and zero point two meters above it now we want to go back down such that whereas zero meters vertically from this position but we're still zero point four meters to the right so why don't you try and do that yourself and see what kind of results you come up with so pause the video and try it out so here's what you should have come up with path dot add line two CG point our x-value will remain the same since we're not going to be moving in the horizontal direction but we want to go back down to the previous position so put zero right here for the final position we're moving zero point two meters down and the horizontal positioning stays the same so run the app to see what this looks like let me just wait till the world origin loads add your bezierpath and look at what this forms a house so let's go over this we're starting off at the current position perfectly aligned horizontally and vertically then we're going 0.2 meters up then we're moving a diagonal distance 0.2 meters to the right and 0.1 meters above so right now we're is 0.2 meters to the right of this position and 0.3 meters above it and from this point we're going back down 0.1 meters but whereas 0.4 meters to the right of it so zero point two meters to the right of this one which makes for a downwards diagonal line and then from this distance the horizontal positioning stays the same but we're drawing a line that goes downwards and with our extrusion depth of 0.2 meters which is giving this Bezier path a depth it forms a perfect house so we just made our first custom shape by drawing lines from one point to another and there are a lot of software is where you can make custom shapes software such as this one if you were to use it you would manually make your own custom shape and once you make it it would convert that custom shape for you in code uija Bezier path code that you would just copy into your Xcode project to load the custom shape that you made there are many apps just like this one for example there is the Bezier code vector drawing to objective-c code there are some apps for swift code but it's really not hard to convert Objective C to Swift there are many tools to do that so this is another example of it converting images to UI Bezier path code right here and that is it for this video point in this video was to show you all of the default shapes that we're going to use later on in this course to build many complex 3d models like our portal and our basketball court in the next video we're going to look at relative positioning in this video we're going to position nodes relative to other nodes the main theme behind this lecture will be parent nodes and child nodes so let me just remove all of this we don't need this code anymore and simply position the pyramid relative to the root node so right now the pyramid is a child of the root node and as you know from before the root node is basically a node that's positioned exactly where the world origin is and since the pyramid is a child of the root node it's going to be positioned relative to the root node so now position the pyramid about zero point two meters to their right of the root node about zero point three meters above it and negative zero point two meters behind it and your challenge is to try and place a cylinder zero point three meters to the left of the pyramid point two meters above and point three meters behind it pause the video and give it a try so first off just declare your cylinder node less cylinder node is equal to SC n node the node is going to have a geometry of an SC n cylinder with a radius I'm going to give it a small radius of 0.05 meters and a height of 5 centimeters as well going to give the cylinder a diffuse color of red remember that diffuse is the color that spread across the surface of a node UI color dot red and the challenge was to place the cylinder 0.3 meters to the left point 2 meters above and point three meters behind the pyramid so at cylinder node dot position is equal to SC n vector 3 and so to place the cylinder 0.3 meters to the left of the pyramid here's what you would do you would say that hey the pyramid is 0.3 meters to the right of the world origin so a fireplace the cylinder node is zero point 1 meters to the left of the root node it will be zero point three meters to the left of the pyramid so if you put a negative zero point one here and position the cylinder node relative to the root node by just copying and pasting this and putting your cylinder node so by a positioning our cylinder point one meters to the left of the root node it will be point three meters to the left of the pyramid now we want it to position the cylinder zero point two meters above the pyramid node and so by placing the cylinder zero point five meters above the root node it will be zero point two meters above the pyramid node and we want it to place a zero point three meters behind the pyramid and so by placing the cylinder node zero point five meters behind the seen views root node then it will be zero point three meters behind the pyramid node so this was a bit complex we have to do some math to position the cylinder node relative to the pyramid so let's run the app to see if this worked out just going to wait till my world origin loads and as soon as it does add my notes our cylinder is 0.3 meters to the left of the pyramid 0.2 meters above it as you can clearly see and it's also behind it by 0.3 meters now what if I told you we could have done this in a much easier way so the initial challenge was to place the cylinder node 0.3 meters to the left of the pyramid node so why not just write negative 0.3 0.3 meters to the left and now to place it 0.2 meters above why not just write 0.2 and if you want to place it 0.3 meters behind the pyramid node why not put in negative 0.3 but how will this work for example if the cylinder node is positioned 0.3 meters to the left of the root node then it's not 0.3 meters to the left of the pyramid it would be about 0.5 meters to the left of it what if I told you we don't have to position the cylinder node relative to the root node by making the cylinder node a child of the pyramid node so by writing node dot a child node cylinder node the cylinder is now positioned relative to the pyramid so now this should work the cylinder should be 0.3 meters to the left of the pyramid 0.2 meters above it and point 3 meters behind it this was much easier than doing all that math so run the app to see if this works out I'm just going to wait till the world origin loads and it works out perfectly this was a lot easier than doing all that math what I wanted you to take from all this is that at first the cylinder node was a child of the scene views root node and so to position the cylinder relative to the pyramid we had to do some pretty annoying calculations however once we made the cylinder a child of the pyramid then whatever position we gave the cylinder was relative to the pyramid having done that it was much easier to position the cylinder 0.3 meters to the left of the pyramid 0.2 meters above and 0.3 meters behind it as you can see it took no calculations whatsoever all you have to do is declare so now using relative positioning we're going to make a custom shape so instead of a cylinder no declare a box node with a geometry of an SCM box the box will have a width of 0.1 meters height of zero point one meters any length of 0.1 meters as well with a chamfer radius of 0 wherever it's a cylinder node or placed that with box note instead and instead of giving me box a color of red give it a color of blue whereas the pyramid will have a color of red and now the plan is to position this box right under the pyramid to make a house shape so how do I place the Box node right under the house well let me start off with a default position of 0 0 and 0 and see what this looks like so if I just wait till the world orange and loads and as soon as it loads add your supposed add house and this didn't work out so well here's my assumption it looks like the center of the box is positioned at the bottom of the pyramid and from the bottom of the pyramid half of the box extends upwards and I can also conclude that the box is 10 centimeters long so if the center of the box is at the bottom of the pyramid and the distance between the center of the box to the top is 5 centimeters if I place the Box five centimeters downwards then the top of the box should be at the bottom of the pyramid which is exactly what we need for us to form a house we need the top to be at the bottom of the pyramid so give this a try right now dot position is equal to negative 0.05 meters so five centimeters downwards if I do this the top of the box should be at the bottom of the pyramid now to get comfortable with positioning relative to other nodes it's basically just trial and error start off with a default position like what I just had before is zero zero and zero make a conclusion with what you saw in that default position and then fix that position accordingly we fixed it by placing the box five centimeters downwards let's see if that worked run the app if I press add and there is our house the top of the box is right under the pyramid as I predicted now what if I wanted to give the walls a door back to the Xcode project stop running the app and write let door node is equal to SC n node with a geometry of an SC n plane we looked at planes in the last lecture and we determined that planes are simply flat vertical surfaces so give this plane a width of about three centimeters and a height of six centimeters this should be a fair-sized give the door node a color of brown so Adorno geometry the first material diffused remember the fuse is the color that's spread across the surface of a node we're giving the surface a color of brown so I want to place the door node at the edge of the box we're positioning the door relative to the box so what should the next step be pause the video and give this one a try so I'm hoping you did the following since we're positioning the door relative to the box make the door a child of the box so box node a child node door node so now we want to place the door at the edge of the box first let me start off by giving the door node a random position so a door node up position is equal to SC n vector 3 0 0 & 0 I didn't even put any thought into this and let me just run the app to see what this looks like at the moment so just wait till the world origin loads and as soon as the world origin loads let me add my house and you can't even see the plane in the door was it even added to the scene view well it was it's just that the Box node and the pyramid node they both have a coordinate system that's exactly in their center so inside of the Box node right at the center and there is a coordinate system and we aligned that door node perfectly with the coordinate system of the box zero meters away from it and so since the door node is exactly at the center of the box first off we can conclude that the box has a depth of 10 centimeters so if the door node is exactly at the center of the box then that means that the door is 5 centimeters away from the edge how did I conclude this while the Box node has a depth of 10 centimeters and so that could only mean that the distance between the center of the box to the edge is 5 centimeters so if I place the door node 5 centimeters away from the center of the box it should be right at the edge run the up if I just wait till the world origin loads and then add my house the door node is 5 centimeters away from the center of the box which puts it right at the edge the reason why the door node is acting this way is because it is right at the edge of the box we need to place a little bit in front of the edge so that it stops interfering with the edges of the box node instead of 0.05 place it a little bit in from the edge so put 0.05 3 or something 3 millimeters away from the edge and we should be good to go so if I just wait till the world origin loads and then I add my house there it is our door is right in front of our box about 3 millimeters away and now I can conclude that vertically the centre of the node is vertically aligned with the center of the box and so if I go back to my Xcode so the box node has a height of 10 centimeters so the distance from the center of the box node to the bottom edge should be 5 centimeters the door node center is perfectly aligned with the center of the box node so the distance from the center of the door node to the bottom edge of the box node is also 5 centimeters and so from the center of the box node the door node extends downwards by 3 centimeters so if I just do 5 centimeters minus 3 I can conclude that the bottom of the door node is 2 centimeters away from the bottom edge of the box node so if I move the door node downwards by 2 centimeters it should be right at the bottom edge of the box and I moved it down 20 centimeters it should be 2 centimeters so let me run the app to see what this looks like if I just wait till the world origin loads and then add my house there you go the door node is positioned right at the bottom edge of our house the last thing I can tell you is to be comfortable with making custom shapes with relative positioning you just have to keep practicing first it's going to be a game of trial and error but eventually you'll get the hang of it so if you want to make more custom shapes with the relative positioning always start with a default position which in our case we used a default position at first of zero zero zero and then from that position make conclusions on how you need to modify the position to get the custom shape that you want and that is it for the introduction of this course to access the full version of this course and make really cool apps make sure to click the link in the description below

Channel: Codestars

Views: 95,162

Keywords: ARKit, iOS Augmented Reality, Augmented Reality, ios 11, Swift 4, augmented reality for iOS, arkit tutorial

Id: f3xFpRWZEz8

Length: 65min 3sec (3903 seconds)

Published: Wed Sep 27 2017