All right. 1
So in previous lessons, we managed to get our code to recognize the Pokémon card, and to be able to render 2
a 3D model of the Eevee Pokémon on top of the card so that it's standing on the card. 3
Now, in this lesson, it's mostly a challenge for you because I want to be able to have, say, two card side 4
by side. Say, you know, my Pokémon is battling somebody else's Pokémon, and I want it such that when two 5
players when they're both revealing their Pokémons, the 3D models should appear on top of each 6
card. So the card that I'm gonna be working with is the Offish card. And the first thing we need to do 7
is we need to add the Oddish card image to our project. 8
So if you have your own Pokémon cards and you want to work with a different model, that's perfectly fine, 9
or if you want to use another card that you have lying around, a playing card, a business card, that's 10
also fine. 11
But you need to add that into your project. 12
Now, if you want to work along with me, then just head over to this website here and print out the Oddish 13
card so that you can follow along with the tutorial as well. 14
So here I've saved an image of the Oddish card and I'm simply going to rename it, 15
oddish-card, and I'm going to drag this into my project under my assets. 16
So notice that we've got our Pokémon cards folder already, and all I need to do is open my downloads 17
folder and drag my Oddish card into my Pokemon cards 18
group. So, again, we get a warning 19
and that's because we haven't provided a physical dimension to it. 20
So let's tap that in, 21
0.065, hit Enter, 22
so the height gets calculated automatically. 23
Now, while I'm here, I'm going to switch out my Eevee card as well, just so that it's a little bit more 24
clear and it works a little better, just because it has much higher resolution and a better clarity than 25
what I can get from taking a photo of it. And I'm just going to drag that new card back in and delete 26
the old one as well. 27
And, of course, update my dimensions, 0.065. 28
So that means if you have images that are high resolution that already digital, then perfect, upload those. 29
If you don't and you want a particular card to be recognized, then using the camera or using a scanner 30
will work just as well. 31
So, now that we have both cards incorporated to our Pokémon cards set, the next challenge is to incorporate 32
the Oddish 3D model. 33
So we're going to do exactly the same. 34
You're going to download it from Roestudios and you can just command F to find Oddish, and download 35
the file, use the Oddish model, and convert it to usdz and include it into your project. 36
So pause the video and give that a go. All right. 37
So this should be incredibly easy as we did it before. 38
So we're just going to agree to the Terms and Conditions, we're going to unzip the Oddish folder. 39
And here we have all of those different types and different file formats, but we're going to use the 40
one that is just called Oddish.obj as we did before. 41
And then we're going to pull up Terminal and I'm going to use Xcode command line, run, usdz_converter, 42
and then I have a space, and then I drag in the file I want to convert, and then after a space, 43
I add the location that I want to place my converted file. And that's just going to be called 44
Oddish.usdz in my downloads folder. And there you have it. 45
There's our new Oddish model. 46
So, now that we have that model, we can drag it into our art.scnassets folder, and we can now convert 47
it to a SceneKit scene format. 48
And it does that for a little while. 49
And now we have oddish.scn. And there you go, 50
There's little Oddish. As we did previously, 51
we're going to simplify our nodes by flattening them into one, just so that we don't have the eyes and 52
the mouth and the body all separate, 53
and we're going to rename this node to oddish. 54
And at the moment, again, it's a little bit too big, 55
so we're going to scale it down by the same scale format, 56
So 0.05 on the height, width, and the depth. 57
And now, this audition is about the same size as our Eevee which is the perfect size for rendering onto 58
the card. 59
All right. 60
So now that we've got two 3D models and both Pokémon cards into our project, the next step is to figure 61
out how can we know whether if the Oddish card was detected, or whether if the Eevee card was detected, 62
how can we differentiate that. 63
Well, you can see the anchor here is the item that triggered this function. 64
So it's the thing that got detected using the mode of detection that we chose here which is image tracking, 65
so the anchor is then the image that was recognized and detected. 66
If we make sure that the image anchor is indeed an ARImageAnchor, then we should be able to tap into some 67
its properties. 68
Now, what kind of properties does it have? If you hold on option and you click on ARImageAnchor, then 69
you can see this brief description about what it is. 70
But if you want to read more, we can click on Open Developer Documentation and this takes us to the 71
ARImageAnchor Docs. 72
Now, it says that when you run a world-tracking AR session and specify ARReferenceImageObjects, 73
now you might be wondering, we're not running a world tracking AR session actually, we're running 74
a ARImageTrackingConfiguration. 75
But if you actually change this to ARWorldTrackingConfiguration, this image tracking also works. 76
So you can now detect planes as well as images. 77
All you have to do is change this configuration. Instead of tracking images, you change it to 78
detectionImages, and it'll work exactly the same. 79
But now, you're able to detect planes in the world tracking as well as images., so you can do both. 80
But if you only need one, then try to keep it to imageTracking so that it's less resource-intensive. 81
So an ARImageAnchor contains ARReferenceImage objects. 82
So if we look inside the ARReferenceImage object, you could see that it has a number of properties, for example, 83
the name property which is a descriptive name for the image which was recognized in the ARSession, 84
so that means that if we print the imageAnchor.referenceImage.name, then we can figure out which 85
card was detected when this function was called. 86
So, now if I flip over this card, which is Eevee, you can see that in my debug console, I've got the 87
Eevee-card which, remember, is the name of that card over here. And that is what it's printing here. 88
Now, if I turn over the Oddish card, then you can see I've got the Oddish card being printed over here, 89
and that refers to this one being detected. 90
So at the moment, an Eevee is being rendered on both cards, and we're only getting one card recognized 91
at one time. 92
So let's try and change that. 93
Let's head back to our ViewController and we can be pretty certain that we can access the image that 94
was detected through using the imageAnchor.referenceImage.name. 95
So let's go ahead and delete this print statement. 96
Now, if you scroll up to our viewWillAppear, you can see that at one point, we set the maximum number 97
of tracked images in our configuration to 1. 98
And that's why at any moment in time, we're only tracking one image and we're only able to render our 99
3D model onto one image. 100
So let's raise that number to two so that we can simultaneously track and render for two images. 101
Now, down here, when we render our pokeScene, at the moment, it only renders eeveee.scn. 102
But we want to be able to render the oddish.scn, as well as eevee, depending on which card and which 103
images were detected. 104
So as a challenge, can you modify this code so that when the orange card is detected, 105
so we only have Oddish on the table, then we should only see the Oddish model rendered. 106
But when we have Eevee on the table as well, then we should be able to see both models rendered onto 107
the correct card. 108
So pause the video and see if you can complete this challenge. 109
All right. 110
So how did that go? 111
Let's say that if imageAnchor.referenceImage.name == "eevee-card," 112
and remember, this is the name that we had printed in our debug console and it also refers to the name 113
of the card over here. 114
And, again, make sure you don't have any typos there. 115
So if the card that was recognized was the eevee-card, then, in that case, we should be rendering a 116
pokeScene with the eevee.scn. 117
And we should be rendering that onto the card. Now at the same time, if the imageAnchor.referenceImage.name 118
was "oddish-card," 119
so the app saw the oddish-card, 120
then we should be rendering the oddish.scn file or the Oddish scene, 121
and we should be adding that node to our planeNode. So, now let's just briefly review our code. This delegate 122
method gets triggered whenever any of the images in the group that's Pokémon cards gets detected, and 123
that is because we added all of those groups over here, so that our AR app starts tracking all of those 124
cuts. 125
And when one of them or both of them gets detected, then we add a plane to that 126
imageAnchor at the position of the image. 127
So that's when we end up with that see-through white panel that's flushed with the card. 128
Now, if there's two cards that get detected, then they both get a white panel or a plane added to it. 129
If the image that was detected is the eevee-card, then we create a scene using eevee.scn, 130
and we add it onto the plane. 131
Now, if the image that was detected was the oddish-card, 132
then we add our oddish scene to the plane. And because we've set our maximumNumberOfTrackedImages to 2, 133
then we can now simultaneously track movements and location for two images. 134
So this should now fulfill all our requirements. And let's run our app to see if it does indeed work. 135
Okay. 136
So here's our app running. And let's just flip over one of these cards. 137
There's Eevee 138
and there's all Oddish. And I can move them around, 139
I can rotate them. 140
I can lift them up off the ground. 141
I can move them around. And at the same time, I can have both of these guys on the screen and moving, so 142
they could be attacking each other or something like that. 143
So, I hope you had fun building this project along with me, and I hope this project has inspired you to create 144
some awesome things using ARKit and SceneKit. Now, I look forward to hearing all about the amazing 145
incredible things that you guys are building. 146
So be sure to hit up the team at robots@londonappbrewery. com 147
if you build something fantastic and you want to be entered into the Monthly Student App Selection that 148
will go out in the newsletter to all of our students worldwide. 149
So in the next module, we're going to be looking at how we can stop playing video when we track and recognize 150
images in AR. 151
So we're going to be building the interactive Harry Potter style newspapers where everything on the 152
page comes alive. 153
So for all of that and more, I'll see you on the next module.