DEV Community

Cover image for Augmented Reality 3D Photo Surround using Xamarin, ARKit C# and .NET

Augmented Reality 3D Photo Surround using Xamarin, ARKit C# and .NET

Last night I created an augmented reality 3D photo gallery sphere concept in Xamarin, ArKit and .NET that has been on my mind for a while.

It currently calls the Unsplash API with the search term "cats" but there is no reason it can't show images from any search term.

First I create 7 rows of 2d planes and give them a SCNLookAtConstraint so that it they all look at a central invisible node that I create at the WorldOrigin (center).

var lookConstraint = SCNLookAtConstraint.Create(centerNode);

lookConstraint.GimbalLockEnabled = true;

imagePlaneNode.Constraints = new SCNConstraint[] { lookConstraint };

I then call the Unsplash API and after retrieving search results, iterate through the 2d planes and give them a material which are the returned images. I make the call to the Unsplash API in a separate thread from the UI thread, but after retrieving the API result have to then update nodes on the UI thread.*

  • I don't know if this is the right way of doing this sort of thing, but it works for me.

Task.Run(async () =>
{
var imageUrls = await GetUrlsFromUnSplashApi(searchTerm, sides * rows);

int x = 0;

foreach(var imageUrl in imageUrls)
{
var taskA = LoadImage(imageUrl);

    await taskA.ContinueWith(cw =>
    {
        var image = cw.Result;
        uiImages.Add(image);

        BeginInvokeOnMainThread(() =>
        {
            if (x < (sides*rows))
            {
                imagePlaneNodes[x].UpdateImage(image);
                x++;
            }
        });
    });
Enter fullscreen mode Exit fullscreen mode

}
});

Future improvements I may consider is the ability to select an image to make it change position and scale. I may also experiment with calling other APIs such as the Facebook or a news API.

I will share the code on XamarinArkit.com with my other Xamarin Arkit learnings and proof of concepts and may also record a short explanatory video walking through and explaining the code.

Want to keep up to date with what I am working on? Follow me on Twitter @leeenglestone .

What search terms would you use to be surround by images of?

-- Lee

Top comments (0)