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