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.

Page 1 Page 2 Page 3 Page 4