We made an augmented reality pop-up book in my first year seminar last spring. Perhaps you’d like to make your own?

1. Go to Junaio and register as a developer.

2. Get some server space that meets Junaio’s requirements.

3. On the right hand side of the screen, when you’re logged into Junaio, you can find out what your API key is by clicking on ‘show my api’. You’ll need this info.

4. Create a channel (which you do once you’re logged in over at Junaio; click on ‘new channel’ on the right hand side of the screen). You will need to fill in some information. For the purposes of creating a pop-up book, you select a ‘GLUE channel’. The ‘callback’ is the URL of the folder on your server where you’re going to put all of your assets. Make this ‘YOURDOMAIN/html/index.php. Don’t worry that the folder ‘html’ or the file ‘index.php’ doesn’t exist yet. You’ll create those in step 6.

Now the fun begins. I’m going to assume for the moment that you’ve got some 3d models available that you’ll be using to augment the printed page. These need to be in .obj format, and they need to be smaller than >750 kb. I’ve used 123D Catch to make my models, and then Meshlab to reduce the size of the models (Quadratic Edge Collapse is the filter I use for that). Make sure you keep a copy of the original texture somewhere so that it doesn’t get reduced when you reduce polygons.

5. Create your tracking images. You use Junaio’s tool to do this. At the bottom of that page, where it says, ‘how many patterns do you want to generate?’, select however many images you’re going to augment. PNGs should work; make sure that they are around 100 kb or smaller. If your images don’t load into the tool – if it seems to get stuck in a neverending loading cycle – your images may be too large or in the wrong format.  Once this process is done, you’ll download a file called ‘tracking.xml_enc. Keep this.

6. Now, at this point, things are a bit different than they were in May, as Junaio changed their API somewhat. The old code still works, and that’s what I’m working with here. Here’s the original tutorial from Junaio. Download the ‘Getting Started’ php package. Unzip it, and put its contents into your server space.

7. navigate to config/config.php, open that, and put your Junaio Developer key in there.

8. I created a folder called ‘resources’; this is where you’re going to put your assets. Put the tracking_xml.enc in there.

9. Navigate to src/search.php. Open this. This is the file that does all the magic, that ties your tracking images to your resources. Here’s mine, for our book. Note how there’s a mixture of movies and models in there:

<?php /**/ ?><?php

/**
* @copyright  Copyright 2010 metaio GmbH. All rights reserved.
* @link       http://www.metaio.com
* @author     Frank Angermann
**/

require_once ‘../library/poibuilder.class.php’;

/**
* When the channel is being viewed, a poi request will be sent
* $_GET[‘l’]…(optional) Position of the user when requesting poi search information
* $_GET[‘o’]…(optional) Orientation of the user when requesting poi search information
* $_GET[‘p’]…(optional) perimeter of the data requested in meters.
* $_GET[‘uid’]… Unique user identifier
* $_GET[‘m’]… (optional) limit of to be returned values
* $_GET[‘page’]…page number of result. e.g. m = 10: page 1: 1-10; page 2: 11-20, e.g.
**/

//use the poiBuilder class   — this might not be right, for
$jPoiBuilder = new JunaioBuilder();

//create the xml start
$jPoiBuilder->start(“http:YOURDOMAIN/resources/tracking.xml_enc”);

//bookcover-trackingimage1
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI(
“Movie Texture”,    //name
“0,0,0”, //position
“http://dev.junaio.com/publisherDownload/tutorial/movieplane3_2.md2_enc&#8221;, //model
“http://YOURDOMAIN/resources/movie-reel.mp4&#8221;, //texture
95, //scale
1, //cosID
“Universal Newspaper Newsreel November 6, 1933, uploaded to youtube by publicdomain101”, //description
“”, //thumbnail
“movie1”, //id
“1.57,1.57,3.14”, //orientation
array(), //animation specification
“click”

);

//deliver the POI
$jPoiBuilder->outputPOI($poi);

//trackingimage2 pg 9 xxi-a:55 –
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI(
“Movie Texture”,    //name
“0,0,0”, //position
“http://dev.junaio.com/publisherDownload/tutorial/movieplane3_2.md2_enc&#8221;, //model
“http://YOURDOMAIN/resources/edited-museum-1.mp4&#8221;, //texture
90, //scale
2, //cosID
“Faces of Mexico – Museo Nacional de Antropologia”, //description
“”, //thumbnail
“movie2”, //id
“1.57,1.57,3.14”, //orientation
array(), //animation specification
“click”

);
$cust = new Customization();
$cust->setName(“Website”);
$cust->setNodeID(“click”);
$cust->setType(“url”);
$cust->setValue(“http://www.youtube.com/watch?v=Dfc257xI0eA&#8221;);

$poi->addCustomization($cust);
//deliver the POI
$jPoiBuilder->outputPOI($poi);

//trackingimage3 pg 11 xxi-a:347 bighead -3d model
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI (
“Effigy”, //name
“0,0,0”,  //translation
“http://YOURDOMAIN/resources/id3-big-head.zip&#8221;, //mainresource (model)
“http://YOURDOMAIN/resources/big-head-statue_tex_0.jpg&#8221;, //resource (texture)
5, //scale
3, //cos ID -> which reference the POI is assigned to
“XXI-A:51”, //description
“”, //thumbnail
“Zapotec Effigy”, //id
“0,3.14,1.57” //orientation
);

//deliver the POI
$jPoiBuilder->outputPOI($poi);

//trackingimage4 pg13 xxi-a:51 from shaft tomb, model
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI (
“Shaft Tomb Figurine”, //name
“0,0,0”,  //translation
“http://YOURDOMAIN/resources/id4-shaft-grave.zip&#8221;, //mainresource (model)
“http://YOURDOMAIN/resources/april25-statue.jpg&#8221;, //resource (texture)
5, //scale
4, //cos ID -> which reference the POI is assigned to
“XXI-A:51”, //description
“”, //thumbnail
“Shaft Tomb Figurine”, //id
“0,0,3.14” //orientation
);
//echo the POI
$jPoiBuilder->outputPOI($poi);

//trackingimage5 pg15 xxi-a:28
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI(
“Movie Texture”,    //name
“0,0,0”, //position
“http://dev.junaio.com/publisherDownload/tutorial/movieplane4_3.md2_enc&#8221;, //model
“http://YOURDOMAIN/resources/pg15-movie.mp4&#8221;, //texture
90, //scale
5, //cosID
“Showing the finished model in Meshlab”, //description
“”, //thumbnail
“movie3”, //id
“1.57,1.57,3.14”, //orientation
array(), //animation specification
“click”

);

//deliver the POI
$jPoiBuilder->outputPOI($poi);

//trackingimage6 pg17 xxi-a:139 man with club movie
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI(
“Movie Texture”,    //name
“0,0,0”, //position
“http://dev.junaio.com/publisherDownload/tutorial/movieplane4_3.md2_enc&#8221;, //model
“http://YOURDOMAIN/resources/archaeologicalsites-1.mp4&#8221;, //texture
90, //scale
6, //cosID
“”, //description
“”, //thumbnail
“movie4”, //id
“1.57,1.57,3.14”, //orientation
array(), //animation specification
“click”

);

//deliver the POI
$jPoiBuilder->outputPOI($poi);

//trackingimage7 pg19 xxi-a:27 fat dog model
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI (
“Fat Dog”, //name
“0,0,0”,  //translation
“http://YOURDOMAIN/resources/id5-dog-model.zip&#8221;, //mainresource (model)
“http://YOURDOMAIN/resources/april25-dog_tex_0-small.png&#8221;, //resource (texture)
5, //scale
7, //cos ID -> which reference the POI is assigned to
“XXI-A:27, Created using 123D Catch”, //description
“”, //thumbnail
“Fat Dog”, //id
“0,0,3.14” //orientation
);

//deliver the POI
$jPoiBuilder->outputPOI($poi);

//trackingimage8 pg21 xxi-a:373 ring of people – model
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI (
“Ring of People”, //name
“0,0,0”,  //translation
“http://YOURDOMAIN/resources/ring.zip&#8221;, //mainresource (model)
“http://YOURDOMAIN/resources/ring-2_tex_0.jpg&#8221;, //resource (texture)
5, //scale
8, //cos ID -> which reference the POI is assigned to
“XXI-A:29, Old woman seated with head on knee. Created using 123D Catch”, //description
“”, //thumbnail
“Ring of People”, //id
“1.57,0,3.14” //orientation
);

//deliver the POI
$jPoiBuilder->outputPOI($poi);

//trackingimage 9 pg 23 xxi-a:29 old woman with head on knee.
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI (
“Old Woman”, //name
“0,0,0”,  //translation
“http://YOURDOMAIN/resources/statue2.zip&#8221;, //mainresource (model)
“http://YOURDOMAIN/resources/Statue_try_1_tex_0.png&#8221;, //resource (texture)
5, //scale
9, //cos ID -> which reference the POI is assigned to
“XXI-A:29, Old woman seated with head on knee. Created using 123D Catch”, //description
“”, //thumbnail
“Old Woman”, //id
“0,3.14,3.14” //orientation
);

//deliver the POI
$jPoiBuilder->outputPOI($poi);

//trackingimage 10 pg29 Anything but textbook movie
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI(
“Movie Texture”,    //name
“0,0,0”, //position
“http://dev.junaio.com/publisherDownload/tutorial/movieplane3_2.md2_enc&#8221;, //model
“http://YOURDOMAIN/resources/carleton-promo.mp4&#8221;, //texture
100, //scale
10, //cosID
“Carleton University – Anything but textbook!”, //description
“”, //thumbnail
“movie5”, //id
“1.57,1.57,3.14”, //orientation
array(), //animation specification
“click”

);
$cust = new Customization();
$cust->setName(“Website”);
$cust->setNodeID(“click”);
$cust->setType(“url”);
$cust->setValue(“http://carleton.ca&#8221;);

$poi->addCustomization($cust);

//deliver the POI
$jPoiBuilder->outputPOI($poi);

///end of tracking images
$jPoiBuilder->end();

exit;

And that does it, basically. Each element, each augment, is called after ‘//deliver the POI’. After ‘createBasicGluePOI’ you get the parameters. You provide the direct URL to your ‘mainresource’ when it’s a 3d model. In the next line, the direct URL to the texture. You can make it bigger or smaller by adjusting ‘Scale’; cos ID is next. Make sure that these correspond with the images you uploaded when you created the tracking file. Otherwise you can get the wrong model or movie playing in the wrong spot. The ‘description’ is what will appear on the smartphone if somebody touches the screen at this point. ‘Orientation’ is a bugger to sort out, as it is in radians. So take your compass, and divide by 3.14 to figure it out. I believe that 0,0,0 would put your model flat against your tracking image, but I could be wrong.

(If you’ll notice, some of the POIS are movies. To display these, you map a ‘movie plane’ over your tracking image, and then play the movie on top of this. Use Junaio’s movie plane – the URL is http://dev.junaio.com/publisherDownload/tutorial/movieplane3_2.md2_enc and put that in the line after ‘translation’. The next line will be the direct URL to your movie. These need to be packaged a bit for iphone/android delivery. I used Handbrake to do this, with its presets. Load movie, export for iphone, and voila.)

Regarding packaging your models- you have to zip together the texture, the obj file, and the .mtl file that meshlab creates.  An MTL file looks like this inside:

#
# Wavefront material file
# Converted by Meshlab Group
#

newmtl material_0
Ka 0.200000 0.200000 0.200000
Kd 1.000000 1.000000 1.000000
Ks 1.000000 1.000000 1.000000
Tr 1.000000
illum 2
Ns 0.000000
map_Kd big-head-statue_tex_0.jpg

newmtl material_1
Ka 0.200000 0.200000 0.200000
Kd 0.501961 0.501961 0.501961
Ks 1.000000 1.000000 1.000000
Tr 1.000000
illum 2
Ns 0.000000

Make sure the named  texture file (here, ‘big-head-statue-tex_0.jpg’) in this file is the same as the one in the zip file, and the same as the one called in the search.php. I confess a big of ignorance here: I found that I also had to have the texture file in the main resource folder, unzipped. This is the one the search.php points to; but if you don’t also have it in the zipped file, you get a 3d object without texture. I do not know why this is.

10. Go back to ‘my channels’ on Junaio. Click ‘validate’ beside your channel. This will tell you if everything is ok. Note – sometimes things come back as an error when they aren’t really a problem. The only way to know the difference is to click on ‘get QR code’ and then go to step 11:

11. With your smartphone, having already downloaded the Juanio app, click ‘scan’ and scan the QR code for your channel. Your content – if all is well – will load. Aim your phone at one of your tracking images, and your augmentation should appear. Voila!

So that should do it. Good luck, and enjoy. Keep in mind that with Junaio’s new api, a lot of this has been streamlined. I’ll get around to learning that, soon.