0 1 00:00:00,290 --> 00:00:00,930 All right, cool. 1 2 00:00:00,960 --> 00:00:03,270 So I hope you're enjoying the ARKit Tutorial so far. 2 3 00:00:03,270 --> 00:00:07,140 There's going to be so much more awesome stuff that's coming up. So in the last few lessons, 3 4 00:00:07,140 --> 00:00:13,170 we saw how easy it was to create cubes and spheres and add materials to them, and put them into our real 4 5 00:00:13,170 --> 00:00:14,850 world using ARKit. 5 6 00:00:14,910 --> 00:00:20,460 Now, we could continue modeling our cube or adding texture maps to it to try and make it look like a 6 7 00:00:20,460 --> 00:00:20,910 dice. 7 8 00:00:20,910 --> 00:00:26,160 But there's actually a much, much easier way. We can simply import a 3D graphic of a dice that someone 8 9 00:00:26,160 --> 00:00:27,800 else has already created in Blender. 9 10 00:00:28,020 --> 00:00:33,450 So Blender is this awesome open-source piece of software that allows you to create really, really lifelike, 10 11 00:00:33,510 --> 00:00:36,280 really awesome 3D graphic assets. 11 12 00:00:36,360 --> 00:00:41,370 And unfortunately, I don't really have the artistic talent to be able to show you how to create these 12 13 00:00:41,370 --> 00:00:47,070 amazing things. But I can show you how we can easily incorporate and use 3D models that other people 13 14 00:00:47,070 --> 00:00:47,880 have created. 14 15 00:00:48,030 --> 00:00:53,700 And all you need to do is to go to a website called turbosquid.com and they have a huge catalog 15 16 00:00:53,760 --> 00:00:57,050 of 3D models including free ones, as well as paid ones. 16 17 00:00:57,090 --> 00:01:02,910 So if you go to turbosquid.com and you search for "dice," then you can see that a whole bunch of dice 17 18 00:01:02,910 --> 00:01:10,470 shows up and you have to sort the results for the file format DAE. So the DAE format is something that 18 19 00:01:10,470 --> 00:01:16,820 will be compatible with our sceneKit.scn file and we can actually convert it into an SCN file. 19 20 00:01:17,070 --> 00:01:21,690 And because we're doing this as a tutorial, I'm just going to look for objects that are free. 20 21 00:01:21,720 --> 00:01:24,420 So zero to zero price range. 21 22 00:01:24,570 --> 00:01:26,820 And then let's have a look and see what we've got. 22 23 00:01:27,240 --> 00:01:32,480 So we've got three options and I think this one to me looks the nicest and the most realistic. 23 24 00:01:32,490 --> 00:01:37,080 So you're going to have to sign up for a free account for TurboSquid in order to download anything. 24 25 00:01:37,110 --> 00:01:42,810 But once you've done that, then it's as easy as hitting download, and it'll show you a whole bunch of 25 26 00:01:42,810 --> 00:01:45,780 different files that you can download and they're all zipped. 26 27 00:01:45,780 --> 00:01:50,640 So the one that you want and the one that is going to work with our project is DiceCollada. 27 28 00:01:50,820 --> 00:01:55,410 So the DiceCollada is the one that has the file format DAE. And this is the one that you're going to 28 29 00:01:55,410 --> 00:01:58,730 want to download and incorporate into your file. 29 30 00:01:58,740 --> 00:02:03,750 So once you've unzipped that DiceCollada.zip file, then you'll see that it includes a whole bunch 30 31 00:02:03,750 --> 00:02:04,280 of files. 31 32 00:02:04,320 --> 00:02:08,490 And the main thing that you're interested in is this DiceCollada.dae file. 32 33 00:02:08,580 --> 00:02:10,890 That's the main model of the dice. 33 34 00:02:10,890 --> 00:02:14,310 The other things are essentially materials and textures. 34 35 00:02:14,310 --> 00:02:20,670 The one that we're going to be using for our project is the New_RedBase_color.png. 35 36 00:02:20,750 --> 00:02:27,780 So all we need to do is select the DiceCollada.dae and also select the New_RedBase.Color.png 36 37 00:02:27,790 --> 00:02:33,760 and we're going to drag both of those into our art.scnassets folder. 37 38 00:02:33,930 --> 00:02:35,470 And now, we can have a look at our dice. 38 39 00:02:35,640 --> 00:02:38,880 So the first thing is that when you open it, you might not see anything. 39 40 00:02:38,970 --> 00:02:44,880 And this is pretty worrying if this is the first time you are creating a new ARKit project, but 40 41 00:02:44,910 --> 00:02:48,930 if you open the document inspector, and you can see you've got this dice object. 41 42 00:02:49,170 --> 00:02:54,640 And if you change the camera to the front camera, then you can see that you've got a dice. 42 43 00:02:54,690 --> 00:03:00,180 Now, the dice isn't particularly visible because its material is this dull white. 43 44 00:03:00,270 --> 00:03:05,550 And what we want is we want to change it to that material that we incorporated which is the 44 45 00:03:05,550 --> 00:03:06,180 New_RedBase_Color. 45 46 00:03:06,690 --> 00:03:12,720 And all you have to do is--do you remember previously we were setting the diffuse on our object that we created? 46 47 00:03:12,750 --> 00:03:19,210 Well, you can also set it inside the interface builder for these scene files and DAE 3D models. 47 48 00:03:19,470 --> 00:03:24,660 So all you have to do is click on the dropdown list. And instead of this ugly gray color, we can choose 48 49 00:03:24,690 --> 00:03:29,510 our own texture which is going to be the New_RedBase_Color. 49 50 00:03:29,730 --> 00:03:36,090 And now you can see that our object looks a lot more like dice. It's actually got faces and numbers and 50 51 00:03:36,090 --> 00:03:38,790 we're going to render this in augmented reality. 51 52 00:03:38,820 --> 00:03:41,040 So there's a couple of things I want to draw your attention to. 52 53 00:03:41,040 --> 00:03:47,700 One thing is that inside the node inspector, if you have the dice selected, you can see what is the size 53 54 00:03:47,700 --> 00:03:48,570 of the Bounding Box. 54 55 00:03:48,570 --> 00:03:53,940 And it's basically the cube that will contain this dice object. And you can see at the moment, its default 55 56 00:03:53,970 --> 00:03:59,160 width and height is about 1 centimeter by 1 centimeter by 1 centimeter. 56 57 00:03:59,160 --> 00:04:05,630 Now, you can scale it up or down just by dragging this toggle or just double-clicking and typing it in. 57 58 00:04:05,670 --> 00:04:10,620 Now, a good reference point is that you remember how big the ship was when we rendered it, 58 59 00:04:10,620 --> 00:04:11,280 right? 59 60 00:04:11,340 --> 00:04:16,380 And if you select on the shipMesh node, you can actually see how big the bounding box of this ship is. 60 61 00:04:16,650 --> 00:04:18,000 And it's absolutely huge. 61 62 00:04:18,000 --> 00:04:21,420 It's 48 meters by 17 by 46 meters. 62 63 00:04:21,510 --> 00:04:26,730 But the reason why it can appear in your room is because it's scaled down. So it's scaled down to only 63 64 00:04:26,730 --> 00:04:31,900 2 percent of each of those values which makes it reasonably sized in order to be displayed. 64 65 00:04:31,980 --> 00:04:37,770 If you want to quickly compare how big your dice is when compared to the shipMesh, you can actually just 65 66 00:04:37,770 --> 00:04:45,280 select the shipMesh and hit command C to copy it, and then put it in as a node inside your Dicee. 66 67 00:04:45,450 --> 00:04:48,090 So let's change again to front camera. 67 68 00:04:48,210 --> 00:04:52,770 So this is what we see when we actually open the app. And let's double click on the shipMesh to see 68 69 00:04:52,770 --> 00:04:55,350 where that ship is. And you can see there are dice. 69 70 00:04:55,350 --> 00:04:57,710 It's that tiny little object over there. 70 71 00:04:57,840 --> 00:04:59,820 So you remember how big the ship was? 71 72 00:04:59,820 --> 00:05:03,690 Now, you can see how big the dice is when compared to that ship. 72 73 00:05:03,720 --> 00:05:05,140 So it's pretty small. 73 74 00:05:05,610 --> 00:05:11,340 And if you want, you can scale up the dice, say, if you want a giant dice throw on the floor in your app, 74 75 00:05:11,400 --> 00:05:15,000 then you could simply just change that scale up or down. 75 76 00:05:15,060 --> 00:05:20,070 But for me, I'm actually going to keep it at this size because it actually seems to work quite well for 76 77 00:05:20,130 --> 00:05:22,020 a dice app. 77 78 00:05:22,020 --> 00:05:26,910 Now, the other thing that I want to show you is that you might notice that the ship is a scene file, 78 79 00:05:26,910 --> 00:05:34,110 But our DiceCollada is a DAE file. And you can actually convert a DAE file into a .scn really 79 80 00:05:34,110 --> 00:05:40,440 easily. Just select the file and then go to Editor, convert to SceneKit scene file format, and it will do 80 81 00:05:40,440 --> 00:05:41,100 that for you. 81 82 00:05:41,970 --> 00:05:44,160 So DiceCollada.scn. 82 83 00:05:44,820 --> 00:05:51,510 So, now we can go into our ViewController and we can go about adding some code to bring our dice into 83 84 00:05:51,600 --> 00:05:52,510 our app. 84 85 00:05:52,530 --> 00:05:56,760 So the first thing I'm going to do is I'm going to comment out all of this code that's related 85 86 00:05:56,760 --> 00:05:58,100 to our sphere. 86 87 00:05:58,140 --> 00:06:03,320 So I'm going to comment out all of that, but I'm going to leave that line of code for the default lighting. 87 88 00:06:03,330 --> 00:06:03,930 All right, cool. 88 89 00:06:03,930 --> 00:06:08,340 So the next thing I'm going to do is I'm going to uncomment that little bit of code that we had from 89 90 00:06:08,370 --> 00:06:10,370 earlier on that rendered the plane. 90 91 00:06:10,380 --> 00:06:15,210 But we're going to edit this slightly, I'm going to delete this line and I'm going to change this from 91 92 00:06:15,270 --> 00:06:19,340 rendering the ship to our DiceCollada. 92 93 00:06:19,560 --> 00:06:22,350 And remember that you have to keep the capital there, 93 94 00:06:22,410 --> 00:06:23,950 otherwise, it won't recognize it. 94 95 00:06:24,780 --> 00:06:25,020 All right. 95 96 00:06:25,050 --> 00:06:33,040 So there's our diceScene and let's call it that to make it more explicit, diceScene. 96 97 00:06:33,240 --> 00:06:38,790 And then we're going to create a diceNode to create a 3D position to put our dice. 97 98 00:06:38,790 --> 00:06:51,480 So we're going to say let diceNode = diceScene.rootNode.childNode. And we're going to 98 99 00:06:51,480 --> 00:06:58,050 use the method that's going to look for the childNode that has a particular name. And to find the name, 99 100 00:06:58,120 --> 00:07:04,380 all you have to do is go into that DiceCollada file, select the diceNode. And you can see that it has 100 101 00:07:04,380 --> 00:07:08,750 an identity attribute and this is the name that you're looking for. 101 102 00:07:08,790 --> 00:07:12,870 So I'm just going to copy that and put it here. 102 103 00:07:12,870 --> 00:07:20,940 So we're going to look for a childNode inside the rootNode of the diceScene that is created from 103 104 00:07:21,030 --> 00:07:27,200 this diceCollada.scn file, and then we're going to set recursively as true. 104 105 00:07:27,210 --> 00:07:33,630 So what that recursively does is that it basically allows you to search through the tree and include 105 106 00:07:33,690 --> 00:07:36,510 all of the subtrees in the childNode. 106 107 00:07:36,540 --> 00:07:38,170 So what does that all mean.? 107 108 00:07:38,220 --> 00:07:43,830 If you have a look inside the shipScene, so you can see that shipMesh is a child nodal ship and emitter 108 109 00:07:43,830 --> 00:07:45,780 is a childNode of shipMesh. 109 110 00:07:46,170 --> 00:07:53,100 So if we were looking for emitter, but I happen to use the shipMesh identity, if I had recursive, then 110 111 00:07:53,340 --> 00:07:56,120 it'll include and search for that emitter childNode as well. 111 112 00:07:56,280 --> 00:08:01,980 It basically just goes down into the tree and looks at all levels to find that name shipMesh. 112 113 00:08:02,250 --> 00:08:07,870 But in our case, it's looking for something called dice inside this diceCollada.scn. 113 114 00:08:08,040 --> 00:08:12,690 And even though it doesn't really need to be recursive because we know that it doesn't have any childNode 114 115 00:08:12,690 --> 00:08:14,390 branches, it's just a good habit, 115 116 00:08:14,400 --> 00:08:18,090 so that when you do have more complicated scenes, then your code will still work. 116 117 00:08:18,090 --> 00:08:23,610 So, now that we've created our diceNode, we need to give it a position, so diceNode.position. 117 118 00:08:23,610 --> 00:08:28,320 And, again, we're going to be using the SCNVector 3 to create this position. 118 119 00:08:28,560 --> 00:08:36,870 And in this case, I'm going to set the X as zero in the center. The Y, I'm going to set it about the same 119 120 00:08:36,870 --> 00:08:43,980 level as the view. And then, the Z, I'm going to set it slightly closer in front of me, 120 121 00:08:44,010 --> 00:08:48,180 so I'm just going to set it to minus 0.1, instead of minus 0.5 which we had 121 122 00:08:48,330 --> 00:08:51,770 a little bit too far away, I think, for the dice because it's so small. 122 123 00:08:52,020 --> 00:08:57,510 And the last thing we need to do if you remember same is up here, we just need to tap into that sceneView 123 124 00:08:57,510 --> 00:09:05,340 that we've got, select the scene that's inside the sceneView, select the rootNode, and add our new 124 125 00:09:05,340 --> 00:09:08,060 diceNode as a childNode. 125 126 00:09:08,090 --> 00:09:08,400 All right. 126 127 00:09:08,430 --> 00:09:09,650 So that's almost done. 127 128 00:09:09,690 --> 00:09:15,460 But you see one error from Xcode. At the moment, you can see that diceNode is an optional 128 129 00:09:15,540 --> 00:09:21,810 and that's because it might search through your tree and find nothing with the name dice. In which case, 129 130 00:09:21,840 --> 00:09:24,440 then diceNode is going to equal nil. 130 131 00:09:24,450 --> 00:09:29,210 So this line is fine because we're using optional chaining to see if diceNode exists, 131 132 00:09:29,250 --> 00:09:30,790 then we will set the position. 132 133 00:09:30,930 --> 00:09:32,870 But this is a little bit more problematic. 133 134 00:09:32,910 --> 00:09:35,590 We're trying to put the diceNode inside our scene. 134 135 00:09:35,700 --> 00:09:38,160 But what if it's nil, then our app will crash, 135 136 00:09:38,160 --> 00:09:38,790 right? 136 137 00:09:38,790 --> 00:09:44,280 So if you decided to just force unwrap it, then you could get into some really hairy situations. 137 138 00:09:44,340 --> 00:09:49,460 So I'm going to wrap everything inside an "if let" just to be safe. 138 139 00:09:49,500 --> 00:09:56,190 So, basically, if dice node is not nil and this succeeds, then we are going to set its position and also 139 140 00:09:56,190 --> 00:10:01,670 we're going to add it as a childNode. So we no longer need the optional because for us to enter in here, 140 141 00:10:02,030 --> 00:10:04,910 then diceNode has to equal something. 141 142 00:10:04,910 --> 00:10:06,050 So let's give it a spin. 142 143 00:10:17,100 --> 00:10:20,830 And that's all you need to do to add a 3D model into your app 143 144 00:10:20,830 --> 00:10:26,770 using ARKit. So have a look at TurboSquid and see some of the other cool things that you can put 144 145 00:10:26,860 --> 00:10:28,030 into your app. 145 146 00:10:28,030 --> 00:10:34,630 There are thousands upon thousands of 3D models that are really, really awesome, and you can use the same 146 147 00:10:34,630 --> 00:10:41,500 technique that we used to bring in a dice into our app to bring anything else, maybe a 3D model of a 147 148 00:10:41,500 --> 00:10:42,340 heart, 148 149 00:10:42,460 --> 00:10:48,370 or maybe you want to plant some trees, whatever it may be. Go nuts and be sure to let me know if you 149 150 00:10:48,370 --> 00:10:49,450 create anything cool. 150 151 00:10:49,480 --> 00:10:51,820 We'd love to check it out and congratulate you. 151 152 00:10:51,850 --> 00:10:53,140 So I hope that was fun. 152 153 00:10:53,140 --> 00:10:56,370 In the next lesson, we're going to take it to the next level. 153 154 00:10:56,410 --> 00:11:01,420 So one of the things you might have noticed is that our dice at the moment is floating in midair which 154 155 00:11:01,420 --> 00:11:03,070 is terribly unrealistic. 155 156 00:11:03,430 --> 00:11:07,980 So on the next lesson, we're going to enable plane detection, 156 157 00:11:08,110 --> 00:11:11,170 and this is something that is really cool in ARKit. 157 158 00:11:11,170 --> 00:11:19,090 It basically allows you to detect flat surfaces in order to place your object onto those surfaces. 158 159 00:11:19,090 --> 00:11:25,810 And it's going to allow us to put our dice onto a table or onto the floor and it'll look a lot more 159 160 00:11:25,810 --> 00:11:26,890 realistic. 160 161 00:11:26,890 --> 00:11:30,130 So all of that and more on the next lesson, I will see you there.