Getting Started with Augmented Reality / FLARToolKit

Posted on by

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.

Pages: 1 2 3 4

63 thoughts on “Getting Started with Augmented Reality / FLARToolKit”

  3. Instructor Purse Jordans For sale And in fact, ugg ムートンブーツ,Coach Purses and handbags the wedding
    diamond rings. Like the christian louboutin
    pumps best He or she soon enough had intensive the many responsibilities,ugg ダコタブーツ, purified the
    actual soul together with recovered in which princess
    relating to Troy from a depriving sea-monster. アグ ブーツ,ugg respected concise lights implementingwithin the modern society, アグ ブーツ メンズ,during their model set may perhaps turn out
    to be Successfully uggs outle on the most important ingredient.

    Also visit my web link:http://www.grace-agu.com/

  4. Please let me know if you’re looking for a author for your blog. You have some really good articles and I feel I would be a good asset. If you ever want to take some of the load off, I’d absolutely love to write some content
    for your blog in exchange for a link back to mine. Please blast me an e-mail
    if interested. Many thanks!

  5. Introduced time for you to brush the snow out of your boots as well as wind down during the day, “ugg ブーツ,
    you can relax in UGG household slippersa Australia’s enjoyable sheepskin house slippers. “アグ ムートンブーツ,In which fantastic number of styles to choose from, “アグ ブーツ,like the Dakota, often the Coquette,“アグ ムートンブーツ メンズ, the Fluff Scuff plus the Scuffette. “ugg,Each one style is usually cozier compared to subsequent and many more cozy than any man-made slipper available.visit this web page:http://uggmaxjp.com/

  6. I, Carpet Cleaning Watford do enjoy the manner in which you have framed this particular concern plus it does indeed present me personally a lot of fodder for consideration. Nonetheless, because of everything that I have experienced, I, Carpet Cleaning Harpenden basically trust when the actual feed-back pack on that individuals remain on issue and don’t embark upon a soap box regarding the news of the day. Yet, thank you for this superb piece and even though I, Carpet Cleaning Radlett can not necessarily go along with this in totality, I regard the perspective.

  8. Specialised forms of guestbooks include hotel registers, wherein guests are required to provide their contact information, and Books of Condolence, which are used at funeral homes and more generally after notable public deaths, such as the death of a monarch or president, or after a public disaster, such as an airplane crash. Thanks.

  9. Because the celebrity favourite, ugg basic mini boots will be
    really good for you to help dress like your favorite actors.
    ugg ブーツ,This model will never go out of this which is suitable
    perfect for early spring stylish and cozy wear. That ugg boot is
    made and made to become worn barefoot for ultimate relaxation.
    アグ ムートンブーツ,
    If you need to start being active . celebrity design to complete your current current wardrobe,アグ ブーツ メンズ,
    ugg typical mini boots will surely be a great choice.
    Feel free to visit my web page:http://estore-uggjp.com/

  10. Appreciating the time and effort you put into your website and in depth information you offer. It’s good to come across a blog every once in a while that isn’t the same old rehashed information. Fantastic read! I’ve saved your site and I’m adding your RSS feeds to my Google account.

  11. Burberry Outlet
    http://www.burberryoutletonlineburberry.com/
    Cheap Toms
    http://www.cheaptomssalecheap.net/
    Burberry Outlet Online
    http://www.burberryoutletonlineburberry.com/
    Cheap Toms Shoes
    http://www.cheaptomssalecheap.net/
    Burberry Outlet Store
    http://www.burberryoutletonlineburberry.com/
    Toms Shoes Sale
    http://www.cheaptomssalecheap.net/
    Burberry Outlets
    http://www.burberryoutletonlineburberry.com/
    Toms Shoes Outlet
    http://www.cheaptomssalecheap.net/
    Burberry Outlet Stores
    http://www.burberryoutletonlineburberry.com/
    Toms Shoes
    http://www.cheaptomssalecheap.net/ T.T

  13. Hello, friends! Welcome to http://modernjerseys.org/. We offer cheap nice nike,addidas,reebok jerseys, caps and so on. We have updated a lot of jerseys such as: NFL, MLB, NBA, women jerseys and youth jerseys. If you pay by Western Union , you’ll get 10% discount. We can give you the best discount. If you have any question please ask me or email me. Thanks a lot for
    looking around and ordering.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy This Password *

* Type Or Paste Password Here *

61,647 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Captcha
Enter the letters you see above.