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++;
                }
            });
        });
   }
});

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.

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

-- Lee