Getting Started with Augmented Reality / FLARToolKit

Create Your First Project with Augmented Reality

Setup a View Class

The FLARManager comes with a Simple Cubes example that allows you to use multiple markers and display a different object on each cube, we are going to take a bit of a different approach. You can do this anywhere you like but I am just going to create a views folder in the root of the src and then a class in there named HelloFlarView.as .

Now we are going to copy most of what was in the Simple Cubes Example with a couple small changes/modifications. Open up the class you just created and past the following into it.

package views {

1.  // flash
2.  import flash.display.Sprite;
3.  import flash.events.Event;
4.  import flash.utils.Dictionary;
5.  // flartoolkit
6.  import org.libspark.flartoolkit.core.param.FLARParam;
7.  import org.libspark.flartoolkit.pv3d.FLARCamera3D;
8.  // pv3d
9.  import org.papervision3d.lights.PointLight3D;
10.  import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
11.  import org.papervision3d.materials.utils.MaterialsList;
12.  import org.papervision3d.objects.DisplayObject3D;
13.  import org.papervision3d.objects.primitives.Cube;
14.  import org.papervision3d.render.LazyRenderEngine;
15.  import org.papervision3d.scenes.Scene3D;
16.  import org.papervision3d.view.stats.StatsView;
17.  import org.papervision3d.view.Viewport3D;
18.  // flarmanager
19.  import com.transmote.utils.geom.FLARPVGeomUtils;
20.  import com.transmote.flar.FLARMarker;
21.  
22.  /**
23.   * …
24.   * @author Marc Pelland
25.   */
26.  public class HelloFlarView extends Sprite {
27.  
28.   private static const CUBE_SIZE:Number = 40;
29.   private var viewport3D:Viewport3D;
30.   private var camera3D:FLARCamera3D;
31.   private var scene3D:Scene3D;
32.   private var renderEngine:LazyRenderEngine;
33.   private var pointLight3D:PointLight3D;
34.   private var statsView:StatsView;
35.   private var stats:Boolean = true;  // display the stats view
36.   private var marker:FLARMarker;
37.   private var container:DisplayObject3D;
38.  
39.   /**
40.    * create your view
41.    * @param cameraParams
42.    * @param viewportWidth
43.    * @param viewportHeight
44.    */
45.   public function HelloFlarView(cameraParams:FLARParam, viewportWidth:Number, viewportHeight:Number) {
46.    init3D(cameraParams, viewportWidth, viewportHeight);
47.   }
48.  
49.   /**
50.    * initialize the 3d scene
51.    * @param cameraParams
52.    * @param viewportWidth
53.    * @param viewportHeight
54.    */
55.   private function init3D(cameraParams:FLARParam, viewportWidth:Number, viewportHeight:Number) :void {
56.    // instantiate the container for the FLAR based scene
57.    container = new DisplayObject3D();
58.    scene3D = new Scene3D();
59.    camera3D = new FLARCamera3D(cameraParams);
60.    viewport3D = new Viewport3D(viewportWidth, viewportHeight);
61.    addChild(viewport3D);
62.    // start the render engine
63.    renderEngine = new LazyRenderEngine(scene3D, camera3D, viewport3D);
64.    // create the global light for the scene
65.    pointLight3D = new PointLight3D();
66.    pointLight3D.x = 1000;
67.    pointLight3D.y = 1000;
68.    pointLight3D.z = -1000;
69.    // create the stats view
70.    statsView = new StatsView(renderEngine);
71.    addChild(statsView);
72.    // add an enterframe listener to update teh scene and renderer
73.    addEventListener(Event.ENTER_FRAME, onEnterFrame);
74.   }
75.  
76.   /**
77.    * show and hide the stats view
78.    */
79.   public function toggleStatsView():void {
80.    if (stats) {
81.     removeChild(statsView);
82.     stats = false;
83.    } else {
84.     addChild(statsView);
85.     stats = true;
86.    }
87.   }
88.  
89.   /**
90.    * take the marker and build the scene on it
91.    * @param ARG_marker
92.    */
93.   public function addMarker (ARG_marker:FLARMarker) :void {
94.    // store marker
95.    marker = ARG_marker
96.    // build the 3d scene within the container
97.    buildScene();
98.    // add the container to the scene
99.    scene3D.addChild(container);
100.   }
101.  
102.   /**
103.    * build the 3d scene and add it to the container
104.    */
105.   private function buildScene():void {
106.    // create a new Cube, and place it inside a container (DisplayObject3D) for manipulation
107.    var materialsList:MaterialsList = new MaterialsList({all: new FlatShadeMaterial(pointLight3D, 0xffffff, 0×000000)});
108.    var cube:Cube = new Cube(materialsList, CUBE_SIZE, CUBE_SIZE, CUBE_SIZE);
109.    cube.z = 20;
110.    // add the cube to the container
111.    container.addChild(cube);
112.   }
113.  
114.   /**
115.    * clear the marker and remove all the content
116.    * @param marker
117.    */
118.   public function removeMarker (marker:FLARMarker) :void {
119.    // find and remove marker
120.    marker = null;
121.    // find and remove corresponding container
122.    for (var i:String in container.children) {
123.     trace(container.children[i]);
124.     container.removeChild(container.children[i]);
125.    }
126.    // remove the container
127.    scene3D.removeChild(container);
128.   }
129.  
130.   private function onEnterFrame (evt:Event) :void {
131.    // update the scene
132.    updateScene();
133.    // tell the renderer to render
134.    renderEngine.render();
135.   }
136.  
137.   private function updateScene () :void {
138.    // update all Cube containers according to the transformation matrix in their associated FLARMarkers
139.    if (marker != null) container.transform = FLARPVGeomUtils.translateFLARMatrixToPVMatrix(marker.transformMatrix);
140.   }
141.  }
142. }

Read the documentation with that file to understand just what I did. It is really close to the SimpleCubes demo, but I removed a couple things that I didn’t really think were needed. I also removed all the references for multiple markers which we are not going to need.

If you would like to customize the 3d scene in any way, check out the buildScene function in the view.

Connect the Controller to Your Class

The controller class that comes with FLARManager is ideal if you are looking to have multiple patterns in the scene, but we just removed that functionality from our view so we will now remove it from the Manager. Paste the following code over your controller:

package {

1.  import views.HelloFlarView;
2.  import flash.events.KeyboardEvent;
3.  import com.transmote.flar.FLARCameraSource;
4.  import com.transmote.flar.FLARLoaderSource;
5.  import com.transmote.flar.FLARManager;
6.  import com.transmote.flar.FLARMarkerEvent;
7.  import com.transmote.flar.FLARPattern;
8.  import flash.display.Sprite;
9.  import flash.events.Event;
10.  /**
11.   * standard FLARToolkit Papervision3D example, with our friends the Cubes.
12.   * code is borrowed heavily from Saqoosha, Mikko Haapoja, and Squidder.
13.   * http://saqoosha.net/en/flartoolkit/start-up-guide/
14.   * http://www.mikkoh.com/blog/?p=182
15.   * http://www.squidder.com/2009/03/06/flar-how-to-multiple-instances-of-multiple-markers/#more-285
16.   *
17.   * @author Eric Socolofsky
18.   * @url  http://transmote.com/flar
19.   * @see  updated by marc pelland (www.marcpelland.com)
20.   */
21.  [SWF(width="640", height="480", frameRate="30", backgroundColor="#FFFFFF")]
22.  public class FLARManagerTest_PV3D extends Sprite {
23.  
24.   private static const CAMERA_PARAMS_PATH:String = "../resources/flar/FLARparams.dat";
25.   private static const PATTERN_PATH:String = "../resources/flar/patterns/";
26.   private static const PATTERN_RESOLUTION:uint = 16;
27.  
28.   private var pattern:FLARPattern;
29.   private var flarManager:FLARManager;
30.   private var flarLoader:FLARLoaderSource;
31.   private var helloFlarView:HelloFlarView;
32.  
33.   public function FLARManagerTest_PV3D () {
34.    init();
35.   }
36.  
37.   private function init () :void {
38.    // build list of FLARPatterns for FLARToolkit to detect
39.    var patterns:Vector.<FLARPattern> = new Vector.<FLARPattern>();
40.    patterns.push(new FLARPattern(PATTERN_PATH+"pattern.patt", PATTERN_RESOLUTION));
41.    pattern = patterns[0];
42.    // use Camera (default)
43.    flarManager = new FLARManager(CAMERA_PARAMS_PATH, patterns);
44.    addChild(FLARCameraSource(flarManager.flarSource));
45.    // begin listening for FLARMarkerEvents
46.    flarManager.addEventListener(FLARMarkerEvent.MARKER_ADDED, onMarkerAdded);
47.    flarManager.addEventListener(FLARMarkerEvent.MARKER_REMOVED, onMarkerRemoved);
48.    // the flar manager fires an init when it is ready
49.    flarManager.addEventListener(Event.INIT, onFlarManagerInited);
50.   }
51.  
52.   /**
53.    * key listener
54.    * @param ARG_evt
55.    */
56.   private function onKeyDown(ARG_evt:KeyboardEvent):void {
57.    // if the user hit the S key
58.    if (ARG_evt.keyCode == 83) {
59.     helloFlarView.toggleStatsView();
60.    }
61.   }
62.  
63.   /**
64.    * when the flar manager has been initiated, initiate your custom view
65.    * @param evt
66.    */
67.   private function onFlarManagerInited (evt:Event) :void {
68.    helloFlarView = new HelloFlarView(flarManager.cameraParams, stage.stageWidth, stage.stageHeight);
69.    addChild(helloFlarView);
70.   }
71.  
72.   /**
73.    * function triggered when a marker has been discovered
74.    * @param evt
75.    */
76.   private function onMarkerAdded (evt:FLARMarkerEvent) :void {
77.    helloFlarView.addMarker(evt.marker);
78.   }
79.  
80.   /**
81.    * triggered when the marker is no longer being discovered in the camera view
82.    * @param evt
83.    */
84.   private function onMarkerRemoved (evt:FLARMarkerEvent) :void {
85.    helloFlarView.removeMarker(evt.marker);
86.   }
87.  }
88. }

** there is a line : var patterns:Vector.<FLARPattern> = new Vector.<FLARPattern>(); that isn’t displaying properly in the code block and i can’t figure it out… replace it with this previous line.

If you followed along in the documentation you will notice that I am doing a couple basic things, creating the pattern detection and listening for when that is found and lost. I have also added a key listener to add and remove a stats view from you Papervision scene to get a little more detail for debugging.

Now you are ready to test out the scene. I get pretty good results from such a simple setup, when it gets a little bit more complex you will notice a steady decline in frame rate. On the next page we will have a look at optimization.

Bookmark It

Hide Sites

Pages: 1 2 3 4

This entry was posted on Thursday, March 26th, 2009 at 2:17 pm and is filed under 3D, AS3, Experiments, feature, Flash, Papervision, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Digg it | Bookmark at del.icio.us

16 Responses

1. Posted on 26. March 2009 at 21:45

   Splengy

   
   
   
   

   great tutorial, thanks for putting this together. i was going to ask eric to simplify his ecplination a little but this pretty much clears it up.
   one detail though. i’m working in flash. cs4 FP10
   1084: Syntax error: expecting identifier before assign.
   in referance to
   var patterns:Vector. = new Vector.(|>);
   /////////////////////////////from code////////
   private function init () :void {
   // build list of FLARPatterns for FLARToolkit to detect
   var patterns:Vector. = new Vector.(|>);********THIS LINE
   patterns.push(new FLARPattern(PATTERN_PATH+”pattern.patt”, PATTERN_RESOLUTION));
   pattern = patterns[0];

   any ideas? id love to get this working.

2. Posted on 26. March 2009 at 22:21

   MarcPelland

   
   
   
   

   ** there is a line : var patterns:Vector.<FLARPattern> = new Vector.<FLARPattern>(); that isn’t displaying properly in the code block and i can’t figure it out… replace it with this previous line.

3. Posted on 27. March 2009 at 21:03

   ericsoco

   
   
   
   

   hey there,
   that line is creating a Vector of objects of type FLARPattern, using the “postfix type parameter syntax”:
   http://livedocs.adobe.com/flex/gumbo/langref/Vector.html

   not sure what the (|>) is, that’s not in my code…?

   take a look at v0.2 and let me know if there are still problems (just comment on the blog post).
   http://words.transmote.com/wp/20090327/flarmanager-v02-for-flartoolkit/

4. Posted on 28. March 2009 at 13:21

   Marc Pelland

   
   
   
   

   hey,
   that part isn’t in my code either. what is happening is my syntax highlighter on my blog is blocking the characters… if you look just below the code area I have posted the correction.

5. Posted on 5. April 2009 at 17:28

   juan_carlos

   
   
   
   

   hi marc, how´re you doing? Man, thanks for the great tutorial. On one hand, I have a small issue with the FLARManager, cause i can´t seem to make it work once I upload it to a server. I get the following error:

   Error: Error #2032: Error de secuencia. URL: ../resources/flar/FLARparams.dat
   at com.transmote.flar::FLARManager/onCameraParamsLoadError()[C:\Documents and Settings\TOSHIBA\Escritorio\FLARManager\v03\src\com\transmote\flar\FLARManager.as:324]
   at flash.events::EventDispatcher/dispatchEventFunction()
   at flash.events::EventDispatcher/dispatchEvent()
   at flash.net::URLLoader/onComplete()

   But on the other hand, when I try to use your code I get a Flex Problem:

   A file found in a source-path ‘FLARManagerExample_PV3D’ must have the same name as the class definition inside the file ‘FLARManagerTest_PV3D’

   And of course, it doesnt run. :S any suggestions? maybe something I might be doing wrong?

6. Posted on 10. April 2009 at 07:40

   Phil Croucher

   
   
   
   

   Great tutorial, I just had one comile error on line 108 of HelloFlarView.as.

   I changed the 0*000000 to 0×000000 to get it to compile.

   I just can’t get the movie to recognise my pattern – could this be a result of changing this line or jut a dodgy pattern?

   Thanks

7. Posted on 12. April 2009 at 10:22

   Sanjai

   
   
   
   

   Sweet! Very cool stuff Marc.

8. Posted on 27. March 2011 at 14:53

   wart removal

   
   
   
   

   This tutorial is great! I can easily understand what the tutorial want us to know or to learn. I hope many people will visit and see your tutorial on how to start with augmented reality flartoolkit.

9. Posted on 28. April 2011 at 03:16

   Generic Cialis

   
   
   
   

   Thank you for sharing to us.there are many person searching about that now they will find enough resources by your post.I would like to join your blog anyway so please continue sharing with us

10. Posted on 8. May 2011 at 22:45

    new york hats

    
    
    
    

    Sweet! Very cool stuff Marc.

11. Posted on 30. May 2011 at 10:15

    carpet cleaning

    
    
    
    

    Very interesting, but in the middle of this tutorial I lost the trace with those 2 links provided.

12. Posted on 17. June 2011 at 03:50

    ビラミューン

    
    
    
    

    Hi there,
    Really nice job,There are many people searching about that now they will find enough sources by your tips.
    Also looking forward for more tips about that

13. Posted on 31. July 2011 at 05:12

    Forex Broker

    
    
    
    

    I differ with most people here; I found this post I couldn’t stop until , even though it wasn’t just what I had been searching for, was indeed a great read though. I will instantly take your feed to stay in touch of future updates

14. Posted on 4. August 2011 at 04:56

    Door Knobs

    
    
    
    

    Hi there, I just wanted to say thanks for this informative post, can you please allow me to post it on my blog?

15. Posted on 26. August 2011 at 07:07

    jhu isis

    
    
    
    

    You will also need FlashDevelop or another Actionscript editing tool. In this tutorial I am going to be compiling my code directly from FlashDevelop, but feel free to use the compiler/method of your choice.

16. Posted on 5. September 2011 at 16:55

    Marnie

    
    
    
    

    Heck yeah this is ecxtaly what I needed.

Leave a Reply