Xamarin ArKit Image Recognition and 3D Model Placement Part 3


Posted on January 21, 2020

In part 1 of this series of posts I outlined my plan to see what I could do with Image Recognition and augmented reality in Xamarin using Arkit

In part 2 I showed how to recognise and highlight a pre-defined image in augmented reality

In this part 3 I go a bit further and place a more complex 3d model at the location of the recognised image (image anchor)

This is the end result..

And it wasn't achieved with a whole lot more code than in part 2, just building upon it slightly..

No alt text provided for this image

You can see from the code above that instead of placing coloured plane at the location of the recognised image, we are..

  1. Referencing a 3d model I have added to the project (more on that in a second)
  2. Scaling it to suit (in this case I am making it smaller)
  3. Positioning it so the bottom of the model sits atop the detected image. By default the centre of the model would be at the location of the detected image
  4. Adding the new model Node to the existing node.

Getting and adding the 3d model

I downloaded the tree.dae model from the website Free3d.com after determining that .dae is the format I need (from googling).

No alt text provided for this image

Interestingly, I had to manually create the folder named art.scnassets before adding the tree.dae file to it. I'm not sure if that folder name is special or not but a lot of examples I have seen use the folder called that.

GOTCHA: Determining the root child node name

You'll notice that there is a line that finds a child node name called "Cylinder". This stumped me for a while as to what value to put here.. in order to get the name of the root child node, I had to open the dae file in Xcode which actually has a nice interface with dealing with dae files. Clicking on the model in that Xcode view told me that the node name was "Cylinder" so that is what I used in the Xamarin code and it started working. 

No alt text provided for this image

Note: You'll also notice from the video that I changed the detection image to be a QR code. Something a bit more appropriate than a book cover,

And that's all you need to do to achieve the final result that can be seen in the video at the top of the post.

So that concludes this short series of posts on Image Recognition in Xamarin using Arkit. Pretty neat if you ask me. 

Just a reminder that I intend to put bitsize lessons of how to do things on my website XamarinArkit.com as I think more .NET developers would love to know how to get started with Augmented Reality in Xamarin as I did.

-- Lee