{"id":1694,"date":"2020-03-29T23:37:00","date_gmt":"2020-03-29T21:37:00","guid":{"rendered":"http:\/\/www.albertopasca.it\/whiletrue\/?p=1694"},"modified":"2023-06-26T15:39:32","modified_gmt":"2023-06-26T13:39:32","slug":"arkit-measure-distances-with-augmented-reality","status":"publish","type":"post","link":"http:\/\/www.albertopasca.it\/whiletrue\/arkit-measure-distances-with-augmented-reality\/","title":{"rendered":"ARKit – Measure distances with augmented reality"},"content":{"rendered":"\n

Today a tutorial about augmented reality<\/em>, in particular the use of the new Apple framework<\/em>, ARKit<\/strong>, to measure distances between two points<\/em> in a 3D virtual space<\/em>.<\/p>\n\n\n

\n
\"\"
Final result: \u203926 cm distance between the two green points.<\/figcaption><\/figure>\n<\/div>\n\n\n\n\n\n\n
\n\n\n\n

How to?<\/h2>\n\n\n\n

First of all, as usual, you need to create a new XCode project<\/em>. Select the “Augmented Reality App<\/strong>” type:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Open your ViewController.swift <\/strong> and remove the useless stuff, like:<\/p>\n\n\n\n

let scene = SCNScene(named: \"art.scnassets\/ship.scn\")!\nsceneView.scene = scene <\/code><\/pre>\n\n\n\n
and all the ARSCNViewDelegate<\/strong> methods.<\/p>\n\n\n\n
\n\n\n\n
Well, your code is now clear!<\/p>\n\n\n\n
You need to add now two variables, an array of SCNNode<\/strong> (the dots) and another SCNNode<\/strong> that is the text displayed on the screen.<\/p>\n\n\n\n
Second thing is to add the touch handler, in this case, touchedBegan<\/strong> in order to add points:<\/p>\n\n\n\n
var dotNodes = [SCNNode]()\nvar textNode = SCNNode()\n\noverride func touchesBegan<\/strong>(_ touches: Set<UITouch>, with event: UIEvent?) { } <\/code><\/pre>\n\n\n\n
In the touchBegan<\/strong>, you need to recognize the number of touches, and add the green dots:<\/p>\n\n\n\n
override func touchesBegan<\/strong>(_ touches: Set, with event: UIEvent?) {\n if dotNodes.count >= 2 { resetDots<\/strong>() }\n\n if let touchLocation = touches.first?.location(in: sceneView) {\n      let hitTestResults = sceneView.hitTest(touchLocation, types: .featurePoint)\n      if let hitResult = hitTestResults.first {\n          addDot<\/strong>(at: hitResult)\n      }\n  }\n } <\/code><\/pre>\n\n\n\n
Your addDot<\/strong> function, append on the main AR scene a child node, the dot<\/strong>, based on the user touch location.<\/p>\n\n\n\n
 func addDot<\/strong>( at hitResult: ARHitTestResult ) {\n     \/\/ the size of the green circle\n     let dotGeometry = SCNSphere(radius: 0.005)\n     \n     let material = SCNMaterial()\n     material.diffuse.contents = UIColor.systemGreen\n     \n     dotGeometry.materials = [material]\n\n     \/\/ the \"dot\" element\n     let dotNode = SCNNode<\/strong>(geometry: dotGeometry)\n     dotNode.position = SCNVector3(\n         hitResult.worldTransform.columns.3.x,\n         hitResult.worldTransform.columns.3.y,\n         hitResult.worldTransform.columns.3.z)\n     \n     sceneView.scene.rootNode.addChildNode<\/strong>(dotNode)\n     \n     dotNodes.append(dotNode)\n\n     \/\/ we have 2 points on scree, try to calculate distance\n     if dotNodes.count >= 2 {\n         calculateDistance<\/strong>()\n     }\n } <\/code><\/pre>\n\n\n\n
and last one, calculateDistance<\/strong> calculate distance between points:<\/p>\n\n\n\n
 func calculateDistance<\/strong>() {\n     let start = dotNodes.first!\n     let end = dotNodes.last!\n     \n     var distance = sqrt<\/strong>(\n         pow(end.position.x - start.position.x, 2) +\n         pow(end.position.y - start.position.y, 2) +\n         pow(end.position.z - start.position.z, 2)\n     )\n     \n     \/\/ convert to cm\n     distance *= 100\n \n     let distanceFormatted = String(format: \"%.2f cm\", abs(distance))\n     updateText<\/strong>(text: distanceFormatted, atPosition: end.position)\n } <\/code><\/pre>\n\n\n\n
Cool! We have a distance now.<\/p>\n\n\n\n
\n\n\n\n
The last cool thing is to write text on screen. We use updateText<\/strong> to draw on screen.<\/p>\n\n\n\n
The text on screen works in the same way as the dot. Is a SCNode<\/em> added on the root scene.<\/p>\n\n\n\n
func updateText<\/strong>( text: String, atPosition: SCNVector3 ) {\n     textNode.removeFromParentNode()\n \n     let textGeometry = SCNText(string: text, extrusionDepth: 1.0)\n     textGeometry.firstMaterial?.diffuse.contents = UIColor.systemRed\n     \n     textNode = SCNNode<\/strong>(geometry: textGeometry)\n     textNode.position = SCNVector3(\n         atPosition.x,\n         atPosition.y + 0.01,\n         atPosition.z\n     )\n \n     textNode.scale = SCNVector3(0.01, 0.01, 0.01)\n     sceneView.scene.rootNode.addChildNode<\/strong>(textNode)\n } <\/code><\/pre>\n\n\n\n
That’s all. It is very easy.<\/p>\n\n\n\n
\n\n\n\n
Clear all points<\/strong>:<\/p>\n\n\n\n
func resetDots<\/strong>() {\n     for dot in dotNodes {\n         dot.removeFromParentNode()\n     }\n     dotNodes = [SCNNode]()\n} <\/code><\/pre>\n\n\n\n
As final result you should see something like this:<\/p>\n\n\n\n