قالب وردپرس درنا توس
Home / Tips and Tricks / ARKit 101: How to Detect and Measure Vertical Plains with ARKit 1.5 «Mobile AR News :: Next Reality

ARKit 101: How to Detect and Measure Vertical Plains with ARKit 1.5 «Mobile AR News :: Next Reality



In an earlier tutorial we were able to measure horizontal surfaces such as floor, tables, etc. with ARKit. With ARKit 1.5 we can now measure vertical surfaces like walls!

Learn how to use ARKit to create your augmented reality app for iPads and iPhones. In particular, we will talk about how we can see vertical planes and their dimensions.

What will you learn?

We will learn to recognize vertical planes and to precisely determine their sizes with ARKit 1.5.

Minimum Requirements

Step 1: Download the required assets

To help you understand this tutorial I've created a folder with the required 2D assets and Swift files that are needed for the project. These files make sure that they are not lost in this manual, so download the zipped folder with the assets and unzip it.

Step 2: Set Up the AR Project in Xcode

If not sure how to do it, follow Step 2 in our post about controlling a 3D layer using hitTest to get your AR project in Xcode set up. Give your project a different name. B. NextReality_Tutorial7 . Be sure to do a quick test before continuing with the following tutorial.

Step 3: Import assets into your project

In the Project Navigator, click the Assets.xcassets folder. We will add our 2D images here. Then right-click on the left area of ​​the area on the right side of the project navigator. Select "Import" and add the file "overlay_grid.png" from the unzipped folder Assets.

Click again in the project navigator with the right mouse button in the yellow folder for "NextReality_Tutorial7" (or whatever you named your project). Select the option "Add files to & # 39; NextReality_Tutorial7 & nbsp;".

Navigate to the unzipped "Assets" folder and select the "Grid.swift" file. Be sure to enable "Copy items on demand" and leave everything else as it is. Then click on "Add".

"Grid.swift" should then be added to your project, and your project navigator should look something like this:

This file helps rendering a grid for each vertical layer that is detected by ARKit.

Step 4: Place a Grid to Display Detected Vertical Planes

To quickly discuss ARKit's ability to detect levels, take a look at our tutorial on detecting horizontal levels . Although this covers the coverage of the horizontal plane, the vertical plane detection strategies and logic are quite similar.

Open the ViewController.swift class by double-clicking it. If you want to follow the final code from step 4, just open this link to see it on GitHub.

In the ViewController.swift file, change the scene build line to viewDidLoad () ] method. Change it from:

  let scene = SCNScene (named: "art.scnassets / ship.scn")! 

Next, make sure we do not create a scene with the default ship model:

  let scene = SCNScene () 

Next, find this line at the top of the file:

  @IBOutlet var sceneView : ARSCNView! 

Include this line below this line to create an array of "grids" for all Vertical levels detected:

  var grids = [Grid] () 

Copy the following two methods below and insert it at the end of the file before the last curly bracket (} ) file. Using these methods, we can add our grid to the vertical planes recognized by ARKit as a visual indicator.

  func renderer (_Renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {19659030]
Guard leave plane anchor = anchor like? ARPlaneAnchor, planeAnchor.alignment == .vertical else {return}
let grid = grid (anchor: planeAnchor)
self.grids.append (grid)
node.addChildNode (grid)
}

func renderer (_ Renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {
Guard leave plane anchor = anchor like? ARPlaneAnchor, planeAnchor.alignment == .vertical else {return}
let grid = self.grids.filter {grid in
return grid.anchor.identifier == planeAnchor.identifier
}.first

guard let foundGrid = grid else {
return
}

foundGrid.update (anchor: level anchor)
} 

Let's quickly discuss what happens with these two methods: [196909040] The didAdd () is called when a new node is added to the ARSCNView . Here we make sure that the recognized ARPlaneAnchor corresponds to a vertical plane and add it as our Grid object, which adds the raster image we imported to each detected plane , [196599034]] didUpdate () is called whenever newer ARPlaneAnchor nodes are detected (again, we make sure that they correspond to vertical planes) or when the plane is expanded. In the latter case, we also want to bring our network up to date and expand. We do this by calling update () to this special grid .

Now let's activate feature points. Under this line in viewDidLoad () :

  sceneView.showsStatistics = true 

Added:

  sceneView.debugOptions = ARSCNDebugOptions.showFeaturePoints 

Next, we turn on vertical-level detection , Under this line in viewWillAppear () :

  let configuration = ARWorldTrackingConfiguration () 

Add:

  configuration.planeDetection = .vertical 

This part is very important! This ensures that ARKit can detect vertical planes in the real world. The feature points allow us to see all the 3D points that ARKit can recognize.

Now launch your app on your smartphone and walk around. Focus on a well-lit wall or flat vertical surface. You should be able to see blue grids whenever a vertical plane is detected, similar to the one below.

Checkpoint : Your The entire project at the end of this step should look like the last step 4 code on my GitHub.

Step 5: Measure the detected vertical planes

Now we use the "extent" property of the detected planes to capture its dimensions and print them using SceneKit. All code changes listed below are made in the Grid.swift file. Be sure to open it and follow the steps below. If you go through these steps, you can follow the finished version .

Open the class "Grid.swift" and below this line:

  var planGeometry: SCNPlane! 

Add a new geometry for the text that displays the dimensions of the detected layers:

  var textGeometry: SCNText! 

Next, locate the importing line ARKit :

  import ARKit 

Under this line Add this code above the line that creates the Grid class:

  Extension ARPlaneAnchor {19659030]
// Inch
var width: floating point {return self.exxtent.x * 39.3701}
var length: floating point {return self.exxtent.z * 39.3701}
} 

Here we extend the functionality of ARPlaneAnchor . By default, the size is returned in meters. Therefore, we will create two properties: "width" and "length", which converts the meters to inches. We also use the "extent" property of the ARPlaneAnchor and get its "x" and "z" values.

Next, find the method setup () . Delete this method and replace it with an updated version of the method as follows:

  private func setup () {
planeGeometry = SCNPlane (width: CGFloat (anchor.width), height: CGFloat (anchor.length))

Leave Material = SCNMaterial ()
material.diffuse.contents = UIImage (named: "overlay_grid.png")

planeGeometry.materials = [material]
leave planeNode = SCNNode (geometry: self.planeGeometry)
planeNode.physicsBody = SCNPhysicsBody (Type: .static, Form: SCNPhysicsShape (Geometry: planeGeometry, Options: nil))
planeNode.physicsBody? .categoryBitMask = 2

planeNode.position = SCNVector3Make (anchor.center.x, 0, anchor.center.z);
planeNode.transform = SCNMatrix4MakeRotation (Float (-Double.pi / 2.0), 1.0, 0.0, 0.0);

// 1.
let textNodeMaterial = SCNMaterial ()
textNodeMaterial.diffuse.contents = UIColor.black

// Set up text geometry
textGeometry = SCNText (String: String (format: "% .1f", anchor.width) + "x" + String (format: "% .1f", anchor.length), extrusionDepth: 1)
textGeometry.font = UIFont.systemFont (ofSize: 10)
textGeometry.materials = [textNodeMaterial]

// integrate text nodes with text geometry
// 2.
let textNode = SCNNode (geometry: textGeometry)
textNode.name = "TextNode"
textNode.position = SCNVector3Make (anchor.center.x, 0, anchor.center.z);
textNode.transform = SCNMatrix4MakeRotation (Float (-Double.pi / 2.0), 1.0, 0.0, 0.0);
textNode.scale = SCNVector3Make (0.005, 0.005, 0.005)

addChildNode (text node)
addChildNode (layer node)
} 

The extra code added to the setup () method enables 3D text that displays the dimensions of the layer at the top of the grid. Now let's run what we have set up here.

  1. With the class SCNText we have created a geometry for the text. We then set the text as the width and height of the aircraft, calculated using our custom extension.
  1. We have updated a new SCNNode using the SCNText geometry created from the above step to match its position and scope. We've also made sure we rotate the text node in the same direction that the grid is updated by changing its transform property.

This allows us to show the size of the layer at the first construction. We should also update the size of the aircraft as it gets bigger and bigger. Let's do that in the next code changes.

Find the update (Anchor: ARPlaneAnchor) method. Add the following code to the end of the method before its last curly brace (} ): If textGeometry = self.childNode (withName: "textNode", recursive: true)? Geometry as? SCNText {
// Update text to new size
textGeometry.string = String (format: "% .1f", anchor.width) + "x" + String (format: "% .1f", anchor.length)
}

This ensures that the dimensions of the layer are dynamically changed as the layer expands.

Save the app now and run it. Walk around and find a well-lit, textured vertical flat surface like a wall. Note: You may need to get up very close to a wall because most white walls do not have the texture that ARKit needs to detect vertical planes. I would suggest finding a window or other colored vertical surface for ARKit to recognize the layers. You should see something like this:

Checkpoint : Your entire project at the end of this step should look like the last step 5 code on my GitHub.

What we have achieved

Well done! Assuming you have followed the instructions correctly, you can now successfully detect walls or other vertical flat surfaces with ARKit 1.5! Before discovering the vertical plane, it was very difficult – almost impossible – to spot vertical planes accurately. It's amazing to see how ARKit enabled us to do this without any additional hardware.

If you need the full code for this project, you can find it in my GitHub Repository . I hope you liked this tutorial on ARKit. If you have comments or feedback, you are welcome to leave it in the comment section. Happy coding!

Do not Miss : How to make a group of balloons around you and let them float randomly into the sky

Cover image & screenshots of Ambuj Punn / Next Reality [19659081]

Source link