This August, we’ve released our first augmented reality iOS app — AReal. We thought it would be easy to take the existing SDKs, watch some tutorials and build an app in a couple of months. We were wrong.
By the way, AReal is now Open Source.
In this post, we want to talk about AReal as a map-oriented project and to share our experience of switching to AR map after developing a lot of web stuff.
We’ve always thought of map design as a process of understanding space, and augmented reality for us is a new way of playing with surroundings. AReal can augment any place in the world with St Petersburg’s map and landmarks. It could be the most unexpected places: we’ve tried it at Singapore airport and at Uralmash production facility in Yekaterinburg. This experience is both fun and sensible, because it helps expanding the feeling of space and it’s capacities.
Why Do We Need Location-based Augmented Reality?
AR platforms are developing fast, and anytime soon augmented reality could become a digital layer over the real world. AR is capable of changing a lot in our lives: retail, services, navigation. Points of interest will translate from maps directly to the phone screens, and the experince of moving and driving will transform.
To make the AR dreams come true, we have to learn to tie the augmented reality to the objects of the real world, to work with maps as AR objects, and to navigate using AR. Powers of AR maps even at the early stages are impressive — and supported by a serious technological stack.
How to Build an AR App?
Our app is powered by the ARKit platform and the Unity engine.
Turns out, Unity is much more complicated than we expected. The engine has a graphic user interface — Unity Editor, but it only provides basic functionality, for example, showing 3D models. The capacities of Unity are pretty great, but to develop the UI logics, objects interactions, and animations the way we wanted, we had to write C# scripts. Thus, in addition to a new field, we had to figure out a new programming language.
3D maps provide quite spectacular possibilities of displaying buildings’ heights or relief. Our territory was Saint Peteresburg where the terrain is flat, so we’ve only experimented with buildings’ voluminosity.
To make the map, we’ve used Maps SDK for Unity by Mapbox. It helped us plug the geospatial data and the map style into the Unity environment. In the Unity tools we’ve made the buildings volumetric and fine-tuned the style.
Specificity of Map Design in AR
We came up with a bizarre design, but then we had to figure out how the map, being a virtual object, would embed into the surroundings. Turns out an AR map is not like a flat one, and you need a different approach to work with it.
★ Positioning: the map should be placed well in relation to both the surface and the phone screen.
★ Lighting: both code-powered virtual light and the real light, of a lamp or of a sun, affect the map.
★ Colors: the design should be high contrast, because the map can be projected anywhere and should be distinguishable anywhere.
★ Transparency: we’ve made the map half transparent to create a sense of the space being it’s very base layer.
★ Shape: we’ve made a circle map — just because the maps usually are square — and that’s a fun experiment only possible in augmented reality.
Working with an augmented reality map was challenging and exciting. Maps can now be the objects of the real world!
If you’re brave enough, try build your own AR app based on AReal
Source code: https://github.com/urbica/areal
Urbica is an urban data analysis and visualisation company from Moscow, Russia. We experiment with data exploration UI/UX, including AR. We work with a number of Russian and international companies: Mapbox, Maps.me, Moscow Department of Transport, Yandex and others.
