ARKit Airport
Navigation In Augmented Reality: Part One
Demo Code
So this past week I started on a new project. I’m trying to combine several concepts that I’ve been playing around with in ARKit into one project. I also found an awesome Spitfire model, which I’ve been having a lot of fun using. So in my previous two posts on ARKit, I touched on navigating in ARKit and manipulating virtual aircraft using ARKit/SceneKit. Let’s combine those two and see if we can build something cool. By the end of this project, we will have an AR app where we can:
- Tap a location on a map.
- Build a tiny AR airport from which a small AR plane will take off.
- It will fly to the location you picked.
- At that location, a little AR airport will be built.
- Our plane will then land there.
Doesn’t that sound exciting? Let’s get started!
Before We Get Started
I want to add some caveats here, or at the very least some observations I had while working with ARKit during this project. To begin with, while there probably are more efficient ways to go about this, my first iteration on this concept taxes the phones resources heavily. If you think about it, you’re doing using geolocation services, as well as using MapKit’s navigation API, along with the camera. Also, don’t forget the graphics rendering engine in SceneKit. It all starts to add up. The concept still works, and there are ways to optimize performance that I haven’t explored yet, but by taxing the system this heavily, it’s likely to start throwing weird results. This is particularly true in regards to how it renders virtual objects in the real world, i.e., your objects will drift from where they are supposed to be. All that being said, it’s pretty cool to be able to tap on a map and make something that only exists virtually fly to that location.
One other thing, when dealing with locations, in ARKit, be prepared for deviations. The iPhone’s geolocation systems don’t have the precision necessary, particularly in a large city like New York, to give the same location every time. Most of the time, the location will be within a reasonable range of your destination, occasionally, for whatever reason, it’ll appear wildly off target. Most of the time, the deviation will be like above. It’s not too bad, but if you’re trying to find a small AR plane, even minor changes can make that challenge more annoying and close to impossible.
Gathering Our Materials
To build the project, it required some assembly and not all of the pieces were included in the box. For one, we need the 3D model for our aircraft and another one for the airport. Just as a spoiler alert, they aren’t exactly ready for use straight out of the box either. I had to use the 3D graphics tool Blender to get the models setup in the way that worked well for the project. At this point I don’t want to focus my this on Blender, that’s a series for another time.
If you’re interested, there are many resources out there for 3D image editing with Blender. For now, I’m going to provide a link to the finished model files. If you’re not jazzed about using a Spitfire, feel free to pick some other model. You can use any 3D model that you want, even a helicopter or a spaceship. You could also choose a helipad or spaceport. https://www.blender.org
Subclassing ARSCNView
To start off let’s subclass ARSCNView. That way we can manipulate our 3D models within it, without cluttering up our view controller. We can also give it a lot of SCNNode properties which will hook into various parts of the models and allow us to manipulate them and bring them to life.
The most complicated object we’re working with will be our plane model, so let’s separate that into its own setup function.
Start Engine
We’ll also add a little cosmetic method called start engine which will get the propeller on our plane to spin. This looks like it is doing something, but it’s not doing much.
Sometimes it’s necessary to coax each aspect of the model into position individually. This mainly happens I’ve noticed when the designer who initially creates them, model, doesn’t put a lot of thought into a placing the pieces within a logical hierarchy whose top piece can control the rest of the structure.
Break It Down To Smaller Pieces
Now would be a good time to review what we actually want to happen throughout our application.
- Launch
- Tap Map For Destination
- Detect Plane Horizontal Plane
- Place Airport Model Node On Plane
- Place Airplane On Runway
- When User Taps Screen, Airplane Accelerates/Takes Off
- Airplane Orients Itself Towards Coordinates Of Location On Map
- Airplane Flys To Location
- When User Is In Range Of Airplane And Destination — DetectHorizontal Plane
- Place Airport Model Node On Plane
- Airplane Lands On Runway And Breaks
Let’s wrap it up there. In part two, we’ll dive into place detection, have the mechanics of our plane taking off. Most of the sample code has been finished and is up on Github so feel free to jump ahead!
Sources:
