0 1 00:00:00,740 --> 00:00:07,200 All right. So let's get cracking. So open up your Xcode and click on Create a new X code project. 1 2 00:00:07,200 --> 00:00:11,730 Now, the template that we're going to select this time is the Augmented Reality App. 2 3 00:00:11,730 --> 00:00:17,100 And this already contains a little bit of code that allows us to get started and get going pretty quickly. 3 4 00:00:17,100 --> 00:00:20,900 So go ahead and hit Next and give your product a name. 4 5 00:00:20,910 --> 00:00:24,270 So we're going to call this ARDicee. 5 6 00:00:24,300 --> 00:00:27,830 So you guys have made Dicee before on the iPhone in 2D, 6 7 00:00:27,930 --> 00:00:33,780 and we're going to make it in 3D and in AR, so you can call it aARDicee, or whatever you like. 7 8 00:00:33,780 --> 00:00:38,680 Now, one other thing to note, make sure that the Content Technology has SceneKit selected. 8 9 00:00:38,760 --> 00:00:44,070 So as you can see, there's three options for working with AR on iOS at the moment. 9 10 00:00:44,070 --> 00:00:52,410 You can use SceneKit, SpriteKit, or Metal. So metal is a GPU accelerated graphics API that lets you 10 11 00:00:52,410 --> 00:00:58,890 get pretty close to controlling the GPU which is the graphics processing unit. And you might have heard 11 12 00:00:58,890 --> 00:01:02,650 the term "being close to the metal" or "coding close to the metal." 12 13 00:01:02,790 --> 00:01:07,980 The metal is basically the computer. And this is a good name for the API because it basically lets you push 13 14 00:01:07,980 --> 00:01:14,110 the hardware to the limits and gives you full control over how your game or your graphics would work. 14 15 00:01:14,130 --> 00:01:18,720 It's pretty similar to OpenGL if you've dealt with graphics and with games. You might have heard of 15 16 00:01:18,720 --> 00:01:19,290 that. 16 17 00:01:19,650 --> 00:01:24,600 The other things here are SpriteKit and SceneKit. And SpriteKit and ScreenKit are actually frameworks that 17 18 00:01:24,600 --> 00:01:26,340 rest on top of metal. 18 19 00:01:26,370 --> 00:01:30,990 So the guys at Apple basically created bits of template code and boilerplate code that has a lot of 19 20 00:01:30,990 --> 00:01:36,510 the basic implementation in game development and basically saves you time and frustration when you're 20 21 00:01:36,510 --> 00:01:37,600 creating your games. 21 22 00:01:37,860 --> 00:01:46,350 So SpriteKit was created with mostly 2D games in mind and SceneKit was created for 3D games. 22 23 00:01:46,560 --> 00:01:51,580 So in this ARKit tutorial, we're going to be focusing on using SceneKit with a ARKit. 23 24 00:01:51,660 --> 00:01:56,340 But if you're interested, then you can check out the documentation and learn more about the other content 24 25 00:01:56,340 --> 00:01:57,600 technologies as well, 25 26 00:01:57,600 --> 00:02:00,330 and I'll link the documentation in this lesson. 26 27 00:02:00,330 --> 00:02:07,080 So make sure that SceneKit is checked and hit Next. And then, go ahead and save it any way you'd like. 27 28 00:02:07,080 --> 00:02:09,030 I'm just going to pop it on my desktop for now. 28 29 00:02:09,030 --> 00:02:09,260 All right. 29 30 00:02:09,270 --> 00:02:13,490 So here is our brand-new project and have a look around. 30 31 00:02:13,530 --> 00:02:17,640 You might see some things that look slightly different from what we're used to. 31 32 00:02:17,640 --> 00:02:24,750 The first thing that you'll notice is this art.scnassets folder that is separate from our 32 33 00:02:24,810 --> 00:02:26,570 assets.xcassets folder. 33 34 00:02:26,610 --> 00:02:32,850 So if you have a look inside, you can see that there's a ship.scn file and a texture.png 34 35 00:02:32,850 --> 00:02:33,610 file. 35 36 00:02:33,630 --> 00:02:39,750 So this comes pre-included and it's basically something from Apple that allows you to get going with 36 37 00:02:39,750 --> 00:02:47,700 your ARKit app, and it's going to put the spaceship into the 3D world around you. And the texture map 37 38 00:02:47,700 --> 00:02:56,460 for this object is inside this texture.png and it's just an image that determines how the ship 38 39 00:02:56,520 --> 00:02:57,720 is going to look. 39 40 00:02:57,960 --> 00:03:04,290 So if you have a look at the document outline and select the shipMesh node, then you can see the texture 40 41 00:03:04,290 --> 00:03:10,950 map being implemented under the property called Diffuse. And diffuse shading is basically the amount 41 42 00:03:10,980 --> 00:03:15,270 and color of light that's reflected off this material surface. 42 43 00:03:15,270 --> 00:03:20,760 You can think of it as the base color or the base material for the object and you can change it to a 43 44 00:03:20,760 --> 00:03:24,090 color or you can change it to a image, 44 45 00:03:24,090 --> 00:03:26,550 and that's pretty easy to setup as well. 45 46 00:03:26,550 --> 00:03:26,790 All right. 46 47 00:03:26,820 --> 00:03:33,030 So the art.scnassets folder is a folder that separate from assets.xcassets folder, 47 48 00:03:33,030 --> 00:03:36,780 and this is going to be the folder that you're going to use for all of your 3D graphics, 48 49 00:03:36,810 --> 00:03:39,780 and we're going to see it come into use very soon. 49 50 00:03:39,780 --> 00:03:46,770 I'm just gonna drag it down to here because I don't like it interrupting the flow of my code files, but 50 51 00:03:46,830 --> 00:03:48,690 you can keep it however you like. 51 52 00:03:48,690 --> 00:03:51,650 Now, let's have a look inside ViewController.swift. 52 53 00:03:51,840 --> 00:03:58,410 The first thing you'll notice is that we are importing both SceneKit and ARKit to obviously leverage 53 54 00:03:58,410 --> 00:04:04,500 the code that's inside and use these frameworks that Apple has created, so that we can create augmented 54 55 00:04:04,500 --> 00:04:08,610 reality effects really easily without writing a whole bunch of code. 55 56 00:04:08,610 --> 00:04:13,120 Another thing is that you'll see there's this IBOutlet that links to a sceneView. 56 57 00:04:13,290 --> 00:04:20,010 And if we have a look at the Main.storyboard, we'll see that in the template, Apple is already, by 57 58 00:04:20,010 --> 00:04:23,340 default, implemented a AR. sceneView. 58 59 00:04:23,340 --> 00:04:28,560 And if you search in the object library for AR, you can see that there's two options: AR SceneKit View 59 60 00:04:28,560 --> 00:04:35,490 or AR SpriteKit View, and they're basically a view inside which you can display your SpriteKit 60 61 00:04:35,490 --> 00:04:38,280 or SceneKit content using AR. 61 62 00:04:38,460 --> 00:04:42,130 And this is, of course, linked up to this outlet called sceneView, 62 63 00:04:42,150 --> 00:04:46,410 and we're going to be manipulating it and adding to it inside our code file. 63 64 00:04:46,470 --> 00:04:52,140 So let's go back to the ViewController and have a look at the rest of the template code that Apple 64 65 00:04:52,140 --> 00:04:53,100 has injected. 65 66 00:04:53,280 --> 00:04:59,220 So you can see that we're sending the sceneView's delegate as self, which is this current view controller, 66 67 00:04:59,880 --> 00:05:05,740 and this current ViewController also conforms to the ARSCNViewDelegate, and there's a whole bunch of delegate 67 68 00:05:05,740 --> 00:05:11,980 methods including responding to a whole bunch of things such as session did fail or 68 69 00:05:11,980 --> 00:05:14,180 session interrupted, et cetera. 69 70 00:05:14,350 --> 00:05:17,740 And for now, we're not actually going to be using any of this. 70 71 00:05:17,740 --> 00:05:23,170 I'm actually going to get rid of all of this, make sure that you don't delete the last closing brace, 71 72 00:05:23,170 --> 00:05:23,750 of course. 72 73 00:05:23,960 --> 00:05:27,940 This way we have a slightly cleaner code file. And as we code it up, it's going to get longer and 73 74 00:05:27,940 --> 00:05:32,440 longer, and this will just make it clearer for you to be able to see what's going on. So the next line 74 75 00:05:32,440 --> 00:05:34,870 here is the showStatistics. 75 76 00:05:34,870 --> 00:05:39,210 So this shows the frames per second as well as the timing information. 76 77 00:05:39,340 --> 00:05:44,440 And I'm gonna get rid of that as well because we won't be using it in this project. And then we get to 77 78 00:05:44,440 --> 00:05:45,580 the meat of the code. 78 79 00:05:45,580 --> 00:05:51,850 So here we're creating a new scene by using the ship.scn file that we saw earlier on inside the 79 80 00:05:51,850 --> 00:05:57,550 art.scnassets folder, and then we're putting that scene inside the sceneView. And just before 80 81 00:05:57,550 --> 00:06:04,730 the view shows up on screen, we're creating a configuration of the type ARWorldTrackingSessionConfiguration. 81 82 00:06:05,020 --> 00:06:09,310 So this is really, really important. Do you remember previously how we talked about the fact that you need 82 83 00:06:09,310 --> 00:06:16,620 an A9 chip in order to get augmented reality working properly on your iOS app? 83 84 00:06:16,630 --> 00:06:18,150 This is the reason for it. 84 85 00:06:18,160 --> 00:06:25,060 So if you have a look at Apple's main ARKit Framework Documentation, you can see that on one of the 85 86 00:06:25,060 --> 00:06:29,780 first topics is the Configurations. And there's two types of configurations. 86 87 00:06:29,800 --> 00:06:35,860 One is the ARSessionConfiguration and the other is the ARWorldTrackingSessionConfiguration. 87 88 00:06:36,050 --> 00:06:40,750 So the world tracking session configuration is the one that is immersive AR 88 89 00:06:40,810 --> 00:06:45,010 and this is what you normally associate with augmented reality. 89 90 00:06:45,010 --> 00:06:52,810 What it means is that when you conjure up a virtual object inside your real environment, not only does 90 91 00:06:52,810 --> 00:06:58,450 the object keep its position in the real world when you rotate your device, 91 92 00:06:58,450 --> 00:07:02,900 it also keeps its position when you transversely move your device. 92 93 00:07:03,040 --> 00:07:10,960 So it feels really, really real and it keeps that augmented reality illusion at maximum. 93 94 00:07:11,050 --> 00:07:18,880 Now, let's have a look at the other one which is ARSessionConfiguration. So you can add this type 94 95 00:07:18,940 --> 00:07:25,630 of a AR, I guess, to devices that don't have an A9 chip, so something like an iPhone 5 or an iPhone 6. 95 96 00:07:25,630 --> 00:07:32,890 Although, because ARKit is pretty demanding on the graphical processing of your device, you'll see 96 97 00:07:32,890 --> 00:07:39,310 that if you're using a really old device, it's going to seriously struggle under all of that processing 97 98 00:07:39,310 --> 00:07:40,760 weight. 98 99 00:07:40,870 --> 00:07:46,510 So the main difference between ARSessionConfiguration and ARWorldTrackingSessionConfiguration 99 100 00:07:46,930 --> 00:07:52,540 is that when you move the device, the virtual object will move with your device, 100 101 00:07:52,540 --> 00:07:58,750 and that illusion of augmented reality is kind of broken. Although, in the ARSessionConfiguration, you still 101 102 00:07:58,750 --> 00:08:04,540 get this device rotation effect. And I'm gonna quickly show you what these two types of configurations 102 103 00:08:04,540 --> 00:08:06,080 look like on a device. 103 104 00:08:06,100 --> 00:08:09,740 So I've got an iPhone 6 and one of the latest iPads. 104 105 00:08:09,880 --> 00:08:16,390 So on the iPad, I've got a A9 chip, and on the iPhone 6, I've got an A8 chip. So I'm gonna first run 105 106 00:08:16,390 --> 00:08:23,440 the ARWorldTrackingSessionConfiguration and I'm going to put this ship onto the screen using the 106 107 00:08:23,440 --> 00:08:24,850 iPad. 107 108 00:08:24,850 --> 00:08:25,140 All right. 108 109 00:08:25,150 --> 00:08:29,950 So let's try and find where that airplane--Oh, there we go. Found it. 109 110 00:08:29,980 --> 00:08:37,030 So as you can see, this is ARWorldTrackingSessionConfiguration and you can walk up to it, look above it, 110 111 00:08:37,030 --> 00:08:41,020 look below the airplane, and go really close, 111 112 00:08:41,020 --> 00:08:43,890 go around it, look at the back. 112 113 00:08:43,930 --> 00:08:51,820 It's really, really crazy how easy to implement that. That was--and now, I'm going to delete those two words: 113 114 00:08:51,820 --> 00:08:57,910 "World Tracking," and you're gonna see quite a bit of difference. And we're going to run this on my iPhone 6 with 114 115 00:08:57,910 --> 00:08:59,450 the A8 chip. 115 116 00:08:59,530 --> 00:08:59,760 All right. 116 117 00:08:59,770 --> 00:09:05,800 So here is ARSessionConfiguration. And you can see when I move left and right, 117 118 00:09:05,800 --> 00:09:07,900 my object doesn't move with me. 118 119 00:09:07,900 --> 00:09:17,480 So it's sort of floating in the same place, but it's not really the full AR experience. All right. So you 119 120 00:09:17,480 --> 00:09:19,110 might have noticed a bit of difference. 120 121 00:09:19,130 --> 00:09:22,840 And the other thing to point out is probably quite obvious. 121 122 00:09:22,940 --> 00:09:27,960 But just remember, you can't actually use ARKit in the simulator because it doesn't allow you to tap in 122 123 00:09:27,980 --> 00:09:30,080 to do a live camera session. 123 124 00:09:30,080 --> 00:09:38,960 So that is configuration. And I'm gonna change that back to a ARWorldTrackingSession where most 124 125 00:09:38,960 --> 00:09:41,600 of the interesting ARKit abilities are found. 125 126 00:09:41,780 --> 00:09:46,940 And if you don't know what is the chip inside your phone, you can have a look back at the first lesson 126 127 00:09:46,940 --> 00:09:52,730 in this module where we listed all the devices that are compatible with ARWorldTrackingSessionConfiguration 127 128 00:09:53,000 --> 00:09:54,620 and see if your device is on there. 128 129 00:09:54,860 --> 00:10:01,220 Alternatively, there's actually a property called isSupported on both of these configurations and can 129 130 00:10:01,220 --> 00:10:02,870 print it into the console. 130 131 00:10:02,870 --> 00:10:13,520 So all you have to do is just write ARSessionConfiguation.isSupported or the other one which 131 132 00:10:13,520 --> 00:10:17,440 is ARWorldTrackingSessionConfiguration 132 133 00:10:17,450 --> 00:10:24,710 .isSupported, and we probably should give those two Booleans a descriptive name, so-- 133 134 00:10:30,400 --> 00:10:30,620 All right. 134 135 00:10:30,750 --> 00:10:36,720 So you can go ahead and run that and you'll be able to see whether if your device supports either or both 135 136 00:10:36,810 --> 00:10:38,620 of these configuration types. 136 137 00:10:38,640 --> 00:10:38,870 All right. 137 138 00:10:38,910 --> 00:10:44,400 So that was just a brief demo about the differences between the ARSessionConfiguration and 138 139 00:10:44,400 --> 00:10:46,230 ARWorldTrackingSessionConfiguration. 139 140 00:10:46,230 --> 00:10:52,680 And I hope you can see how much more awesome it is when you are running augmented reality on 140 141 00:10:52,680 --> 00:10:55,860 a ARWorldTrackingSessionConfiguration supported device. 141 142 00:10:55,860 --> 00:11:03,930 Now, how you would use this in your actual product is you would put in a check to see if 142 143 00:11:03,990 --> 00:11:05,460 ARWorldTrackingSessionConfiguration 143 144 00:11:05,460 --> 00:11:07,440 .isSupported. 144 145 00:11:07,440 --> 00:11:11,020 If so, then do all of this, go ahead. 145 146 00:11:11,040 --> 00:11:18,600 But otherwise, you could say, you know, either tell the user that the true AR experience is not supported 146 147 00:11:18,600 --> 00:11:29,780 on their device or the alternative is to give them a configuration that is of the type ARSessionConfiguration, 147 148 00:11:30,180 --> 00:11:35,820 but letting them know that they weren't really experiencing the true AR experience because of device limitations. 148 149 00:11:36,210 --> 00:11:39,440 Basically, you just need an "if else" just to cover those two bases. 149 150 00:11:39,480 --> 00:11:39,710 All right. 150 151 00:11:39,740 --> 00:11:44,910 So I'm gonna delete this "if else" code for now. 151 152 00:11:45,000 --> 00:11:51,360 We're assuming that we have a device that can run ARWorldTrackingSessionConfiguration. And we're going 152 153 00:11:51,360 --> 00:11:56,880 to go ahead in the next lesson to create our first 3D object. 153 154 00:11:56,940 --> 00:11:57,780 So I'll see you there.