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