tutorial to make augmented reality for newbie – Blancer.com Tutorials and projects

Beginner’s Guide to Augmented Reality – Part 2

Welcome to Part 2 of my Beginner’s Guide to Augmented Reality, I hope you finished off the first part of this tutorial, or at least downloaded and read the source files (otherwise you may get a bit confused with what’s going on).

Quick Recap

Last time we looked at setting up a simple AR environment, creating a cube, applying materials to the cube and the “hole in the wall” effect.

Today we will be building on that knowledge and creating the final as shown in the demo. To create that final effect, we need to know how to render spheres, animate objects, play sound effects and finally, render 3d objects. Rendering 3D objects in the palm of your hand is the main reason why Augmented Reality has become a big hit this year, especially when you create some of the more interesting shapes or animate them. If you are in the UK you may have seen The Gadget Show recently where they featured Augmented reality and had an animated version of Suzi Perry that you could hold in your hand. Very nice.

So let’s get down to business. I’ll be starting with the world and stars render first of all, then moving on to animating the shapes and finally creating the cow. Open up your files from last time and let’s get creating.

Step 1: Download the World

Source: NASA Visible Earth. Credit: Reto Stöckli, Robert Simmon.

Download the 2048x1024px version of the image above from the NASA Visible Earth page and call it map.jpg. Place it into the following folder: deploy > assets. This is the same folder where you saved the images for the inside of the cube in the last part of the tutorial. This lovely image of the world came from NASA. They take good photos don’t they?

Step 2: Creating a Sphere

In your code, navigate to where we set up the “hole in the wall” effect for Marker 0 last time. Just after the “hole in the wall” code, add in the following code:

var Earth:Sphere = new Sphere(earth, 40);
Earth.z=200;
dispObj.addChild(Earth);

Step 3: Mapping the World

Now that we have set up a sphere, it needs a texture. This is done in the exact same way as mapping a texture to a cube. Notice how in the set up for the sphere, it’s looking for something called “earth” this is our texture variable.

Navigate in the code to where we set up materials before. Add to that code the following line:

var earth : BitmapFileMaterial = new BitmapFileMaterial("assets/map.jpg");

Just the same as the others.

Step 4: Test it!

When you test it, you should see something like the following image (but of course without that handsome devil holding up the marker for you):

Just as last time, you’ll need to download the marker image and print it off with plenty of white space around the edges.

Step 5: Stars in Your Eyes

Now what would a space image be without some stars? Let’s add some in shall we? This is possibly the most tedious part for me to write up since all the stars need to be individually positioned. But you cheeky rascals get the benefit of copy and paste.

Add in the following code after the earth render code:

var star1:Sphere = new Sphere(star, 4);
star1.z=65;
star1.x=84;
star1.y=164;
dispObj.addChild(star1);

var star2:Sphere = new Sphere(star, 3);
star2.z=246;
star2.x=32;
star2.y=64;
dispObj.addChild(star2);

var star3:Sphere = new Sphere(star, 2);
star3.z=163;
star3.x=78;
star3.y=98;
dispObj.addChild(star3);

var star4:Sphere = new Sphere(star, 4);
star4.z=120;
star4.x=164;
star4.y=157;
dispObj.addChild(star4);

var star5:Sphere = new Sphere(star, 2);
star5.z=148;
star5.x=-164;
star5.y=-157;
dispObj.addChild(star5);		

var star6:Sphere = new Sphere(star, 3);
star6.z=46;
star6.x=-36;
star6.y=-156;
dispObj.addChild(star6);

var star7:Sphere = new Sphere(star, 5);
star7.z=40;
star7.x=-16;
star7.y=-84;
dispObj.addChild(star7);

var star8:Sphere = new Sphere(star, 5);
star8.z=59;
star8.x=-84;
star8.y=30;
dispObj.addChild(star8);

var star9:Sphere = new Sphere(star, 4);
star9.z=87;
star9.x=-134;
star9.y=84;
dispObj.addChild(star9);

var star10:Sphere = new Sphere(star, 2);
star10.z=49;
star10.x=10;
star10.y=18;
dispObj.addChild(star10);

var star11:Sphere = new Sphere(star, 5);
star11.z=94;
star11.x=-84;
star11.y=41;
dispObj.addChild(star11);

var star12:Sphere = new Sphere(star, 3);
star12.z=54;
star12.x=91;
star12.y=-46;
dispObj.addChild(star12);

var star13:Sphere = new Sphere(star, 2);
star13.z=180;
star13.x=88;
star13.y=-130;
dispObj.addChild(star13);

var star14:Sphere = new Sphere(star, 4);
star14.z=102;
star14.x=134;
star14.y=-13;
dispObj.addChild(star14);

var star15:Sphere = new Sphere(star, 1);
star15.z=61;
star15.x=-35;
star15.y=145;
dispObj.addChild(star15);

Phew, that”s quite a lot. Of course, you can add more if you want more stars. Or just use a loop an array to add an arbitrary number.

Step 6: Color the Stars

Now we need to add a material for the stars. Add the following with the other material code:

var star : ColorMaterial = new ColorMaterial(0xFFFFFF);

Step 7: Testing Time!

Test the flash movie and hopefully you’ll see something like this:

Step 8: Trapped in a Box

Wouldn’t it be cool if, say, we could have the space scene we just created, be trapped in a little box held within the marker and then explode out? Well you’re in luck, and probably saw the outcome as that’s exactly what we are going to do.

It’s fairly simple to animate things in AR. Especially if you just want to move them from one point to another like we want to. To do this, we need to download some extra classes for Flash. GreenSock do a very nice series of animation libraries that help us easily move objects from one point to another.

Head over to greensock.com and download the AS3 TweenMax library.

Step 9: Importing a new Library

Once you have downloaded the TweenMax library, you need to extract the .zip file and place the greensock folder into src > com of our project. This is where the squidder library is also kept. Extract here and all will be just swell.

Now move back over to Flash. Add the following line at the top of your code with the other import lines:

import com.greensock.*;

Now you have access to the GreenSock library.

Step 10: Animating the Earth

Find the code where you set up the Earth variable. Replace it with the following code:

var Earth:Sphere = new Sphere(earth, 1);
Earth.z=-40;
TweenMax.to(Earth, 4, {scaleX:40, scaleY:40, scaleZ:40, z:"200", delay:4});

What I’ve done here is alter the Earth’s starting point and size so that it’s very small and inside the box. TweenMax is a great animation class. Here we set up which variable to animate (Earth), how long it will take in seconds (4), by how much it should scale up the variable, its z point and finally how long it should wait before animating. This is set to 4 so that we can animate other things first.

Step 11: Animating the Stars

Replace all your star setup code with the following:

var star1:Sphere = new Sphere(star, 1);
star1.z=-40;
TweenMax.to(star1, 4,{scaleX:1, scaleY:1, scaleZ:1, x:"84", y:"164", z:"65", delay:4});
dispObj.addChild(star1);

var star2:Sphere = new Sphere(star, 1);
star2.z=-40;
TweenMax.to(star2, 4,{scaleX:3, scaleY:3, scaleZ:3, x:"32", y:"64", z:"246", delay:4});
dispObj.addChild(star2);

var star3:Sphere = new Sphere(star, 1);
star3.z=-40;
TweenMax.to(star3, 4,{scaleX:2, scaleY:2, scaleZ:2, x:"78", y:"98", z:"163", delay:4});
dispObj.addChild(star3);

var star4:Sphere = new Sphere(star, 1);
star4.z=-40;
TweenMax.to(star4, 4,{scaleX:4, scaleY:4, scaleZ:4, x:"164", y:"157", z:"120", delay:4});
dispObj.addChild(star4);

var star5:Sphere = new Sphere(star, 1);
star5.z=-40;
TweenMax.to(star5, 4,{scaleX:2, scaleY:2, scaleZ:2, x:"-164", y:"-157", z:"148", delay:4});
dispObj.addChild(star5);

var star6:Sphere = new Sphere(star, 1);
star6.z=-40;
TweenMax.to(star6, 4,{scaleX:3, scaleY:3, scaleZ:3, x:"-36", y:"-156", z:"46", delay:4});
dispObj.addChild(star6);

var star7:Sphere = new Sphere(star, 1);
star7.z=-40;
TweenMax.to(star7, 4,{scaleX:5, scaleY:5, scaleZ:5, x:"-16", y:"-84", z:"40", delay:4});
dispObj.addChild(star7);

var star8:Sphere = new Sphere(star, 1);
star8.z=-40;
TweenMax.to(star8, 4,{scaleX:5, scaleY:5, scaleZ:5, x:"-84", y:"30", z:"59", delay:4});
dispObj.addChild(star8);

var star9:Sphere = new Sphere(star, 1);
star9.z=-40;
TweenMax.to(star9, 4,{scaleX:4, scaleY:4, scaleZ:4, x:"-134", y:"84", z:"87", delay:4});
dispObj.addChild(star9);

var star10:Sphere = new Sphere(star, 1);
star10.z=-40;
TweenMax.to(star10, 4,{scaleX:2, scaleY:2, scaleZ:2, x:"10", y:"18", z:"49", delay:4});
dispObj.addChild(star10);

var star11:Sphere = new Sphere(star, 1);
star11.z=-40;
TweenMax.to(star11, 4,{scaleX:5, scaleY:5, scaleZ:5, x:"-84", y:"41", z:"94", delay:4});
dispObj.addChild(star11);

var star12:Sphere = new Sphere(star, 1);
star12.z=-40;
TweenMax.to(star12, 4,{scaleX:3, scaleY:3, scaleZ:3, x:"91", y:"-46", z:"54", delay:4});
dispObj.addChild(star12);

var star13:Sphere = new Sphere(star, 1);
star13.z=-40;
TweenMax.to(star13, 4,{scaleX:2, scaleY:2, scaleZ:2, x:"88", y:"-130", z:"180", delay:4});
dispObj.addChild(star13);

var star14:Sphere = new Sphere(star, 1);
star14.z=-40;
TweenMax.to(star14, 4,{scaleX:4, scaleY:4, scaleZ:4, x:"134", y:"-13", z:"102", delay:4});
dispObj.addChild(star14);

var star15:Sphere = new Sphere(star, 1);
star15.z=-40;
TweenMax.to(star15, 4,{scaleX:1, scaleY:1, scaleZ:1, x:"-35", y:"145", z:"61", delay:4});
dispObj.addChild(star15);

This will animate your stars from a hidden start point to their final positions. Again, I’ve altered the stars’ z-positions so that they start inside the box.

Step 12: Test it!

Let’s test the Flash movie again. You should have a nice animated transition from nothing to the earth and stars exploding out of the box we trapped them in.

Step 13: It’s all a Cover up!

For the box lid that will open up and have the Earth and stars explode out, we will use four images. I use a wooden panel look for my box but feel free to create your own. Here are the images I made, download these and save them into deploy > assets.

Save as top.png

Save as bottom.png

Save as left.png

Save as right.png

Step 14: Create the Box Lid

Beneath where we set up the stars, add the following code:

var top:Cube = new Cube( new MaterialsList( {all: Top} ) , 80 , 0 , 80 );
top.z=0;
top.y=40;
TweenMax.to(top, 2,{rotationX:-180, delay:2});
dispObj.addChild(top);

var bottom:Cube = new Cube( new MaterialsList( {all: Bottom} ) , 80 , 0 , 80 );
bottom.z=0;
bottom.y=-40;
TweenMax.to(bottom, 2,{rotationX:180, delay:2});
dispObj.addChild(bottom);

var left:Cube = new Cube( new MaterialsList( {all: Left} ) , 80 , 0 , 80 );
left.z=0;
left.rotationZ=90;
left.x=-40;
TweenMax.to(left, 2,{rotationX:180, delay:2});
dispObj.addChild(left);

var right:Cube = new Cube( new MaterialsList( {all: Right} ) , 80 , 0 , 80 );
right.z=0;
right.x=40;
right.rotationZ=90;
TweenMax.to(right, 2,{rotationX:-180, delay:2});
dispObj.addChild(right);

This sets up all the parts that make up the box lid, positions them correctly and animates them. Great stuff.

Each “cube” is set to have a depth of zero (the third argument in the constructor), so they appear to be flat planes.

Step 15: Lid Material

In the material section, add the following code:

var Top : BitmapFileMaterial = new BitmapFileMaterial("assets/top.png");
var Bottom : BitmapFileMaterial = new BitmapFileMaterial("assets/bottom.png");
var Left : BitmapFileMaterial = new BitmapFileMaterial("assets/left.png");
var Right : BitmapFileMaterial = new BitmapFileMaterial("assets/right.png");

Now the lid will look the part. I’m sure you noticed that the left and right images are rotated and then I rotate them back again in the code in Step 14. You are probably wondering why I did that instead of just leaving the images as they were. Well, there’s a reason for that. They won’t work correctly unless you rotate them. It’s an odd bug, but the images turn up backwards when rendered and when you apply an animation to them they go the wrong way. Rotating them first and then back in the code makes them work as they should. It’s quite odd, but there you go.

Step 16: Testing!

Now all the parts are ready for another test, it’s all coming into place. I’m sure you’re making all sorts of oohing noises right now. Marvelous.

Step 17: This Needs Some Drama

If you’re like me, you’re looking at this thinking, wow that’s great, but it really needs some more drama. Well we’re going to do just that. Let’s add some dramatic music when the box opens.

Go to the Hollywood Edge sound effects library and download BrightPad.wav. (It’s not included in the Source download.) I’ve converted this to an MP3 called “dramatic.mp3″ but you can follow these instructions while keeping it as a WAV.

Save it to the folder deploy > assets.

Step 18: Adding in the Sound

Open up the .fla file and go to File > Import > Import to Library. Import dramatic.mp3.

Open up your library and you should see your newly imported file sitting right there.

Right-click on it and click on Properties. Check the “Export for ActionScript” box. The class box should now become active; type in it “dramatic” without the quotes.

Step 19: More Coding

Return to the .as file. At the top of the file, find the import code. Add the following import code:

import flash.media.SoundMixer;
import flash.media.SoundChannel;

A little further down, there are some private vars. You may remember this from last time when we set up the green cube. Add the following code to the private vars:

private var drama:dramatic = new dramatic();
private var dramaChnl:SoundChannel = new SoundChannel();

Now what we have done here is to set up the sound file “dramatic” and a sound channel. The sound channel allows starting and stopping of the sound through code.

Step 20: Playing the Sound

Since we only want the sound to play once (when the box opens and not every time we show the marker) you need to put the following code with all the shape set up code. I put mine just after I set up the box lid.

dramaChnl = drama.play(0,1);

This plays the sound once when the lid opens.

Step 21: Testing!

The sound should now play and hopefully it will feel very dramatic indeed.

You should feel very pleased with yourself right now, you have created something you can impress your friends with.

Step 22: Cows!

Now we get to the part where we render a 3d cow that you can hold in your hand. First of all, you need to download the following two files, save them in the usual place:

The texture, which you should save as Cow.png and the cow model file which you need to save as cow.dae.

Step 23: Setting up the Cow

At the top of your file, you need to add an import. Add the following line:

import org.papervision3d.objects.parsers.Collada;

Find the private vars a little further down and add the following:

private var cowSkin: BitmapFileMaterial;
private var cowMat: MaterialsList;
private var cow: Collada;

Step 24: More Setting Up

We are going to load the cow up onto a second marker. This is to show you that this method of loading different objects onto different markers is fairly robust and can handle not only shapes but 3d complex objects too.

Remember in the previous part of the tutorial, we had four markers on a single sheet of paper, and created different colored cubes for each marker? We’re going to re-use that code to let us use a separate marker for the cow and the Earth.

Navigate through your file until you find else if (id ==1){ – the check for the second marker.

Replace everything within the two curly brackets with the following code:

cowMat = new MaterialsList();
cowSkin  = new BitmapFileMaterial("assets/Cow.png");
cowMat.addMaterial(cowSkin,"all");

//Create the new Collada Object with cowMat
cow = new Collada("assets/cow.dae",cowMat);
cow.rotationX = 90;
cow.scale = 0.5;
dispObj.addChild(cow);

Step 25: Testing!

Yes, more testing already, wasn’t that quick. Download and print out the second marker. If all goes well, you should be the proud owner of a new little 3d cow. Congratulations!

Step 26: Is That Cow on Moo-t?

It’s great that we have such a nice looking cow, but wouldn’t it be better if the cow were to moo?

Go to this directory of files from a CD called, The Best Of Tucows, Volume 2 – and download MOO.WAV. (It’s not included in the Source download.)

Save it in the usual place as moo.wav.

Head on over to your .fla file and import the file to your library. Just like you did with the last sound file you imported, open up its properties, tick Export for ActionScript and change its class to mooSnd.

Step 27: Moo-sic to my Ears

Navigate to the private vars and add the following lines of code:

private var moo:mooSnd = new mooSnd();
private var mooChnl:SoundChannel = new SoundChannel();

Now, for this marker, I want the sound to play every time the cow appears but to only play once. To do this, you need to add the code to play the sound in a slightly different place than we did last time.

Find this line in your code:

private function _addCube( id:int , index:int ) : void {

We want to add our code just after this. By taking the following out of the shape set up code, it will play every time that ID is found rather than when the shape is set up, which only happens once.

Add this code:

if(id==1){
	mooChnl = moo.play(0, 1);
}

Conclusion

Test the file for the last time and the cow should moo. You can even use both markers at the same time and be super swish.

I hope you’ve enjoyed this two part tutorial on Augmented Reality and hope that you can go off now and create some very cool things.

Beginner’s Guide to Augmented Reality

Augmented Reality has been cropping up a lot lately, especially Flash-based AR. I will guide you through how to create some simple yet neat effects that you can put on your own website.

Introduction: Augmented Reality

Augmented Reality has been judged as one of 2010’s hottest trends. The concept behind it is pretty simple, over lay the physical world with cool graphics that appear to occupy the same space as you.

Lots of companies have used it as a great promotional tool. Adidas have recently put them on their shoes and made a very cool looking game.

source: http://www.wired.com/gadgetlab/2009/12/adidas-sneaker-augmented-reality/

Lego use it as a way to visualize what their products will look like when you’ve finished building them.

source: http://www.virtualworldlets.net/Worlds/Listings/AugmentedReality/Lego.jpg

Some freelancers use it as a very cool business card and promotional tool. AR allows you to create a more impressive business card at no cost at all and you can fit way more info on it.

source: http://jamesalliban.wordpress.com/2009/06/03/ar-business-card/

In January of this year, I completed a project for university where I created a wearable augmented reality system. It featured a virtual gallery which, as you walked around, told a very tragic story.

Check out the video on Youtube.

I approached creating AR from a design point of view, knowing very little about coding in AS3. I am here to share what I learned with you as I found it very difficult for beginners to learn anything about the subject. It was just a question of starting everything from scratch.

Now I’m sure you’re full of ideas of things to create, let’s create your first augmented reality project: adding depth to a flat piece of paper.

Introduction: flARToolkit

flARToolkit is the flash version of the C-coded augmented reality library known simply as ARToolkit. It was converted over by a very very skilled Japanese coder known as saqoosha. He does all kinds of crazy stuff with augmented reality and if you can read Japanese or are prepared to wade through lots of posts that barely make sense when translated, then you can learn a lot from him. He created the infamous ‘hole in the wall’ effect which is demonstrated in the New Years celebration project he created to welcome in 2009.

More recently, he has demonstrated that you can link various markers together and other wonderful effects that I could only ever dream of creating.

Step 1: Getting to the Source

Squidder.com modified an existing flARToolkit library, the flARManager class, to be able to handle events and multiple objects. Interestingly enough they post their source code and a so called ‘how to’ but never actually explain their own code. It took me some time to work out how to get multiple objects that could all be different. I should point out now that I am a designer first and coding resulted from wanting to make crazy things. I approached this wanting the end result to work rather than being concerned with best ways to code things.

Let’s download the code from their original post on the subject and give it a look over.

Download the file called “flarsquidderki.zip”, extract the .zip file and open up the main folder. Note, if you don’t extract the .zip folder, you won’t be able to open the .swf correctly or edit the files you need. So once you have done that, you’ll see 3 key folders: deploy, fla and src. You will also see a file called “flardrums.pdf”.

Step 2: Play Time

We have our markers for now, print them off so we can test it and see how the source currently works.

Open up the deploy folder and open the MultiFLARExample.swf. Accept the webcam and start playing with the markers.

In a video demo that they created, you pass your hand over each marker individually and see how they make sounds when they disappear. This was written in by squidder. They added two events, MARKER_ADDED and MARKER_REMOVED. We will explore how to use these events later.

Now you know how it currently looks, let’s get down to modifying their source code to do some cool things of our own.

Step 3: There’s Coding to Do

For this tutorial, I assume you have basic knowledge of AS3 and class sheets.

Open up the \fla\ folder and then double click on “multiFLARExample.fla”. In the properties panel you should see the class box filled in with MultiFLARExample. You’ll want to click the pencil icon next to the class box so that we can start looking at the code.

Step 4: MultiFLARExample

Straight away you’ll see the usual import code at the top and underneath that some basic variables for light sources.

Next is an interesting part, the code that loads in the markers. As you can see, the markers are loaded into an array so that they can easily be called later on. Pay attention to the order they loaded in here. The first marker in the array gets the id of 0, the next is 1 and so on. We will be using these id’s later on.

Also look at private functions _addCube and _getFlatMaterial as these are the other two sections that we will be focusing on editing today. They’re pretty self explanatory in what they do, but they are oddly set up. They have been coded for simplicity in getting the same object in multiple colors, rather than lots of different objects, so we have to make a few changes.

Step 5: Ch-Ch-Changes

Okay, let’s change some code. Let’s alter it to a more usable state but for now we’ll keep the visual look the same. When I was figuring all this out, it was an odd relief to find out that it all came down to if statements in the end. If statements are just so magical and useful when it comes to coding things.

In the _addCube function replace this code :

var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
					cube.z = 20;
					dispObj.addChild( cube );

with the following code:

if (id==0){

	var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
	cube.z = 60;
	dispObj.addChild( cube );

} else if(id==1){

	var cube2 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
	cube2.z = 0;
	dispObj.addChild( cube2 );

} else if (id==2) {

	var cube3 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
	cube3.z = 20;
	dispObj.addChild( cube3 );

} else if (id==3){

	var cube4 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
	cube4.z = 40;
	dispObj.addChild( cube4 );

}

Step 6: Test the Movie

Now, this might seem like a convoluted way to deal with cubes, but it allows us to deal with each individual cube. For example, in the code above, I have altered the z axis of the cubes to demonstrate to you that the code is now handling each cube as its own object. Let’s try out the movie, you should have something to this effect:

Step 7: Explanations

Before we continue, let me explain the code you just put in. It’s pretty straight forward and if you have used papervision3D before you can skip this part.

var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );

Here we create a new variable, cube. This variable holds all the information needed to render a cube and determine how it looks. The MaterialsList part refers to the material used for the outside of the cube. As we want the same material on every side and that material is held in a variable created earlier in the code, we use {all: fmat}. I’ll talk more about the fmat variable later. Finally, the three 40’s, these are the dimensions of the cube, the width, height and depth. Of course they don’t have to all be the same even though this is a cube. You can use the cube method to create rectangular cuboid shapes if you so wish.

cube.z = 20;

This sets the z value of the cube. This is how high the cube sits above the marker. 0 is the center line of the cube and so setting it at half the shape’s height means that is sits exactly on top of the marker.

dispObj.addChild( cube );

dispObj refers to a display object that was created earlier in the code. A display object will render your object on the screen. You can load as many shapes as you want inside one display object, so we will load all our shapes into it for now.

Brilliant, now that you know how it works, let’s continue editing the code. You don’t really need the _getFlatShadeMaterial function so let’s edit it all together shall we. Doing it this way also allows us to give a different material to each object.

Step 8: Pulling it Together

You’ll want to find this line in your code:

We are now going to edit the fmat variable so that instead of calling a function, it will call a new flatShadeMaterial where we specify the colors. Later on I’ll deal with other materials including bitmap materials.

Replace _getFlatMaterial(id); with:

new FlatShadeMaterial( _lightPoint , 0xff22aa , 0x75104e );

The three parameters set the lightsource for the flatShadeMaterial, the flat color, and also the shade color. Doing this will give our object a more realistic effect as we turn and rotate it in physical space.

Now, underneath that line we’ll want to add:

var fmat2 : FlatShadeMaterial = new FlatShadeMaterial( _lightPoint , 0x00ff00 , 0x113311 );
var fmat3 : FlatShadeMaterial = new FlatShadeMaterial( _lightPoint , 0x0000ff , 0x111133 );
var fmat4 : FlatShadeMaterial = new FlatShadeMaterial( _lightPoint , 0x777777 , 0x111111 );

Now that we have created a variable for each of our objects, we’ll want to change up the cube code I gave you earlier. Instead of just having fmat as the material for all of our cubes, you’ll want to change it to fmat, fmat2, fmat3 and fmat4 so that our cubes will appear different.

After you have done that, you can now finally remove the _getFlatMaterial function.

Delete the following lines of code:

private function _getFlatMaterial( id:int ) : FlatShadeMaterial {

	if ( id == 0 ) {
		return new FlatShadeMaterial( _lightPoint , 0xff22aa , 0x75104e );
	} else if ( id == 1 ){
		return new FlatShadeMaterial( _lightPoint , 0x00ff00 , 0x113311 );
	} else if ( id == 2 ) {
		return new FlatShadeMaterial( _lightPoint , 0x0000ff , 0x111133 );
	} else {
		return new FlatShadeMaterial( _lightPoint , 0x777777 , 0x111111 );
	}
}

Step 9: Test the Movie Again

And now let’s test again. If everything is done correctly, it should look exactly the same. What an achievement, eh?

It may not look like much, but we have just set up the foundation for creating lots of different looking objects.

Step 10: Materials

Okay, let’s get on to something a bit more useful. The bitmap material. Most people would want to put their own images into AR as a cool way to present their work; this is achieved by using an image as a material.

It’s fantastically simple. I have created the following image for you to use, since I’ll show you how to use bitmap material through a web link.

Firstly, you need to import the BitmapFileMaterial class. At the top of your code sheet where all the other classes are imported, add the following line:

import org.papervision3d.materials.BitmapFileMaterial;

and change your fmat material to the following:

var fmat : BitmapFileMaterial = new BitmapFileMaterial("http://kablamo.co.uk/artutorial/kcube1.jpg");

Now let’s test it, it should look just like this:

How simple was that?

Step 11: Making it Hole

Now that I’ve shown you how to make a cube that sits above the marker, let’s create a cube that sits below the marker to create the hole in the wall effect.

This effect was originally imagined and explained by saqoosha. Unfortunately, he explained it in Japanese and for papervision3d rather that for use with flARToolkit so a few changes were made.

You need to import these two classes:

import flash.geom.ColorTransform;
import flash.filters.*;

Add this line under _lightpoint with the other private variables:

private var _green:Cube;

and then under var dispObj : DisplayObject3D = new DisplayObject3D(); add the following:

this.viewport.filters = [
	new ColorMatrixFilter([
                    1, 0, 0, 0, 0,
					0, 1, 0, 0, 0,
                    0, 0, 1, 0, 0,
                    1, -1, 1, 1, 0
	])
];

Basically, what’s going on here is that you will have two cubes, one being green and the other forming the inside view. They will sit one inside the other. The viewport filter will mask out anything that is that particular color green, which is what we set the outside cube to, giving the effect that there is a hole in the marker.

Now we will create the two cubes.

Remove your existing cube code and replace it with this:

var hole:Cube = dispObj.addChild(new Cube(new MaterialsList(
		{all:new  BitmapFileMaterial( "assets/hole.jpg" ), bottom: new  BitmapFileMaterial( "assets/k.jpg" )}
	), 80, 80,80,1,1,1, Cube.ALL,Cube.TOP)) as Cube;

this._green = dispObj.addChild(new Cube(new MaterialsList({all: new ColorMaterial(0x00ff00)}), 80, 80,80, 1, 1, 1, Cube.TOP)) as Cube;
hole.rotationX = this._green.rotationX =90;
hole.z = this._green.z = -40;

Notice, for the materials we import in two .jpg files from the assets folder. This folder is located inside the main deploy folder, where the file MultiFLARExample.swf is found. You can either download the following images that I have created, or make your own.

Step 12: Test the Hole

Give it a test and you should have something like this:

Step 13: Making Mark-ers.

By now, you are probably fed up of holding up a ratty piece of paper with four markers up to the camera. You want to have your very own marker, so let’s make it. With a few online tools and Photoshop, you can have your own marker up in minutes.

First, let’s make your marker. You don’t need to use a barcode-like design like on the markers you are currently using, but, if you are using a lot of markers then the barcode is the best way to go. If you are using one or two then go wild with the design. For my marker design, I used the K from my website’s logo.

If you are doing it for a business card or some promotional material, think about how the marker looks as you can make some very nice looking markers that blend into the design more.

You need to set up your Photoshop document ready for marker creation. For a basic marker, create an 800x800px file with a 150px border all the way around. Or download this image below:

Step 14: Online Marker Generator

The white square in the middle is where you can put your marker design. Print off the marker and then pay a visit to the Online Marker Generator.

They have an online marker creator that takes your marker and makes a .pat file that works with your code. It’s quite odd, they have an upload option but I have never gotten it to work (printing out works just fine). There is also an AIR app that does just the same job but this is fine for now.

Set the marker segments to 16×16 and the marker size to 50%, show your marker to your webcam and when a red square surrounds your marker click on get pattern, if you are happy with how it looks in the preview window click save.

If your marker looks really odd in the preview or a red square doesn’t come up, you may need to re-design your marker. You also have to make sure that there is some white space around your marker as otherwise Flash won’t recognize it.

When the dialog box comes up, don’t just download this anywhere, you need to put the .pat file in a specific folder. Navigate to your flARToolkit folder > deploy > assets > flar and you should find four other .pat files there. Save your pattern there and remember what you called it. I called mine “kmarker.pat”

Step 15: Alter the Code

Back in flash, find this line:

And change crash.pat to whatever you named your marker as.

If you test your Flash file, you should find that your new marker picks everything up perfectly.

Conclusion

Thanks for reading this introduction to Augmented Reality. I hope you enjoyed it and that it’s made you curious about creating your own AR projects. In the next part of this tutorial, I will cover how to animate objects with TweenMax, making the markers a bit more play sound, importing 3D models and making everything prettier.