Skip to content

GuessWho: Augmented Reality Project

December 26, 2009

GuessWho is an augmented reality project done as a group for one of my classes. The premise of the project is based off of a drinking game where people place a card on their forehead with a name written on it; the person has to figure out who they are (name on the card), by asking other people questions about themselves. We took the game up a notch, by using square augmented reality “markers” instead of cards. People can then use our little flash program to stare at them through a webcam to figure out who they are. Placing the marker of their forehead places a 3D face in front of their (on the screen) and the face will tilt and turn just like their would. The source code is at the bottom of the page.

——————————–

Links

To do this project I used the following sites:

FLARManager class package: http://words.transmote.com/wp/flarmanager/

Online Marker generator: http://flash.tarotaro.org/blog/2009/07/12/mgo2/

Tutorial: http://www.gotoandlearn.com/play?id=114

  • (i’ve also watched gotoAndLearn’s FLARToolkit tutorial, not necessary if you’re using FLARManager and definitely more confusing. Though,  it might help you’re understanding since FLARManager used FLARToolkit)

About Markers: http://www.flartoolkitdocs.org/basics/markers

Google’s 3d warehouse for finding collada files: http://sketchup.google.com/3dwarehouse/

About Colladas: http://www.marcpelland.com/2009/01/29/using-papervision-object-parsers/3/

Blender + Papervision Tutorial:

Mikko’s info about Colladas: http://www.mikkoh.com/blog/2009/02/you-can-lick-my-collada-getting-3d-models-into-papervision/

  • Mikko’s written a lot about augmented reality, it might be worth it to check around the rest of his blog

Blender 3d program (it’s FREE!!): http://www.blender.org/

—————————————–

Getting Started

FLARManager was way simpler than FLARToolkit, so i used that for the basis of the augmented reality.

———————————————

Working With Collada files

Collada files are one way to store 3d objects, their file extension is .dae . You can add colladas to your flash using papervision. In papervison you must use a parser to bring this file in. Getting my colladas to work was probably one of the most frustrating parts of the project.

I don’t know why but papervision has a DAE parser and a Collada parser. Anyways, I went with the Collada on because I’d seen it used elsewhere.

If your collada has a texture on it from an image, you can open up the dae file and make sure the link to the material image is correct. The path to the image can be relative to the .dae file itself, like seen below:

<library_images>
<image id=”example_jpg-img” name=”example_jpg-img”>
<init_from>/images/example.jpg</init_from>
</image>
</library_images>

We used Blender software to modify our collada to make different faces. Interestly we found we could make a decent looking face using the same wireframe and adding the image in such a way that a normal picture of the face could be projected onto head. This is different from the more common methods where your wireframe is unwrapped or a warped image is used. Our method however (I think the option for the UV image mapping was “project from camera view”) ended up also giving us a face image on the back of our head (though no one ever saw that part of the head in the final project).

To get your collada from Blender, select the option for collada under File > Export > Collada 1.4 (dae). The settings here must be done correctly. I can’t remember off the top of my head, but i think it might correct here in Mikko’s blog post. It’s important to use Triangles and not Polygons. I may have also selected use “use relative path”.

Btw, the variable “cow” in my sourcecode is a reference to a tutorial where i first learned to add colladas in papervision. Use something like the code in that tutorial to test out your 3d objects if your collada files are giving you problems.

———————————————-

Error when using Flash CS4

It seems Flash CS4 has an issue with interfaces that brought up errors like the one below:

1044: Interface method attachDestination in namespace org.libspark.flartoolkit.core.labeling:IFLARLabeling not implemented by class org.libspark.flartoolkit.core.labeling:FLARLabeling_BitmapData.

Thanks to the wonderful comments on the flarmanager site, a solution was found. This comment was found there (http://words.transmote.com/wp/20090923/flarmanager-v0-6-augmented-reality-in-flash/):

FlarComment

The first pieces of code say to change this:

</pre>
public class FLARLabeling_BitmapData implements IFLARLabeling {</code>
<pre>

to this:


</pre>
public class FLARLabeling_BitmapData implements IFLARLabeling, IFLARDummy {</code>
<pre>

It did work to get rid of the errors!

———————————————–

Sorry about this incomplete post,there is so much to put up! And truthfully, it’s been a while andi’m starting to forget a bit about how i did this project myself :S

As always, questions and comments are welcomed!

———————————————

Source code (Actionscript 3)


package
{
 import com.transmote.flar.FLARManager;
 import com.transmote.flar.marker.FLARMarker;
 import com.transmote.flar.marker.FLARMarkerEvent;
 import com.transmote.flar.utils.geom.FLARPVGeomUtils;
 import com.transmote.utils.time.FramerateDisplay;
 import flash.display.Sprite;
 import flash.events.Event;
 import org.libspark.flartoolkit.support.pv3d.FLARCamera3D
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.objects.parsers.Collada;
 import org.papervision3d.objects.primitives.Plane;
 import org.papervision3d.render.LazyRenderEngine;
 import org.papervision3d.scenes.Scene3D;
 import org.papervision3d.view.Viewport3D;

 [SWF(width = '640', height = '480', backgroundColor = '#000000', frameRate = '40')]

 //doesn't work on flashplayer 9

 public class GuessWho extends Sprite
 {
 private var fm:FLARManager;
 private var scene:Scene3D;
 private var view:Viewport3D;
 private var camera:FLARCamera3D;
 private var lre:LazyRenderEngine;
 private var p:Plane;
 private var con:DisplayObject3D;
 private var marker:FLARMarker;
 private var cow:DisplayObject3D;

 public function GuessWho()
 {
 initFLAR();
 }//GuessWho

 private function initFLAR():void
 {
 fm = new FLARManager("flarConfig.xml");
 fm.addEventListener(FLARMarkerEvent.MARKER_ADDED, onAdded);
 fm.addEventListener(FLARMarkerEvent.MARKER_REMOVED, onRemoved);
 fm.addEventListener(Event.INIT, init3D);
 addChild(Sprite(fm.flarSource));
 }//initFLAR

 private function onAdded(e:FLARMarkerEvent):void
 {
 trace("Added"); //e.marker.patternID.toString()
 marker = e.marker;

 //trace(e.marker.patternId);

 var yVal:Number = new Number( 0);
 var xVal:Number = new Number( -150);
 var zVal:Number = new Number( -30);

//matching different faces with each marker
 switch(e.marker.patternId)
 {
 case 0:
 trace("1");
 cow = new Collada("heads/fabricio.dae", null, 0.3, false);
 cow.rotationX = 0;
 cow.rotationY = 180;
 cow.rotationZ = 270;
 //cow.scale = .3;
 cow.x = xVal;
 cow.y = yVal;
 cow.z = zVal;
 con.addChild(cow);
 break;
 case 1:
 trace("2");
 cow = new Collada("heads/devin.dae", null, 0.3, false);
 cow.rotationX = 0;
 cow.rotationY = 180;
 cow.rotationZ = 270;
 //cow.scale = .3;
 cow.x = xVal;
 cow.y = yVal;
 cow.z = zVal;
 con.addChild(cow);
 break;
 case 2:
 trace("3");
 cow = new Collada("heads/nitin.dae", null, 0.3, false);
 cow.rotationX = 0;
 cow.rotationY = 180;
 cow.rotationZ = 270;
 //cow.scale = .3;
 cow.x = xVal;
 cow.y = yVal;
 cow.z = zVal;
 con.addChild(cow);
 break;
 case 3:
 trace("4");
 cow = new Collada("heads/creepyGuy.dae", null, 0.3, false);
 cow.rotationX = 0;
 cow.rotationY = 180;
 cow.rotationZ = 270;
 //cow.scale = .3;
 cow.x = xVal;
 cow.y = yVal;
 cow.z = zVal-250;
 con.addChild(cow);
 break;
 }//switch

 con.visible = true;
 }//onAdded

 private function onRemoved(e:FLARMarkerEvent):void
 {
 trace("Removed");
 marker = null;
 con.visible = false;
 con.removeChild(cow);
 }//onRemoved

 private function init3D(e:Event ):void
 {
 scene = new Scene3D;
 camera = new FLARCamera3D(fm.cameraParams);
 camera.z = -30;
 view = new Viewport3D(640, 480, true);
 lre = new LazyRenderEngine(scene, camera, view);
 con = new DisplayObject3D();

 scene.addChild(con);
 con.visible = false;
 addChild(view);

 addEventListener(Event.ENTER_FRAME, loop);

 //addChild(new FramerateDisplay());

 }//init3d

 private function loop(e:Event):void
 {
 if (marker != null)
 {
 con.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(marker.transformMatrix);
 }//if

 lre.render();

 }//loop
 }//Class

}//package

Advertisements
2 Comments
  1. benz permalink
    March 16, 2010 19:53

    Hi, first of all thanks for the code.

    When I show the first marker on webcam it’s work fine but when I use the next marker the two dae model shows up. Any code modification or chances that it will only show one model per marker.

    Hoping for your immediately reply on my concern.

    Again thanks for putting the working code for multiple markers with multiple models.

    • March 17, 2010 00:30

      Multiple models on one marker? There must be a small error in your code. Make sure you have you “break” statement inside each case of your switch, otherwise it could be continuing into the case? Another possibility is that your model isn’t being properly removed with the marker removed event. Another possibility is that your second marker image might accidentally be assigned more than once in your flarconfig.xml file. I hope that helps!

Comments are closed.

%d bloggers like this: