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.