0 1 00:00:00,520 --> 00:00:00,830 All right. 1 2 00:00:00,860 --> 00:00:07,410 So in the last lesson, we set up our new AR-enabled app and we looked at some of the differences between 2 3 00:00:07,520 --> 00:00:11,050 ARWorldTrackingSessionConfiguration and ARSessionConfiguration. 3 4 00:00:11,460 --> 00:00:16,800 So, now I'm going to keep this configuration as the world tracking one, so I can show you all the awesome 4 5 00:00:16,800 --> 00:00:18,590 things that a ARKit can do, 5 6 00:00:18,630 --> 00:00:21,840 otherwise, it'll be pretty limited and the tutorial won't be as fun. 6 7 00:00:21,840 --> 00:00:27,600 So make sure that we switch back to this particular configuration and make sure that the session is 7 8 00:00:27,690 --> 00:00:30,120 running that configuration. 8 9 00:00:30,210 --> 00:00:35,760 So we haven't actually written a lot of code up to this point. We've just been using the template code 9 10 00:00:35,760 --> 00:00:38,670 that Apple has pretty much provided us. 10 11 00:00:38,670 --> 00:00:42,360 So the first thing that we're going to do is we're actually going to comment out Apple's code, 11 12 00:00:42,360 --> 00:00:48,330 so these two lines where we're creating a scene from their shipScene, and then putting that scene into 12 13 00:00:48,360 --> 00:00:49,280 our sceneView. 13 14 00:00:49,290 --> 00:00:55,950 I'm just going to command-forward slash to comment that out and we're going to create our very own 3D 14 15 00:00:56,340 --> 00:01:00,840 AR object, and the object that we're going to create in this lesson is a cube. 15 16 00:01:00,840 --> 00:01:08,130 So let cube = SCNBox and this provides a six-sided object whose faces are all rectangles which 16 17 00:01:08,130 --> 00:01:13,020 is basically a really, really elaborate way of saying that you're creating a box. Ao it doesn't have to 17 18 00:01:13,020 --> 00:01:13,780 be a cube, 18 19 00:01:13,800 --> 00:01:17,790 but in our case, we are going to create a cube because our width and height are going to be the same. 19 20 00:01:18,210 --> 00:01:26,040 So SCNBox and then we're going to use the provided overload which is this one where we can specify 20 21 00:01:26,040 --> 00:01:30,480 a width, a height, a length, and also the chamferRadius. 21 22 00:01:30,540 --> 00:01:35,920 So the chamferRadius is basically how rounded you want the corners of your box to be 22 23 00:01:36,030 --> 00:01:38,840 and we'll set that as well so you can see what it looks like. 23 24 00:01:38,850 --> 00:01:43,710 So hit enter and we are going to say a cube of 0.1. 24 25 00:01:43,830 --> 00:01:47,240 So, remember, the units in here are meters. 25 26 00:01:47,340 --> 00:01:49,130 So go easy on the size here, 26 27 00:01:49,170 --> 00:01:53,090 otherwise, you might end up inside the object and you won't actually be able to see it. 27 28 00:01:53,160 --> 00:01:58,560 So I'm gonna say maybe just 10 centimeters, so 0.1, 0.1, and 0.1. 28 29 00:01:58,680 --> 00:02:00,020 And it's going to be a cube, 29 30 00:02:00,030 --> 00:02:06,750 so it's gonna be equal on all three dimensions, and then I'm going to actually give it a chamferRadius 30 31 00:02:06,840 --> 00:02:10,800 and I'm going to give it a 0.01. 31 32 00:02:11,010 --> 00:02:14,610 And you can mess around with this until you create an object that you're satisfied with. 32 33 00:02:14,670 --> 00:02:17,700 But to my eyes, that looked quite good when I tested it. 33 34 00:02:17,700 --> 00:02:17,920 All right. 34 35 00:02:17,970 --> 00:02:23,670 So by default, any object that you create in sceneKit has white matte texture to it, 35 36 00:02:23,700 --> 00:02:30,390 so our cube will be a white cube. And you can try it out later on, but it kind of looks like those objects 36 37 00:02:30,390 --> 00:02:36,030 that you get when you go to still life drawing classes. It's pretty boring, so let's go and jazz it up 37 38 00:02:36,030 --> 00:02:36,610 a bit. 38 39 00:02:36,720 --> 00:02:42,990 So I'm going to create a material. I'm gonna call it material and it's going to be created using 39 40 00:02:43,380 --> 00:02:45,280 SCNMaterial. 40 41 00:02:45,330 --> 00:02:47,870 So all of these methods are from the SceneKit framework, 41 42 00:02:47,880 --> 00:02:51,050 so that's why they're all preceded with SCN or Scene, 42 43 00:02:51,050 --> 00:02:55,500 so sceneBox, sceneMaterial, and then we're going to change one of the material's properties. And the 43 44 00:02:55,500 --> 00:02:58,570 property that we want is the diffuse property. 44 45 00:02:58,710 --> 00:03:03,100 So as we said earlier this is basically the base material of that object. 45 46 00:03:03,570 --> 00:03:09,330 So material.diffuse.contents and we're just gonna set it to a UIColor, maybe a red color 46 47 00:03:09,600 --> 00:03:10,840 since we're making a dice, 47 48 00:03:10,860 --> 00:03:11,340 right? 48 49 00:03:11,430 --> 00:03:14,850 And then all we have to do is just add that material to the cube, 49 50 00:03:14,940 --> 00:03:22,860 so cube.materials. And you can see that this is actually looking for a array of SCNMaterials because 50 51 00:03:23,130 --> 00:03:28,140 you can actually assign multiple materials to the same object, so you can change the diffuse or you can 51 52 00:03:28,140 --> 00:03:34,580 change the shininess of it, or the metallicness of it, or the texture whole bunch of things. 52 53 00:03:34,590 --> 00:03:39,030 But right now, all I want is just to give our cube a nice red color. 53 54 00:03:39,090 --> 00:03:40,470 So it's pretty simple. 54 55 00:03:40,470 --> 00:03:46,690 So I'm going to make an array that only contains material that we just created. 55 56 00:03:46,950 --> 00:03:52,230 So there's our cube created and styled. The next thing that we're going to do is we're going to create 56 57 00:03:52,290 --> 00:03:57,510 our first node. So SCNNodes are basically points in 3D space. 57 58 00:03:57,510 --> 00:04:03,570 So when you first create it, it's not really anything, but you can assign a position in 3D space and 58 59 00:04:03,630 --> 00:04:05,200 you can give it an object, 59 60 00:04:05,220 --> 00:04:08,540 so what it should display at that position in 3D space. 60 61 00:04:09,030 --> 00:04:17,970 So let's go ahead and create our node. Let's call it node. And as you expect, it's under a SCNNode, so it's 61 62 00:04:17,970 --> 00:04:24,930 going to be a new object created from SCNNode. And then we're going to give it a position. So you can 62 63 00:04:24,930 --> 00:04:29,070 see that this position is of type SCNVector3, 63 64 00:04:29,100 --> 00:04:34,960 so scene vector 3. And this is basically a three-dimensional vector, 64 65 00:04:34,980 --> 00:04:40,090 so it has a X position which is the translation along the X axis, 65 66 00:04:40,090 --> 00:04:43,100 so left and right. It has a Y axis, 66 67 00:04:43,110 --> 00:04:49,720 so up or down, and it has a Z axis which is towards or away from you. 67 68 00:04:49,830 --> 00:04:57,890 So we can create that using SCNVector 3. And we want to use the overload that takes three floats, 68 69 00:04:57,900 --> 00:05:02,170 so X, Y, and Z as floats, and I'm going to give it some vectors. 69 70 00:05:02,180 --> 00:05:05,900 So on the horizontal axis, I'm just going to say zero, 70 71 00:05:05,900 --> 00:05:09,040 keep it in the center. On the Y axis, 71 72 00:05:09,050 --> 00:05:15,100 let's say 0.1 to raise it up a little bit by about 10 centimeters. 72 73 00:05:15,230 --> 00:05:20,320 And then on the Z axis, let's say, -0.5. 73 74 00:05:20,330 --> 00:05:22,960 So you might be wondering, why am I using minus? 74 75 00:05:23,090 --> 00:05:27,250 Well, for all the other axis, it's pretty intuitive. 75 76 00:05:27,260 --> 00:05:34,220 Positive X is towards the right. Negative X is towards left. Positive Y is going up. Negative Y is going down, 76 77 00:05:34,220 --> 00:05:41,300 but for the Z positive is coming towards you and negative is going away from you. 77 78 00:05:41,300 --> 00:05:45,760 We tend to think of positive as forwards, but in this case, it's actually flipped around. 78 79 00:05:45,860 --> 00:05:48,050 Don't just make a note of that. 79 80 00:05:48,050 --> 00:05:48,590 All right, cool. 80 81 00:05:48,650 --> 00:05:51,260 So our note now has a position. 81 82 00:05:51,320 --> 00:05:57,380 Now, we just need to give it a geometry. And you guessed it, that geometry is going to be our lovely cube 82 83 00:05:57,380 --> 00:05:58,490 that we created earlier on. 83 84 00:05:58,520 --> 00:06:04,400 So node.geometry is going to be equal to cube. 84 85 00:06:04,400 --> 00:06:05,170 All right, cool. 85 86 00:06:05,180 --> 00:06:05,380 All right. 86 87 00:06:05,390 --> 00:06:06,620 So let's just recap. 87 88 00:06:06,620 --> 00:06:13,520 First, we created this geometry called cube and we used a method from the SCN framework that allows 88 89 00:06:13,520 --> 00:06:16,430 us create boxes pretty easily called SCNBox, 89 90 00:06:16,430 --> 00:06:21,100 and we gave it a width of 10 centimeters, high: 10 centimeters, length: 10 centimeters. 90 91 00:06:21,170 --> 00:06:26,870 And we made the corners slightly rounded, and then we created a material that is basically just the color 91 92 00:06:26,870 --> 00:06:34,190 red, and then we assigned that material to the cube materials array and it currently only has one material 92 93 00:06:34,190 --> 00:06:37,250 in its array. But that's fine, that's good enough for now. 93 94 00:06:37,430 --> 00:06:43,970 And then we created this node which is a point in 3D space, and then we gave it a position which is centered 94 95 00:06:43,970 --> 00:06:47,940 on the X axis, slightly elevated, and slightly away from us. 95 96 00:06:48,140 --> 00:06:53,320 And then we assigned that node, an object to display or a geometry, 96 97 00:06:53,510 --> 00:06:57,320 and that was, of course, our cube that we created earlier on. 97 98 00:06:57,320 --> 00:06:57,530 All right. 98 99 00:06:57,530 --> 00:07:02,720 So, now all that remains is actually putting our node into our sceneView. 99 100 00:07:02,750 --> 00:07:10,130 So let's tap into sceneView.scene.rootNode.addChildNode and the node that we 100 101 00:07:10,130 --> 00:07:13,150 want to add is, of course, this node that we created. 101 102 00:07:13,190 --> 00:07:15,330 So let's have a look at this line of code. 102 103 00:07:15,560 --> 00:07:21,620 So here we are adding a childNode to our rootNode in our 3D scene. 103 104 00:07:21,800 --> 00:07:25,190 So for any given scene, you could have a whole bunch of childNodes. 104 105 00:07:25,370 --> 00:07:29,210 So, for example, you could display a box as well as a sphere. 105 106 00:07:29,210 --> 00:07:32,590 So, for example, you could have a spaceship and alien invaders 106 107 00:07:33,020 --> 00:07:36,800 and you want to add those in to your scene as childNodes. 107 108 00:07:37,220 --> 00:07:42,530 So if you actually have a look in the shipScene, you can see that this is the current rootNode, ship. 108 109 00:07:43,070 --> 00:07:49,460 And if I expand that, you can see that ship has a childNode called shipMesh. 109 110 00:07:49,790 --> 00:07:55,730 And if I selected that, that actually refers to this ship that you see on scene, and then that shipMesh itself 110 111 00:07:55,730 --> 00:08:04,370 has a childNode called emitter. And this is the node that is going to be used to display, maybe, particle 111 112 00:08:04,370 --> 00:08:04,700 effects. 112 113 00:08:04,700 --> 00:08:09,220 So, for example, smoke coming out of the back or fire coming out of the back. 113 114 00:08:09,560 --> 00:08:14,520 And this is a childNode to the ship to the main rootNode of the scene. 114 115 00:08:14,930 --> 00:08:16,430 So hope that makes a bit of sense. 115 116 00:08:16,490 --> 00:08:23,660 And but all we need to do is give our app a spin and run on the device, and you'll see what our code 116 117 00:08:23,720 --> 00:08:25,250 has magically achieved. 117 118 00:08:25,670 --> 00:08:26,390 So let's do that. 118 119 00:08:33,970 --> 00:08:34,240 All right. 119 120 00:08:34,260 --> 00:08:39,000 So there's our lovely box. And you might have noticed that one thing is a little bit odd. 120 121 00:08:39,000 --> 00:08:42,000 The cube looks a little bit flat, right? 121 122 00:08:42,000 --> 00:08:45,260 It doesn't look all that 3D. 122 123 00:08:45,390 --> 00:08:51,780 And the reason is because of light. In order to see something as 3D, we need to see highlights and shadows. 123 124 00:08:51,780 --> 00:08:56,540 If you've ever seen a crazy makeup contouring tutorials, then you'll know exactly what I'm talking about. 124 125 00:08:56,550 --> 00:09:04,050 So all we have to do is just add some light. And we can do that in one sentence in sceneView. 125 126 00:09:04,050 --> 00:09:11,280 sceneView.autoenablesDefaultLighting set it to be true. 126 127 00:09:11,310 --> 00:09:15,180 And now, if--let's run our app again and let there be light.