3.5 Displaying Distance
To finish the example application, we are going to draw a line between the two selected points and render the real-world distance between them.
1.Introduction2 lessons, 06:04
2.Get Started With ARKit5 lessons, 42:51
3.Example Project: Measurement App5 lessons, 20:40
4.Conclusion1 lesson, 01:14
3.5 Displaying Distance
Hi, and welcome back to Get Started with Augmented Reality for iOS. In this lesson, we are going to finish the project by adding the final part to display of the distance in the world. How can we do that easily? Well, I'm using the same trick with the spheres here. But this time, I'm using a cylinder. With the same radius and the ends perfectly aligned with the spheres, it will look like line with rounded ends. I'm going to create a new function for this, at distance. That takes the measurement and the note. You will see why in a minute. We have to change to add mushroom and point function to return the note, and also add at discardable result. So there isn't the warning because we don't use the result for the starting point. First, I'm going to calculate the halfway point between start and end points. I can do that with simple vector mathematics, adding half of the distance vector to the start vector. Well, actually, it would be a good idea to use the measurement struct, and just start a vector we already calculated there. Now that we have a halfwayPoint, we can add a cylinder. There is the SCNCylinder geometry that takes the radius, which is 0.005 in our case, and the height that is the distance of our measurement. I'm going to create a node that holds the geometry and set its position to the halfway point. The tricky part now is to align the cylinder with the spheres. And there is actually a rather easy way to do so. After splitting my head over rotation matrices, I found this rather handy function on the node called lookat that allows you to point the node to a position. You will need the worldUp vector which we can get from the rootNode, as well as the local front. And this is the beauty of this function. We just say that the local front vector is the up vector. This rotates the cylinder exactly as we need it. The final step is to add the node to the hierarchy. Let's try it out. When I draw some points in the world, it connects with the cylinder seamlessly and it looks like a line, great. The final step for this application is to add the length next to the line. There is a textnote which I'm going to use. It takes a string and for the measurement I'm using formatting, so we always get two decimal digits and the parameter meter symbol. The extrusion depth will be zero, so it's completely flat. Since the default text size is 36 units, which corresponds to 36 meters in our case, we have to scale the geometry way down. I find that 0.002 in all directions works very well. Our final problem is that the text should always face the camera, regardless how it was positioned in the world. The first step for this is to move the pivot point of the text node to its center. Normally, it is quite offset, depending on the font you use. I can do that by getting the minimum and maximum values from the boundingBox, and setting the pivot property for the new transformation matrix that translates to the sender. What we're going to do for the alignment is to use a constraint. More precisely, a bill board constraint. Billboarding is a term in computer graphics that describes an object that is always front-facing the camera. It was used a lot for rending foliage on trees. To do this properly, we need a parent note for the text. It doesn't need a geometry, but we are going to set the position here. To have to text not intersect the line at all time, I'm offsetting it by 5 centimeters. Now onto the constraint. The SCMBillboardConstraint doesn't take any arguments, but does have a free access property. This allows us to specify around which axis it can rotate and around which it can't. If all xs are free and we rotate the camera sidewise, the text would rotate as well. This is something I don't want because the text should stay parallel to the ground. Therefore, I'm only making the x and y axis free. We can add the constraint to the constraint's property on the note. As you can see there can be multiple constraints. Then we have to add the text note to the parent and the parent to a root note. And that's it for text. Let's build the run again and see the final result. When I measuring the distance now, I can see the value about the line. A little exercise for you if you want. Right now if you have a measurement that is very far away from you, it is very tiny on the screen and barely legible. Try to create a constraint that scales the nodes up and down, depending on the distance from the camera. Good luck with that, and I'll see you in the final lesson.