Unity – AR tool creation by using Mapbox SDK

Development and testing of this tutorial is supported by VR@Illinois Seed Grant

The following activities are required to start the app building process:

3D Model Creationhttps://www.youtube.com/embed/qgD_HEQnzeA

The first stage of my AR app development was to draw 3D models for the app. There is numerous software that can be used for that purpose. The programs that I used are:

  • Autodesk Revit (modeling)
  • SketchUp Pro (assigning materials to the models)

This 3D model is the design of the Newmark Laboratory (UIUC campus North Quad) extension project that I created for my CEE 598 course.

Unity – Create the projecthttps://www.youtube.com/embed/thcDSiPH8Dc

The first action in Unity is to create a new 3D Project.

Unity – IOShttps://www.youtube.com/embed/vbjsdixYcF4

Since we are developing an app for IOS, we need to change the platform in Build Settings.

Unity-Packageshttps://www.youtube.com/embed/DJ3_S445tPU

The next step is to open the Package Manager and install the following packages:

  • AR Foundation
  • ARKit XR Plugin
  • The next step is to install the Mapbox AR SDK package. The installation file can be downloaded from the following web page: https://www.mapbox.com/augmented-reality/
  • The file can be imported by right-clicking on project console and selecting “Import Package/ Custom Package”

Mapbox Accounthttps://www.youtube.com/embed/hBiRCQQTdqI

  • In order to run this SDK Access token from Mapbox should be applied. (https://account.mapbox.com/auth/signup/)
  • According to Mapbox tutorials, it is better to create separate SDK for the AR app.
  • After the activation of SDK, we need to select the WorldScaleAR prefab as the template for our project.

Unity-Layershttps://www.youtube.com/embed/iffiZ3oAuzw

As the start action we need to create the following layers:

  • ARGameObject
  • Map
  • Path
  • Both

Google Maps – Coordinate extraction/ Unity Map Centerhttps://www.youtube.com/embed/Vn_7lfOG6FA

  • Next, the coordinates of the Map center and AR main object (player) need to be defined. I used my backyards coordinates, You can use any location in the world.
  • The coordinates of AR main object (player) can be edited in WorldScaleAR/ArAllignedMap/General/Latitude-longitude

Unity Map Centerhttps://www.youtube.com/embed/0LS3VmoWed8

  • The coordinates of Map Center can be edited in WorldScaleAR/LocationProvider/Editor/Latitude-longitude

Unity- Import 3D Modelhttps://www.youtube.com/embed/bV5M6AOdAZ8

  • 3D Model import can be done by right-clicking on project console and selecting “Import New Asset”
  • Unity can import 3D models in .fbx and .3ds formats.

Unity – 3D Model Locationhttps://www.youtube.com/embed/JhvVFfRsi4w

  • Firstly, we need to define the desired coordinates of our 3D object, it can be done in Google Maps.
  • Next, in Map Layers/ Points of Interest, we need to add a new layer and name it.
  • In prefabs select our uploaded 3D object and change Find by to Address of Lat-long.
  • Click Add Location and insert our coordinates into the appeared line.

Unity – UI Buttonhttps://www.youtube.com/embed/SaVPd4uXHcs

The next stage is to create a UI button that will open the questionnaire link.

  • In DebugCanvas/Console add new Canvas by right-clicking on the Console and selecting UI/Canvas.
  • Add a new button in the Canvas by right-clicking on the Canvas and selecting UI/Button – TextMeshPro.

Next, we need to change the text of the button to “Leave Feedback”. It can be done by clicking Canvas/Button/Text and editing the text in the appeared menu.https://www.youtube.com/embed/_1BjxhixeGw

Now we need to adjust the size of the Button and text in it. We can do it by manipulating font size and width/ height values.https://www.youtube.com/embed/IgrqQJdSCv8

Next, we need to replace the button from the center of the screen. I decided to put a button on the up-left corner of the screen. To accomplish that goal following actions are required:

  • Click on Canvas and on the appeared right menu click Add Component.
  • In search type Vertical Layout Group and choose the search result component.
  • To have some space from screen edges I change left and top Padding values to 10.

By changing position values on canvas and vertical layout, we can place our button to any point on the screen.https://www.youtube.com/embed/ZEAM8loL3Rg

The last step in the UI button creation stage is to add and assign a URL to the button. It can be done through the following steps:

  • Click on Button and on the appeared right menu click Add Component.
  • In search type URL and select Open URL on Button Click.
  • Insert prepared URL into the appeared URL line.

In the video before doing the described above steps I adjusted the color of the button at the moment of click, that step is not required and serves only aesthetical purposes.

Unity – Build the Projecthttps://www.youtube.com/embed/RR3DpemVDtk

The final stage of the AR app creation is to build the app. However, before going to that part we need to make some changes in our project’s settings:

  • Click on Build Settings/Player Settings.
  • In Other Settings enable Requires ARKit Support and change Target minimum IOS version to 11.0.
  • Type descriptions in Camera Usage Description and Location Usage Description lines.
  • Change Architecture to ARM64

The last step in AR app creation is to build the app, by clicking Build Settings/Build and typing the name of the project. The folder with the project’s files will appear on your desktop. The XCode project file from that folder will be used in the second part of this instruction.

App Creation with XCode

Two actions required before starting the app-building:

  • Download the XCode app.
  • Create a profile (team) in XCode.

Open “Unity-iPhone.xcodeproj” file in the project folderhttps://www.youtube.com/embed/Pw53PyVQ5Cw

  • Connect your iPhone to the computer. (I simply use USB connection)
  • Select the phone on Unity-Phone Menu
  • In signing & capabilities Menu sign-in to your previously created Xcode account
  • Launch the app (play button)
  • During the app launch, several errors will occur. I could not find the reason for the errors, but I could solve them.
  • Some editing in the MapboxMetricsClient.m file should be changed as in the video.

From “MapboxMobileEvents/MapboxMobileEvents.h”

To “MapboxMobileEvents/include/MapboxMobileEvents/MapboxMobileEvents.h”https://www.youtube.com/embed/FP7sfXMmhWQ

  • After previous corrections, another error will occur in MapboxMobileEvents.h file, that can be solved as shown in the video.From”MapboxMobileEvents/MMEConstrants.h””MapboxMobileEvents/MMEEvent.h””MapboxMobileEvents/MMETypes.h””MapboxMobileEvents/MMEEventsManager.h”To“MMEConstrants.h”.“MMEEvent.h”“MMETypes.h”“MMEEventsManager.h”
  • The last action is to enter the computer’s password.
  • The app will occur on the phone.

GPS on the App

The last note of this instruction is about the app’s orientation that primarily relies on GPS connection on your device. In order to have a better GPS orientation, it is recommended to walk in a straight line and capture the earth’s surface during the app’s initialization. It will help the app to locate 3D objects in the correct position and detect the earth’s surface.

  • This instruction is developed by Yerassyl Koshan (email – ykoshan2@gmail.com, LinkedIn profile – linkedin.com/in/yerassyl-koshan).
  • Development of this instruction and testing was supported by VR@Illinois Seed Grant