Articles, Code and Video Tutorials for ARKit, Sprite Kit & SceneKit

How to Detect Planes in ARKit and SpriteKit

Or possibly how NOT to detect planes

So let’s talk plane detection with ARKit and SpriteKit . You might be tempted to set the ARWorldTrackingConfiguration to detect planes in the Scene.swift file. If you did, it would look like this

But if you’re using SpriteKit commenting out that configuration.planeDetection line is probably a good idea to start. It doesn’t mean that you can’t ever detect planes, it just means it won’t detect them automatically. In SpriteKit you’ll never be able to lay a sprite flat on a table and look at it like a piece of paper changing it’s perspective in space. To do that you’d need to work with SceneKit which would support adding a 3d plane to the world, lying that on an AR-detected horizontal plane (or upright), and then texturing the plane with your image. Planes can even be textured with SpriteKit scenes, which is how this was put together in the WWDC demo…

 

Granted that’s a vertical plane laying on the table, but hopefully you get the point.


Let’s Talk Billboarding Real Quick…

SpriteKit instead “billboards” the sprites you see in the augmented reality space, which means the image is always facing directly at the viewer.  So if your art was a perfect square with 4 equal sides, you’ll always see it as a perfect 4 sided square, with no perspective shift.

Hopefully that didn’t blow your mind too hard and make you rethink using SpriteKit and ARKit altogether. Embrace billboarding, because at times, that’s exactly what you want. Certainly so with 2D art and animations. For my first ARKit app,  it would have looked weirder to see 2D cartoons changing perspective. Here’s an example…

Notice how the birds aren’t awkwardly tilting perspective as if they were stuck to a piece of paper. You don’t even really notice it, but they are always facing directly at you.


Checking for Horizontal Planes As Needed

So in my Tooniverse app (seen above) every time the user tosses a ball, at a certain point, the game checks to see if the ball should appear to just let gravity take over and fall down OR if it should appear to ricochet off a flat surface (both cases assume the ball didn’t hit a bird). Here’s the code for that…

You’ll notice once I have the hitTestArray above, I don’t do much with it. I just check to see if it’s greater than 0, meaning it hit at least one plane. But we could iterate through the results in the hitTestArray, like so…

And obviously you can just start typing “result.” and see for yourself all the possible properties of the result. For example…

…That would be the anchor representing the detected surface, if any.