Creating the Augmented Heritage Tower

Once I had my models created and had them in the poly count between 1000 – 2000 I had to decide if I was going to have a animation or static building. I had previously thought of once the person taps the building a small animation would play, building moving, text or flag appearing displaying the name of the building. How ever I didn’t know how these work as I had seen a previous AR test that my supervisor did were there is a drop down with the text appearing.  However due to the time I had I had spent a lot of time on creating my actual illustrated Map. This didn’t leave me with much time for my buildings to create animations so I decide to have a static image of the buildings. Hopefully I can add a small animation once they are all done and I am happy with them.

OBJ File

Once I had created my buildings I exported them as “obj” changed:

  • faces to triangles in the drop down menu
  • Pre sets to None
  • Unpick YZ-axis

Done. This created two files of my buildings an “OBJ” and a “MTL” I will only need the obj file but I still have to  keep the mtl file with it at all times. Saved as HeritageTower. This created the “Model” file for my buldings

Adding Shadows and Baking Textures

I had to remind myself how I created my previous practices. So starting with junaio I logged in as a developer to see my original channels. As I was only creating static AR ( obj ) I didn’t have to use Qtip but I still had it just in case. I first process was that I had to bake my textures. As AR doesn’t have lightening I had to create lights and shadows to my building to bake. I added two Spot lights to get a good lighting scene and create shadows.  one of the lights were 1.0 and white and the other 0.6 and pale blue. This would create a more softer colour and not so white. Selecting my whole model except the light, went to my render option and render to texture.

I chose were I wanted to send my file and then choose the complete map in the “output” section and changed the size to 512 x 512. Choosing existing channel and finally rendering out. This showed me what my texture, diffuse building would look like in my AR. If I didn’t like it here then I would have to change the lighting.

Heritage Tower Diffuse Map

I then opened this in Photoshop and saved it as PNG. This created my “Texture” for the Model.


The next stage was the marker. I took a photo of the building on my map and used this as the marker. I didn’t want to add a certain image as I thought this would disrupt the final map so using the images of the buildings as the marker made a lot of sense. As children can easily point the phone to the buildings and the AR would appear.

This is the marker for the Heritage Tower:

To create my markers I had to take my photos and put them to 250 x 250 pix size in Photoshop at 300dpi and save as PNG file. Using Junaio pre tracker file upload ( ) , I uploaded my marker and downloaded the zip file which contains my marker. This created the “Tracker” for my Augmented building.

Coding File

This file is a HTML file, that contains the programming side of Augmented that combines all my files together to create my augmented reality. I had to download this file from the Junaio website “Getting_started_in_Junaio” inside it contains the “index.php” which is the html file and a code. I copied this file into a folder I have created for the Heritage Tower which contains all my other files.

Coffee cup – Adding all my files together 

This is like baking of a cake. Adding all my stuff together. I have had to use a file host to do this. Mine is “CoffeeCup”  my Supervisor was able to give me space on a host called designatmagee, this allowed me to have a base area on the internet that Junaio can access my files and make them work in real time. I was giving a username and password to log into. This was my AR server.

Here is a screenshot of my files. I had to create a file on my AR server called “HeritageTower” I have specifically left out any spaces as you will find out later. I then dragged my :

  • index.php and code thing that was in the same folder ( ATT55463.htaccess )
  • HeritageTower.obj (My Model)
  • HeritageTower.mtl
  • ( My marker file)
  • Dissfuse.png (My Texture)


This was meant to be the hardest part of Augmented Reality but I quit liked this section. It was adding all your files into the coding sections so that Junaio will create my AR. If my AR didn’t work this is were it would have went wrong. This is the most important part of the augmented reality. There are 3 files that I have to add. Each has its own location and it has to be typed EXACTLY like it appears in my AR server File ( HeritageTower) and no SPACES. This is why I have no spaces in my folder name that I created earlier. This is were the Index file works.

First I had open the index.php file as it was a HTML file I used Dreamweaver to open it. Once in Dreamweaver I set up a managed files section were it is automatically shows my files from my AR server file. You can see it below to the right:




Once I had my files set up in Dreamweaver I had to include them into the coding ( index.php ). There is a specific place were I have to include my texture, model and tracker. in “”. This means in the  first section I have to say were my files are coming from (website, your server)/ the AR server (Caroline)/Were to locate the files (HeritageTower)/ The file (model,texture,tracker).

As you can see below is a screenshot of my index file for the Heritage Tower. Including the right files in the right place in Dreamweaver.

Tracker File

Were is states <results trackingurl=\”\”>

I put in my Tacking file :

This points to my tracker file in my coffee cup folder.

Model File

Were is states <![CDATA[]]></model>

I put in my Model file that I created in 3D Max:

This points to my model file in my coffe cup folder.

Texture File

Were is states <![CDATA[]]></texture>

I put in my Texture file :

This points to my texture file.

At the bottom of the index file there is a transition, rotation and scale. This is were it sits in the augmented reality, what way is it seen and the size.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s