So, as promised, here is the video to help you get started with GPS-based AR using Layar and PHP backend APIs.
***IMPORTANT: For the people in class, change your passwords once you login. I am making this blog post and the YouTube video public, so there is a chance that someone may access your accounts.***
Following are the steps involved in setting up the system:
- Setup a new GPS based campaign on the Layar website.
- Setup the augment on the PHP back-end setup for you.
- Test the augment on the Layar app.
Here are the details on individual steps:
Setting up a GPS-based augmented reality campaign on the Layar website
In this section, we are going to setup our campaign on the Layar website, and connect it to our API endpoints.
- Go to the Layar Developer portal
- Click on “Become a Developer”
- Register if you haven’t already done so. Login if you have an account
- On the My Layers page, click on “New Layer”
- Give your new layer a name and make sure the “Geo Layer” radio button is checked
- Once your layer is created, go to “API” section and replace the API URL to “http://augmentedrealitynyc.org/ar_class/layar_endpointX.php”, where X is the number assigned to you in class
- Click “Save API”. This sets up the Layar end of the setup
Creating AR content
In this section, we are going to create content which we will use as augments at GPS locations. These can be images/3d models. If you are using an image, you can skip this step to the next section. If you are using 3d models, you need to convert your 3d model into *.l3d format which Layar understands
NOTE: Currently, Layar only supports *.obj models. Make sure you have your models in this format before you convert them to *.l3d
- To convert 3d models, we will use the software called Layar3DModelConverter
- To use this software, you should have JAVA installed. We did this in the last tutorial. If you haven’t done that already, please install JDK 1.6+.
- Unzip the file and open Layar3DModelConverter.jar
- Once you have the converter open, select File->Import Wavefront
- Navigate to your obj model and open it. If your materials and textures are in the same folder, it should automatically detect them
- Click on the materials tab and change the “Specular” color to White
- The texture should show up in the bottom half of the window
- In the Preview tab, you should be able to see what the 3d model looks like
- When you are happy with your configurations, select the placement tab and carefully navigate to your desired location on the map. You can also search for a location using the search bar on the top
- Clicking on the map once would bring up a red crosshair which is your current location
- When you are done figuring out the location, click “Save Placement details” and click “Use Marker position” button on the right. This would copy the exact geolocations from the map onto the model
- After placing the GPS coordinates, go to file->Save As. Give a desired name to the model and click Save. This would create the l3d model which you can upload to a server and use as an augment. Don’t close the window yet, as we will need some information later
- Upload the *.l3d file that you just created to a non-secure server which you have access to. Refrain from using 3rd party services like Drive, Dropbox, Box, etc. as they usually don’t work
- This sets up your 3d model to work with Layar!
Setting up the back-end API
The last step of the process is to setup the API back-end to connect to Layar and the servers where our content is hosted. To do this, go to the PHPMyAdmin website setup for the class and login with the following credentials
where X is the number assigned to you in class.
Details about each table in the system
The navigation menu on the left contains database tables. For the sake of simplicity, lets say that these tables contain rows which are details to individual elements of the system.
Let me start by explain what each of these tables mean:
- Animation: This table contains details about the animations on the objects you want as augments.
- Icon: This table contains the icon details which shows up when you load your layer on the Layar app.
- Layer: This table links the API with the layer setup on the Layar website
- LayerAction: You will almost never have to use the LayerAction table.
- Object: This table contains data about the object that you are augmenting.
- POI: This is the table which links all the data on other tables with one another so that the system can understand what you want to do.
- POIAction: This table contains details about what actions should happen when your layer is loaded. This is an optional feature and can be left alone unless necessary for the project.
- Finally, the transform table: This table contains physical properties of the object as a transform – you can change the position, size and rotation of your augment when it initially loads on the app. Please note that this is different from the animation table.
Setting up the tables
- Layer table: The first thing to do is to let the system know about the layer you created on the Layar app.
- Go to the Overview section of your Layar account and copy the layer name.
- Go to PHPmyadmin and open the Layer table.
- Click insert on the top navigation menu to insert a new row.
- Put in the layer name in the layer column. type in an optional message which shows up when your layer is loaded and hit Go.
- Take note of the layer id which is generated.
- Object table: The second step is to enter the details of the augmentation object in the database. To do this, open the Object table.
- Copy your desired ContentType from previous entries in the table
- Insert a new row
- Enter the type of augment in ContentType field
- Set the url where it is hosted
- Put in a size for now and then play around until you get the size you want. This is just trial and error.
- Click Go
- Keep a note of the object id which is created for your row.
- Transform table: The third step is to enter the properties of the object we just created. To do this, insert a new row in the Transform table. For me, I am just going to go with the default values for now and see if they work. This, again, is supposed to be figured out with trial and error. Just make sure the scale of the transform is not zero.
- POI Table: Now we have to link all the tables that we just created to each other so that they work in sync with each other. To do this, insert a new row in the POI table.
- Type in the desired footnote and title for your POI.
- For latitude and longitude, if you used the Layar 3d converter, copy the coordinates which were generated there. If you are using image overlay, use google maps to generate the precise coordinates
- ImageURL is for the image which comes as your icon
- Write a description for your POI
- Make sure the POIType is Geo
- Fill in the transform, object and layer IDs which were generated in the previous steps.
- Click Go.
At this point, you have setup a basic AR experience at a GPS location which you can test. In the rest of the tutorial, we are going to add advanced animations to our augments.
- Animation table: Although, the previous steps would get the job done in terms of setting up and augmentation at a desired GPS location, we can achieve more than just objects showing up. We can add Scale, Transform and Rotate animations on the objects. To do this, we create a new row in the Animation table.
- Enter the id of the POI which you want the animation for
- Select a desired event type from the dropdown
- Select the type of animation from the dropdown
- Enter 1 in the repeat field if you want the animation to loop
- Enter the other values in all the fields. All these values come by testing. There is no other way. Play around with these values till you get the right animation you want.
- Lastly, enter the layer id for this POI
- This sets up your POI for the animations
Congratulations! You have setup your first GPS-based AR experience! To test whether you have followed the step correctly, go to the Layar website and use the “Test” section of the layer you created. In this, place the phone to a location around your POI and click “Load POIs”. This should show all the POIs around that location both on the map and in text log. Search for the name you gave to your augment and see if it is present in the list. If it is, this means that you have successfully setup Layar with the API. Unfortunately, there is no way to troubleshoot in case you don’t see your augment. You can go back and check all the tables you set, but the safest and the fastest way is to setup the entire experience again from scratch.
Experiencing on the Layar App
Now that you have setup your GPS experience, it is time to see how it looks in the real world.
- Download the Layar App on the Google Play Store or the Apple App Store
- Go to Menu->Settings
- Login to your account using Layar credentials
- Go back and select “Geo Layers”
- Go to Test layers and you should see the layer you just set up
Giving Others access to your layers
The idea of this tutorial is to help you setup augments all around the world. If you want your friend to see this in some other location, you can add them as testers of your layer. To do this:
- Go to “Permissions” section of your layer
- Give relevant permissions to people using their email addresses
- Take note that these email addresses should be registered on the Layar website.
- It is a good idea to first setup the augmentation near you for testing. Once you are happy with the way it works, you can easily edit the POI table to update the coordinates to your desired location.
- It is sometimes frustrating to setup the augment in the right size. Trust me, it works after a few tries. Just don’t give up.
- Sometimes the augments don’t work because they are hosted on secure servers. Google Drive, Box, Dropbox etc, don’t work. If you don’t have your own server, send me your files and I will be happy to host them for you on my server.
- GPS sensors on the phones aren’t very accurate, so the margin of error is very bad. Google maps claim that the inaccuracy on maps is about 30m. So if you don’t get your augments right where you want them, it is possible that the GPS is inaccurate. Especially inside closed buildings and on cloudy days.
- One way to make sure that your system is setup correctly is to look at the radar on the Layar app. If you see a dot there, this means that your augment is working – it is just on a different scale. Mess around with the scale.
- All images are one-directional – meaning they wont show up if you look at them from the back. They would look transparent as if there is no image. If you see a dot on your radar and have played with the scale enough, try rotating the image a little and see if that works.
Good luck! And Happy Coding!