0
1
00:00:00,300 --> 00:00:08,700
Now, in the last lesson, we looked at using Apple's new tool which is USDZ converter in the command
1

2
00:00:08,700 --> 00:00:17,560
line to convert a 3D model into the latest file format which is the USDZ format.
2

3
00:00:17,850 --> 00:00:27,440
And we now have our 3D model of Eevee ready to go and ready to incorporate into ARKit project.
3

4
00:00:27,440 --> 00:00:31,490
We're going to place it under our art.scnassets folder.
4

5
00:00:32,150 --> 00:00:38,750
So in order to do that, we're going to bring up the folder that contains the eevee.usdz file,
5

6
00:00:38,750 --> 00:00:47,180
and then we're just gonna drag and drop it into our art.scnassets folder. And now, it's incorporated
6

7
00:00:47,330 --> 00:00:52,820
in here and it's now ready for use inside our project.
7

8
00:00:52,820 --> 00:00:58,880
What you see on the left here is that there are three nodes that make up this Eevee. And the three of
8

9
00:00:58,880 --> 00:01:03,130
them are variously the eyes, the body, and the mouth.
9

10
00:01:03,320 --> 00:01:07,110
And together, they comprise this entire 3D model.
10

11
00:01:07,190 --> 00:01:14,030
So the first thing that we're going to do is we're going to convert this USDZ file format to a SCN
11

12
00:01:14,030 --> 00:01:20,720
file so that we can use it with our SceneKit framework which we're using to render our object
12

13
00:01:20,720 --> 00:01:30,590
in ARKit. So selecting this file, go to Editor, and click on convert to SceneKits scene file format, and go ahead
13

14
00:01:30,620 --> 00:01:33,200
and click Convert.
14

15
00:01:33,200 --> 00:01:41,150
And now, our Eevee is now available as a scene file, just as we had in the original example project where
15

16
00:01:41,150 --> 00:01:45,140
they had the plane that came with the template project.
16

17
00:01:45,140 --> 00:01:52,160
We now have our Eevee as the same file format. And you can see over here on the left that we've got three
17

18
00:01:52,160 --> 00:01:58,970
nodes: one that represents the eyes and the textures for the eyes, another that is for the body, and the
18

19
00:01:58,970 --> 00:02:05,630
final one which is for the mouth. And we want to combine all three of these into a single node.
19

20
00:02:05,840 --> 00:02:12,410
So we're going to select all three and click Flatten Selection. And now, we only have a single node that
20

21
00:02:12,410 --> 00:02:14,600
is the entirety of the Eevee.
21

22
00:02:14,600 --> 00:02:20,220
So if you click on that node, you can rename it to something that makes a little bit more sense, rather
22

23
00:02:20,220 --> 00:02:24,500
than mesh one or mesh two. And we can rename it simply Eeevee.
23

24
00:02:24,680 --> 00:02:32,090
Now, inside the navigator, you can obviously rotate it around or zoom, and pan, and if you ever lose your
24

25
00:02:32,090 --> 00:02:40,430
Eevee for any reason, just double click on the node and it'll come back to you in the center of the screen.
25

26
00:02:40,430 --> 00:02:45,710
Now, the other thing that we need to do is, at the moment, our Eevee is gigantic.
26

27
00:02:45,710 --> 00:02:50,670
It's about four meters in width, three meters in height, and four meters in depth.
27

28
00:02:50,690 --> 00:02:52,510
So it's a bit too big.
28

29
00:02:52,580 --> 00:03:01,620
So let's scale it down to 0.05 for all three of these dimensions, and double click
29

30
00:03:01,650 --> 00:03:03,810
to bring it into the center.
30

31
00:03:03,900 --> 00:03:10,680
And I've had to play around with the size and the scale of this particular model, and it seems like the
31

32
00:03:10,680 --> 00:03:18,260
0.05 cale brings it to quite a nice size in comparison with our Pokémon card.
32

33
00:03:18,270 --> 00:03:24,540
So, now that we've done everything we need to do with our Eevee model, it's time to head back into the
33

34
00:03:24,540 --> 00:03:33,730
ViewController, and we're going to create our Eevee on top of the card. So as we know, the planeNode
34

35
00:03:34,150 --> 00:03:40,300
is the 3D objects that gets placed on top of the image that's detected, which is the Pokémon card,
35

36
00:03:40,810 --> 00:03:48,920
and it's on top of that plane that we want to place our Eevee 3D model. So at the end of this "if let" statement,
36

37
00:03:49,790 --> 00:03:54,260
let's create a new scene and let's call it pokeScene,
37

38
00:03:55,190 --> 00:04:08,060
and this is going to be a SCNScene which is created by using a file that is named "art.scnassets/
38

39
00:04:08,610 --> 00:04:12,120
eevee.scn."
39

40
00:04:12,530 --> 00:04:18,620
So this is referring to this scene file here and this is the one that we're going to load up and we're
40

41
00:04:18,620 --> 00:04:27,250
going to present onto our plane here. Now, this again will be a optional because there might not be an
41

42
00:04:27,270 --> 00:04:32,100
eevee.scn file at the art.scnassets folder.
42

43
00:04:32,100 --> 00:04:35,690
Now, because we can see it right here and it definitely exists,
43

44
00:04:35,770 --> 00:04:41,680
you can either choose to force unwrap this, or if you want to play it safe, simply create another "if let"
44

45
00:04:41,830 --> 00:04:50,360
and we can use optional binding to make sure that we definitely get a pokeScene that gets created.
45

46
00:04:50,410 --> 00:04:57,100
Now, inside this "if let," we're going to create a node that is going to represent the Eevee. So we'll call
46

47
00:04:57,100 --> 00:05:11,260
it pokeNode and it's going to be equal to pokeScene.rootNode.childNodes.first.
47

48
00:05:11,270 --> 00:05:17,810
And this is one of the reasons why it makes it easier to merge all three of those nodes into one because
48

49
00:05:17,810 --> 00:05:21,770
the first node is simply the Eevee in its entirety.
49

50
00:05:21,860 --> 00:05:26,060
And this makes it easier to work with it when we're using code.
50

51
00:05:26,090 --> 00:05:34,190
So, again, this might be equal to nil, so therefore, it is an optional because there might not be any 
51

52
00:05:34,190 --> 00:05:36,640
childNodes in the rootNode of the pokeScene.
52

53
00:05:36,740 --> 00:05:44,450
But as we know, there is, you can either choose to, again, force unwrap this object and specify and override
53

54
00:05:44,450 --> 00:05:50,210
the safety check, or you can, again, create a "if let" statement, and we're kind of getting into the 
54

55
00:05:50,210 --> 00:05:56,810
"if let" pyramid kind of scenario which happens very often when we're using Swift. but nonetheless, it does
55

56
00:05:56,810 --> 00:05:59,060
work quite well.
56

57
00:05:59,060 --> 00:06:04,960
So, now that we've got our pokeNode, and we know that it definitely contains a childNode of some sort,
57

58
00:06:05,300 --> 00:06:12,110
namely, our Eevee model, then we can add this pokeNode to our planeNode which already exists.
58

59
00:06:12,530 --> 00:06:20,760
So we can say planeNode.addChildNode and the node is going to be the pokeNode. So that's all
59

60
00:06:20,760 --> 00:06:27,930
we need to do to add our Pokémon to the planeNode which is attached to the position and size of the
60

61
00:06:27,930 --> 00:06:29,220
image that was detected.
61

62
00:06:29,700 --> 00:06:35,940
So, now we can give this a run and see whether if we manage to render our Eevee onto the position of the
62

63
00:06:35,940 --> 00:06:39,790
card.
63

64
00:06:40,010 --> 00:06:47,770
So here's my app running and when I flip over the image, it gets recognized and my Eevee shows up on screen.
64

65
00:06:48,080 --> 00:06:56,030
Now, because my card's quite shiny and when it has glare, the image is very difficult to see for the camera
65

66
00:06:56,480 --> 00:06:58,550
and it loses the image recognition.
66

67
00:06:58,610 --> 00:07:05,210
So you can see when I try to face this towards the window, you can see that there's a brief moment when
67

68
00:07:05,210 --> 00:07:09,880
the image is not so clear and I lose my model.
68

69
00:07:09,980 --> 00:07:14,900
But if I face it away from the glare, you can see that that image is quite stable.
69

70
00:07:14,900 --> 00:07:20,930
So this is something that you have to take into account when you are designing these apps for use with
70

71
00:07:20,930 --> 00:07:22,500
a particular image.
71

72
00:07:22,520 --> 00:07:30,890
So there is my Eevee. And it's kind of like being bisected by my card which is a bit gruesome.
72

73
00:07:30,890 --> 00:07:37,460
In order for it to be sitting on top of the card, then I have to, again, rotate it in the same way that
73

74
00:07:37,460 --> 00:07:40,010
I wrote it my plane previously.
74

75
00:07:40,040 --> 00:07:45,680
Now, another thing that you notice is that my Pokémon looks a little bit dark. It doesn't look like
75

76
00:07:45,680 --> 00:07:46,960
it's been lit.
76

77
00:07:47,030 --> 00:07:49,760
My model doesn't seem to have a light source.
77

78
00:07:50,000 --> 00:07:52,670
So let's head back into our code and see if we can fix that.
78

79
00:07:55,960 --> 00:08:00,520
Now, adding lighting to the scene in ARKit is incredibly easy.
79

80
00:08:00,520 --> 00:08:07,600
All we need to do is just go up to our viewDidLoad and tap into our sceneView, and toggle the setting
80

81
00:08:07,600 --> 00:08:14,990
for autoenablesDefaultLighting, and this allow SceneKit to automatically adds light to the scene.
81

82
00:08:15,160 --> 00:08:19,210
And if we set that to true, then it will be switched on.
82

83
00:08:19,270 --> 00:08:27,350
And when I run this app again, you can see the difference. So you can see now my Eevee that's being rendered
83

84
00:08:27,680 --> 00:08:32,710
is much brighter and it's more easy to see all of its features.
84

85
00:08:32,750 --> 00:08:34,700
Now, there's just one problem, though.
85

86
00:08:34,780 --> 00:08:41,420
It's kind of sitting in the middle of my card. And what I really wanted to do is to sit on top of my
86

87
00:08:41,420 --> 00:08:46,700
card so that when I have my card flat, it's as if it's standing on the card. Because at the moment, the
87

88
00:08:46,700 --> 00:08:48,740
way that it looks is a bit weird.
88

89
00:08:48,740 --> 00:08:54,230
It's kind of like my Pokémon has fallen over and needs help or something, whereas I kind of want it to
89

90
00:08:54,230 --> 00:08:55,560
be standing up straight.
90

91
00:08:56,330 --> 00:09:02,860
So we've already done this previously when we rotated the plane that we added to the card.
91

92
00:09:03,140 --> 00:09:10,130
So as a challenge, I want you to figure out if you can rotate the 3D model so that its feet are standing
92

93
00:09:10,130 --> 00:09:11,960
flat on the card.
93

94
00:09:12,620 --> 00:09:14,900
So pause the video now and give that a go.
94

95
00:09:18,600 --> 00:09:18,900
All right.
95

96
00:09:18,930 --> 00:09:20,150
So how did that go?
96

97
00:09:20,860 --> 00:09:29,580
So previously, our plane was standing at 90 degrees to the card and we needed to rotate it anticlockwise
97

98
00:09:29,850 --> 00:09:35,970
by 90 degrees on the x-axis, so that it will be flush with the card.
98

99
00:09:35,970 --> 00:09:38,200
Now, we almost have the opposite problem
99

100
00:09:38,220 --> 00:09:45,030
in this case. Our Pokémon is standing as if it's flat with the card.
100

101
00:09:45,030 --> 00:09:46,870
But we need it to stand upright,
101

102
00:09:46,890 --> 00:09:53,790
so we actually need to rotate it clockwise on the x axis by, again, 90 degrees.
102

103
00:09:53,790 --> 00:09:59,550
We just need to mess with this line. So we can use this line of code as a base and we can change our
103

104
00:09:59,550 --> 00:10:02,160
pokeNode, so that it'll be rotated.
104

105
00:10:02,160 --> 00:10:08,610
So let's tap into the pokeNode and let's, again, change the eulerAngles, and we're changing it on the
105

106
00:10:08,730 --> 00:10:17,610
x axis, and we're going to set it equal to positive pi divided by 2. And this will rotate it clockwise
106

107
00:10:17,670 --> 00:10:26,750
by 90 degrees on the x axis. And it should, hopefully, make our Pokémon stand on the card. And there you have
107

108
00:10:26,750 --> 00:10:26,900
it.
108

109
00:10:27,380 --> 00:10:35,780
So our Pokémon is now standing on top of the card and it's got its feet firmly planted on the card.
109

110
00:10:35,870 --> 00:10:42,530
And when I place it onto the ground, you can see that you can move it around, and it looks like as if
110

111
00:10:42,590 --> 00:10:48,420
I've now got a Pokémon that's standing on my card which is pretty neat.
111

112
00:10:48,560 --> 00:10:54,020
Now, we've pretty much achieved all that we need to do. But in the next lesson, we're going to be looking
112

113
00:10:54,020 --> 00:10:56,400
at how we can add another Pokémon,
113

114
00:10:56,480 --> 00:11:03,860
so to be able to simultaneously detect two images and also render two models onto the respective image
114

115
00:11:04,070 --> 00:11:07,810
so that we can have many Pokémons on the scene at once.
115

116
00:11:07,820 --> 00:11:10,760
So for all of that and more, I'll see you on the next lesson.