Ever since my first foray into Arkit using Xamarin at HackManchester, i've been wanting to return to it and do something a little more polished.

During the UrlPeek Hackathon Project I spidered a url, captured screenshots of the pages, saved them to cloud storage and presented them in an augmented reality app on iPhone.

Not a small achievement for a 24 hour hackathon project having no knowledge of ArKit and very little of Xamarin.

Nonetheless, as impressive as the hackathon project was, it didn't achieve the effect I was looking for. That is, a 360 degree surrounding wall of images. To be made interactive at a later date.

If you're anything like me, you sometimes get an tech itch you just have to scratch, and returning to achieve the 360 degree wall of images is an itch I can put off for no longer.

So in this series of blog posts, I aim to create a Xamarin app for iOS that surrounds the user with a 360 degree wall of images, document my approach and posting the code on GitHub as I go.

I plan to do this in a variety of stages.

Step 1 - Show a single image in front of the user

As simple as this sounds, I never figured out how to consistently show an image to start life in front of the user, they showed in a random place with regards to the starting orientation of my phones camera. So I had to rotate myself to find where the images were placed in AR. I think, it may have always been showing at the North of my position? Something I didn't have time to correct during the Hackathon, but now I have a bit more time to understand the initial load position of objects in ArKit.

Step 2 - Show an image, in front, behind and to the sides of the user (4 images)

Other than just showing an image in front of myself, I aim to show an image behind and to the left/right of myself as well.

Step 3 - Show an image on each side of a regular polygon with n sides

ok, so this is where it gets tricky, as I want to show a number of images 360 degrees around myself facing inwards, I think I may be best doing that my mapping them onto the internal sides of a regular polygon.

So starting with 5 images, i'd be effectively inside a pentagon, with an image projected onto each side and angled appropriately.

I believe that if I get the maths right, then it should be as simple as being inside a regular polygon with 5 sides as it is being inside a polygon with 20 sides. Sure the images may need to be smaller or the sides of the regular polygon further away, but i'll cross that bridge when I get to it.

Step 4 - Experiment with making the sources of image dynamic

So far i'll probably be loading in the same set of images, from a source i've yet to determine. In this step I hope to be able to change the source of the images, so that different images surround me.. perhaps searching for a different keyword search in Flikr for example.. if that is still possible?

Step 5 - Experiment with making the images interactive

If I get this far, whilst, i'll be surrounded by an impressive 360 degree wall of images that I can walk around, they'll still be pretty static. In this step I aim to make them a little more interactive. Possibly make them come towards me and grow larger when they are in the middle of the camera, or relevant text information appear somewhere or both.

Step 6 - Multiple rows surrounding the user

I'm not sure if i'll get this far, but as well as a single row of images surrounding the user, I aim to place one or more rows above and below that initial row angled towards the user.

Summary

After developing the Xamarin ArKit in this staged approach I think i'll end up with something pretty cool and a good example of how people can build something similar.