CultureTECH 2013 Derry/Londonderry

 

winnie-tang

Come see my work and others too! Try out my Augmented Reality using Juanio for yourself on September 11th 2013!

http://culturetech.co/event/2013-09-11/digitally-enabled-user-experiences

Digitally Enabled User Experiences

A selection of work from the recently graduated School of Creative Arts & Technologies, Design students from the Magee Campus, University of Ulster will be exhibited. It shares inventive thinking on digitally enabled user experiences. This specific work ranges from augmented reality-enabled, walled city maps and first aid e-learning for kids, to immersive games related content and digital human modelling.

Come along and experience these interactions for yourselves. Open your mind to what can be achieved with creative multiple-disciplinary design thinking and technological developments.

 

Pop-Up Templates

I made templates for each of the four scenes I created. I printed them off and cut & glued the pieces together by hand. The front and back cover was also created by hand. It takes a day to make one of the books!

This is the marker for the Doctor Panda first aid instruction video:

Once I publish my Junaio App, everyone will be able to print off this marker and scan the image with their device and watch the augmented reality I created ūüôā

Toy Store Cardboard Box Augmented Reality

Can kids have fun with something free and with no instructions?

I came across this interesting concept of opening up a cardboard toy shop were the children can choose a piece of cardboard and be creative and imaginative as they want with it.

There was a separate¬†room for the children to do arts and crafts and even had an augmented reality station, where kids can hold up their boxes with a QR code to the computer screen, and it will turn that box into a toy. Just a little help to get kids’ imaginations going.

Check it out and see the happy kids!

Animating and Interaction using Junaio

Getting started

On your ftp you need to set up a new directory and you can call it anything you want. I named mine cherryanimte. Download files from Junaio to get started:¬†http://www.junaio.com/develop/quickstart/hello-glue/ At the top of the page there is the subheading ‘What should you have done by now?’ On point number 5 click Download to download Junaio quickstart files. Unzip the file and save where you want.

What to place into your new directory

Open up the document and copy over the folder named ARELLibrary into your new directory folder. Then go into the file GLUE_2_AnimationsAndGlue. Copy over the .htaccess and index files into your directory. Go into the areal folder and place all the files here in your directory as well. (index/metaioman/arelGLUE2). Place your marker, MD2 file and PNG texture in here as well.

Edit index.php

Open up your index from your ftp folder and it should look like this:

index.php

index.php

There is a section which states:¬†require_once ‘..\ARELLibrary/arel_xmlhelper.class.php’;. You need to delete the “..\” as this code directs Junaio to search a folder backwards from the ARELLibrary folder and the file it needs to access is actually forward which is why you need to delete this.

In the index you also put in your marker ZIP file, your MD2 file and the PNG texture location.

The place to put your marker url is: “www.junaio.com/publisherDownload/tutorial/tracking_tutorial.zip” Instead of using this you put in your server, ftp folder and marker ZIP file name which I have explained in earlier posts. If you don’t remember you can check back on them.

Edit the following to the correct path and name of model/texture file that you are using:

dev.junaio.com/publisherDownload/tutorial/metaioman.md2″, //model Path
dev.junaio.com/publisherDownload/tutorial/metaioman.png”, //texture Path

You can also change the coordinates of your model. I find it best to set the translation to (0,0,0) and the rotation to (90,0,90). Changing the translation to 0 makes the model appear at the centre of your marker instead further to the side etc. The rotation I suggest is the one that worked with two of  my tests, this sets up the model to look like it is sitting/standing on top of the marker and not lying on the marker. Scale up or down if you need to after checking  how your model appears. Mess about with these coordinates to get the result you want after you see how the model appears on the marker.

Editing arelGLUE2

I wasn’t able to directly edit the file from my ftp so if this happens to you, just simply open the original file that you downloaded in the arel folder. This will open up with Adobe Dreamweaver or Micro Dreamweaver. If you read the code the top lines are self-explanatory and you don’t need to edit the coding.¬†The editing you need to do is at the very bottom. This is were you input the names of the animations when you used QTip to¬†export¬†your animation into an MD2 file.

arelGLUE2

arelGLUE2

Basically what the code above is stating is that the model will begin animation with the frame name you input and when the model is clicked it will do another animation which you have input. Where you input the frame name from QTip is where the quotation marks are. You can see where I have put my animations (Idle/Jump) on the above image just to show exactly where they go.

Once you have sorted this out you delete the arelGLUE2 file in your ftp folder and upload the edited file.

New channel on Junaio

Sign in at Junaio and go to My Channels and create a new channel. Name it anything you’d like and put a little description in, it’s a requirement so if you can’t be bothered you could type in test or anything. Make sure when you enter the correct information for the Content server URL section and it will always end with index.php as Junaio needs to be directed here as it has all the required information it needs to work your custom AR. For more information on channel making look into my earlier post.

Validate

Make sure to use the Validate button to ensure your channel will work by passing 3 tests. I have also discussed about these tests and troubleshooting in an earlier post which you can check out.

Using your device

Open up your Juanio app on your Android/iPad/phone etc and sign in as developer. Go to the search icon and click favourites to find the new channel you have created and click it. Point your device at the marker you set up and watch your model appear! Tap your model and it should animate what you animated in Max.

Here is how my cherry turned out:

Troubleshooting

Sometimes you will encounter some problems and when you figure out and fix the problem and point the device at the marker it seems as though nothing has changed. This can be fixed by clicking the Junaio logo, developer sign in and clicking clear cache then re-selecting your channel and pointing the device at the marker. Basically refreshing the app like a web page and the problem should be fixed now and show the correct modified display of your model.

Final Step in Juanio

We are nearly there!

Download the free Juanio app on your android tablet/iPad/phone etc and sign in as developer by clicking on the Junaio logo at the top. Then click on the little magnify glass on the top left of the screen to search for your channel. If you click on favourites your channel will come up. Select the channel you just made and point your device at your marker.

Ta-da!

First AR Test of Cherry Model

First AR Test of Cherry Model

Here is my little cherry appearing in the real world! I was very proud as it was my first AR achievement ūüôā My next task is to animate the little cherry and include some interaction.

I¬†encountered a problem beforehand with my AR, there was a plane underneath my cherry with the texture map on it and I didn’t understand why.

Cherry with Texture Map Plane

Cherry with Texture Map Plane

But I noticed I put in a plane in my 3Ds Max model when I was working with the lighting conditions. This meant when I exported the model as OBJ, it also exported the plane. I simply just had to delete the plane, export the model again as OBJ whilst making sure the name was the same in the index.php file and the original OBJ file uploaded.

Sometimes you will encounter some problems and when you figure out and fix the problem and point the device at the marker it seems as though nothing has changed. This can be fixed by clicking the junaio logo and clicking ‘clear cache‘ then reselecting your channel and pointing the device at the marker. Basically¬†refreshing¬†the app like ¬†a web¬†page and the problem should be fixed now and show the correct display.

Junaio Channel

We are almost there!

First go to the Juanio website and login with your login details and go to your channel you created which was explained on an earlier post. If you click Edit you can rename the channel, include a description, the content server url (URL that will be contacted to retrieve the channel information. e.g. http://yourserver.com/channel/arel.xml or http://yourserver.com/channel/). You can upload your own thumbnail image, displayed author, homepage url and so on if you wish. After your done you hit Save.

Validate

Validating is great on Junaio as it puts your channel through 3 tests to ensure it receives all the information it needs to show your custom AR. If all the test are green then your good to go! But if you encounter some red tests then there is a problem which I came across and learnt from.

The first test is the Check Callback URL which ensures that the url you provided, as a content server url, is available and if authorisation is requested. When I validated my channel it came up red, the url I provided wasn’t¬†available, I didn’t understand why it wasn’t working. After about 2 hours of researching the problem and looking through Junaio help section I discovered the problem! It was really simple. At the end of your url you have to include ‘/index.php’ in order for Junaio to be directly pointed to the file with all the information it needs to find for the model/texture/marker etc.

The second test is¬†Check pois/search which sends out a¬†request to your servers Callback API, whenever a user views your channel. This request needs to return all information in the perimeter of the user, that is necessary to experience your channel as anticipated. This test was ok and I didn’t have problems with it.

The third test is the¬†Check pois/search return value – junaio GLUE which checks your XML file. I didn’t pass this test and the error message came up stating it was the texture path. This was a simple mistake which you need to look out for as it is easy to make, I¬†repeated¬†some text when I typed in the texture location. I simply just had to delete the¬†unnecessary¬†extra text and validate the channel once again.

The tests are all green!

Trouble Shooting with Junaio

If you have any problems that aren’t solved with the methods above, you can visit Juanio’s site for help:¬†http://www.junaio.com/develop/quickstart/hello-glue/

Setting up the FTP for Junaio

Before beginning you need a FTP client that allows you to transfer files between websites and PCs running windows/Linux/ Mac OS X. I will be using ‘FileZilla’ which is a great cross-platform FTP software and it’s free to download and use. Here is a link if you want to download it yourself:¬†http://filezilla-project.org/download.php

FileZilla Logo

FileZilla Logo

Creating a Directory

After getting your FTP client you can access your server space by entering your host/username/password information in. This information should be created when you have bought or have access to server space. Once you have connected you create a directory by right clicking (in the second from the bottom box on the right) and simply clicking on .Create directory’. You can name it what ever you like, I named mine cherry as I remodelled my existing cherry model to be used as a test. The name you give it will be included in your url channel on Junaio to locate the information. For example, if your directory was called cherry it would be something like this; http://www.yourserver.com/cherry. I have included below what you would see when FileZilla is brought up:

FileZilla

FileZilla

Download Code from Junaio

To get started on putting files into the directory you created you download two important files from the Juanio website which can be found here:¬†http://www.junaio.com/develop/quickstart/hello-glue/ Scroll down to the sub-heading ‘Download’ and click on¬†Download¬†Hello GLUE – Tutorial¬†Code. Then you unzip the folder and the files ‘ATT55463.htaccess’ and ‘index.php’ appear. ¬†Upload these files into your directory by dragging the file into the directory. Also upload your OBJ and MTL ¬†file of your model, PNG file of your texture and ¬†ZIP file of the tracker. (All the information on these other files will be on my past posts).

Editing Parameters 

Open up your index.php by right clicking and selecting View/Edit, it’s time to change some coding but it’s simple enough to understand. Here’s an image of how the index.php file looks like:

index.php

index.php

Where it states:

[http://dev.junaio.com/publisherDownload/tutorial/tracking_tutorial.zip\”>

This is pointing to the marker which was uploaded onto to your server. This will let the channel know¬†what to search for (marker) before displaying visual content. You edit out dev.junaio.com/publisherDownload/tutorial/tracking_tutorial.zip and replace with your server information, directory folder and name of the marker file you uploaded. NOTE: It is important to type the exact name given to the file you have uploaded as it will not work otherwise. You should also not put spaces in your names, but if you have you can simply rename the file you uploaded by right clicking it and going to ‘rename’.

Where it states:

[CDATA[http://dev.junaio.com/publisherDownload/tutorial/metaioman.md2]]>

This is pointing to your OBJ model. Similarly to the marker code above, delete and replace with your information again. I am starting with a static model so I will be using OBJ file format. When I animate my cherry I will be using the MD2 format exported with QTip which is a plugin for 3Ds MAx bought from: http://qtipplugin.com/More information on purchasing and setting up the plugin will be on a later post.

Where it states:

[CDATA[http://dev.junaio.com/publisherDownload/tutorial/metaioman.png]]>

This is pointing to your texture used on your model. Simply edit out dev.junaio.com/publisherDownload/tutorial/metaioman.md2 and replace with your information again. Your texture file should be a PNG as it is supported by Junaio.

Transform

The rotation is automatically set at -90 on the x-axis which means the model will appear as if it were lying on your marker, you can change this to 0 so that your model looks as if it is standing/sitting on top of your marker. You can change translation/rotation/scale after checking out how the model appears.

How to start off using Junaio

First off you need a remote Apache and php enabled server to host the 3D models, textures, marker and any other custom code you add as Junaio uses php code to determine your custom AR. Luckily my supervisor gave me hosting space on the universities site and I was able to work with it.

At first I thought this would include a lot of coding to get things working, which I have hardly any experience with, but after doing a tutorial it wasn’t confusing and didn’t require complex coding. But I’m expecting the next stage of animating and adding interaction will have some hurdles to cross.

To get started with this AR business you sign up free as a Developer at the Junaio site: http://dev.junaio.com/index/signup/user/new

Junaio Developer Sign up

Junaio Developer Sign up

Next you create your own channel: ‘You can imagine a junaio Channel like a website or a TV channel. junaio acts as a distributions platform or a browser for your experiences. So it offers users all over the world a way to find your experience, which they can ‚Äútune in‚ÄĚ to see.’

You can name the channel anything you like, my test channel is named: cherry. My test channel will be a static model of a cherry character or GLUE as junaio call it: ‘junaio GLUE (or SCAN) mostly refers to junaio’s capabilities to recognize images and enhance images and pictures with virtual content without the need of using special markers.’ ¬†Then you point the channel url to your server.

So my first step in tackling augmented reality is to get a virtual 3D model appearing in the real world environment before including animations or interaction.

AR with Junaio

My supervisor used Junaio before to animate a few simple characters for a market research company a year ago. You can check out the video on my Prezi presentation:

http://prezi.com/nkdygia0k7wt/untitled-prezi/

To make it work you have to download the free Junaio app on the android tablet, for example, and search for the correct channel on the app to play the animation. The visual cue or marker was the company’s¬†business¬†card and by touching the model itself it directs you to their website. The level of interaction is minimal here, but there is potential for greater use and I hope to¬†incorporate interaction with the characters I design and model for primary school children¬†to learn from.

If you want to find out more information on Junaio check out their website: http://www.junaio.com/

500 Polygon Test

I decided to try remodelling one of my 3D models using only a limit of 500 polygons and here’s how it looks compared to the original:

 

In the end I used 499 to remodel the cherry, the original had 12,616 and you can tell the difference between the two.  The remodel is not as smooth as the original as adding turbosmooth would add more polygons. It was challenging trying to keep the same shape and feminine features like the original. But I realised I could use this to my advantage. As I am making origami and pop-up pieces for my project, I could make my 3D characters with an origami style. This means I will incorporate the folds, creases and angular features present in origami and pop-up pieces. Keeping the characters and the surrounding environment as a consistent style will make the whole project work together.

Enter your email address to follow this blog and receive notifications of new posts by email!