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.

 

Advertisements

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 ūüôā

Quick Interactive Storyboard

I decided to quickly draw up the interactivity of my project as storyboards to communicate how the piece will be used.

1The front cover of the book will have the 4 main first aid characters and this will be a marker to scan. 3First you set up the tablet/iPad and headphones and turn on the Junaio App and click on the first aid channel. 2Then you scan the marker and an animation plays of all the characters introducing themselves or possibly folding into the characters if I have time. 4Then you open up the pop up book and choose a section to start off. 5Point the device at the marker, which will be icons which represent the steps to help the child in the scenario. Watch the 10 second animation of little cube characters playing and one getting hurt (cut/999/burn/nose bleed).  6When the animation ends the child will be prompted to click on an icon which appears in the middle of the screen. You click the icon with your finger.7A new video loads which will be taken from Youtube. This will be the instruction video made without limitations of Junaio so I can add effects and unlimited polygons. The app will stream the video I made and uploaded on Youtube. The main character for the scenario will be narrating as children can read well at the age of 4-5. Once one step is explained, an icon which represents the step will appear at the bottom of the screen.8When all the steps are explained, all the icons are revealed.  9The character ends with thanking the child for watching. 10The main character will tell the child they can play the animations again by pressing the icons on the side. 11I plan on having a follow-up activity for the children where they can rearrange cards with the icons from the scenario in the correct order with the marker as reference if they get stuck. 12I want to make the marker into a card which the children can take home and watch and learn the first aid again.

3D Studio Max Origami Puffy Bunny

I attempted modelling my origami puffy bunny in 3D Studio Max and I found it quite tricky and challenging. At first I decided to model the bunny accurately with the folds that you see when it is made:

Puffy Bunny 6

I made this quite complicated for myself and I was getting confused on modelling all the folds as I wanted to model the bunny the way it looks.

This is how it was beginning to turn out:

Left model: I modelled the bunny ear separately and then added a box but my supervisor recommended modelling the whole bunny as one object.

Right model: I started to extrude from the bottom of the bunny ear to make the cube shape and also the triangle folds you see on the origami bunny. But this wasn’t working out either, I was overcomplicating things. My supervisor told me to keep the model simple as the origami bunny is simple, whilst making it the ‘perfect’ version.

My next attempt was to make the bunny from a chamfer box and extrude the ears and triangle flaps, here is how it is turning out:

Chamfer Box

Chamfer Box

Half Modelling

Half Modelling

Polgon Modelling

Polgon Modelling

Mesh Smooth

Mesh Smooth

I used the chamfer box as it automatically added rounded edges to the cube. I turned the object into an editable poly and deleted half the object to begin modelling one half and then when¬†I’m¬†finished I add symmetry to save time modelling and the bunny is symmetrical. Next I extruded the faces to make the ear and moved the vertices to shape the curved ears. The triangle flaps were also extruded the scaled on the x-axis to narrow the end. This turned out much better and looked more like the origami bunny.

The model used 508 polygons and 1,708 polygons with MeshSmooth turned on which is perfect as it remains in the 2,000 polygon limit for Juanio. The prop used will take up the rest of the polygons left over (example: nurse kitty has a nurse hat which takes 198 polygons with MeshSmooth).

The next step was creating the other 3 characters I designed.

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.

AR Marker/Pattern for Junaio

My Marker

For my project I will be designing my own patterns and taking a picture of them with my android tablet. To capture the most ideal image of the pattern I will be using the guidelines below and on the junaio website. My pattern will be non-symmetrical¬†and well contrasted. The recommended size to save the pattern is 200×200 and the file format should be PNG. When you have your file ready to use you go to¬†http://dev.junaio.com/tools/trackingxmlcreator¬†where you can upload your marker and create a tracking XML which saves as tracking.zip. This file will be put into your folder later on with all the other¬†necessary¬†files on your ftp folder.

Inspiration  First Aid Graphics Ideas

What should the pattern/marker/reference image look like?

The pattern is the reference image that will be “searched for” in the live view, so junaio knows where to attach virtual content to and how to rotate and scale this content. You have to have a 2D image of an object, where the information can be glued onto. This can be a page of a magazine or book, a poster, a CD/DVD case or a side of your packaging and much more. To allow a robust and stable tracking, meaning to have the information glued correctly to your object, please keep the following in mind:

  • Use a pattern that is highly structured, meaning to have a lot of visual hints with different¬†colours¬† high contrasts and sharp edges. Junaio considers your reference image as gray-scale, so different¬†colours¬†should have different brightness.
  • Have your pattern in a “common” format, e.g. square format or rectangle format in 3:2 or 4:3 or similar.
  • Text is usually hindering as well as flat shaded surfaces.
  • Crop a certain highly structured area of your image and use this as a pattern, if there are other flat shaded areas around
  • Make sure the image is not too dark and there are no reflection points on your pattern

You also have to make sure that your object in the real world looks the same as the “pattern”.

  • Make sure they have the same format, e.g. having the same aspect ratio and being landscape/portrait
  • Make sure there are no missing parts.
  • It is recommended to use diffuse, non-reflective materials for the pattern.

The general rule is:

Make the reference image as similar to what junaio gets from the camera as possible.

You can find this information and much more here: http://www.junaio.com/develop/docs/glue/

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.

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