DEV Community

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

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

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more