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.
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)