Augmented Reality – FLARToolKit Demo Reel with Source!

Thursday, March 12th, 2009 | examples

First, the lighting in my office is terrible to tests these out. Second, I should really print the marker out on card stock instead of a flimsy sheet of paper. Third, this was surprisingly fun. I wasn’t really going for performance in these demos, so I’m sure there’s room to improve.

Everything shown in the video is available for download in the links below.
Download Source (it’s a Flex Archive)
Print Marker
Download Marker Source

Also, don’t forget to join in on the fun with the “Best Augmented Reality Competition” over at the forums:

http://forum.papervision3d.org/viewtopic.php?f=21&t=35

The winner gets a copy of FDT Enterprise Edition!

Enjoy,

-JL

Tags:

  • Seb
    Very cool. I like the way you make the object persistent and track, instead of some examples I've seen where if the FLARE code cant find the symbol anymore, the object disappears (creates a flickering effect).

    The movie material using the webcam data is interesting. I guess if it was larger/higher res, you could probably get an infinity effect going ;D
  • Monkey
    SWEEEEEEEET!
  • That is wicked, thanks for the source. Will make a great starting point. I'm loving this AR stuff and the mobile capabilities.
  • Great work John!
  • wow. When I get my current project done I am going to give this a shot. That is just amazing.
  • technodai
    Awesome examples! Still can't get my movieclips to scale properly though :-( Can just see the corner of moviclip and very pixelated. Have browsed your source but can't find anything that helps!
  • John Lindquist
    Does this help:

    var material:MovieMaterial = new MovieMaterial(movieClip, false, true, false, new Rectangle(0, 0, 640, 480));
  • sweetness! augmented reality is madness...
    thanx for the sources!
  • I'm trying to understand how to get the "persistance of vision" that is happening in the video. Right now with my code, when I loose the tag my model disappears. Any tips on how to maintain the object....I suppose a timer of sorts, but any thoughts?
  • fodder
    FYI for anyone who is curious, here is how I got John's first example (BasicFLARToolKit.as)
    working in Flash (I'm using CS3):

    Step 1: Copy/download project assets to project directory.

    To keep things simple I created a new directory for the project and copied the
    following into it.

    From the BasicFLARToolKit.zip:
    /assets/flar/camera_para.dat
    /assets/flar/papervision3d_marker.pat
    /src/BasicFLARToolKit.as

    John's ToolKit contains the needed libraries (in the /libs directory) as .SWC files
    but they were created with Flex Builder and will not work in Flash CS3 (see the comments
    here: http://tinyurl.com/ctnj8j). So I just downloaded the Papervision3D and
    FLARToolKit libraries...you can get them together with this start up guide:
    http://saqoosha.net/en/flartoolkit/start-up-guide/

    From FLARToolKit-starter-kit.zip:
    /org/ (I copied the entire directory "org" into my project directory.)

    Step 2: Update BasicFLARToolKit.as.

    The only major change I needed to make was how the script imports external assets.
    "[Embed(source="..." doesn't work in Flash so I had to swap that syntax with a loader.
    Also, the assets have to be completely loaded before the setup functions run so those
    functions need to trigger off of the loading being completed. Here are the complete changes:

    Add these imports:
    ---------------------------------------------------------------------------
    import flash.net.URLLoader;
    import flash.net.URLLoaderDataFormat;
    import flash.net.URLRequest;
    ---------------------------------------------------------------------------

    Replace these lines:
    ---------------------------------------------------------------------------
    [Embed(source="../assets/flar/camera_para.dat", mimeType="application/octet-stream")]
    private var CameraParameters:Class;

    [Embed(source="../assets/flar/papervision3d_marker.pat", mimeType="application/octet-stream")]
    private var MarkerPattern:Class;
    ---------------------------------------------------------------------------

    ...with these:
    ---------------------------------------------------------------------------
    private var _cameraFileLoader:URLLoader;
    private var _cameraFile:String = "camera_para.dat"; //RENAME TO .txt TO WORK WITH MY WEB SERVER
    private var _patternFileLoader:URLLoader;
    private var _patternFile:String = "papervision3d_marker.pat"; //RENAME TO .txt TO WORK WITH MY WEB SERVER
    ---------------------------------------------------------------------------

    And replace these lines:
    ---------------------------------------------------------------------------
    private function init():void
    {
    setupFlarCamera();
    setupFlarMarker();
    setupWebcam();
    setupWebcamDisplay();
    setupFlar();
    setupPapervision3D();

    startRendering();
    }

    private function setupFlarCamera():void
    {
    cameraParameters = new FLARParam();
    cameraParameters.loadARParam(new CameraParameters() as ByteArray);
    }

    private function setupFlarMarker():void
    {
    markerPattern = new FLARCode(16, 16);
    markerPattern.loadARPatt(new MarkerPattern());
    }
    ---------------------------------------------------------------------------

    ...with these:
    ---------------------------------------------------------------------------
    private function init():void
    {
    loadCameraFile();
    }

    private function loadCameraFile():void
    {
    _cameraFileLoader = new URLLoader();
    _cameraFileLoader.dataFormat = URLLoaderDataFormat.BINARY;
    _cameraFileLoader.addEventListener(Event.COMPLETE, loadPatternFile);
    _cameraFileLoader.load(new URLRequest(_cameraFile));
    }

    private function loadPatternFile(e:Event):void
    {
    _cameraFileLoader.removeEventListener(Event.COMPLETE, loadPatternFile);
    _patternFileLoader = new URLLoader();
    _patternFileLoader.addEventListener(Event.COMPLETE, afterLoading);
    _patternFileLoader.load(new URLRequest(_patternFile));
    }

    private function afterLoading(e:Event):void
    {
    _patternFileLoader.removeEventListener(Event.COMPLETE, afterLoading);

    setupFlarCamera();
    setupFlarMarker();
    setupWebcam();
    setupWebcamDisplay();
    setupFlar();
    setupPapervision3D();

    startRendering();
    }

    private function setupFlarCamera():void
    {
    cameraParameters = new FLARParam();
    cameraParameters.loadARParam(_cameraFileLoader.data);
    }

    private function setupFlarMarker():void
    {
    markerPattern = new FLARCode(16, 16);
    markerPattern.loadARPatt(_patternFileLoader.data);
    }
    ---------------------------------------------------------------------------

    All the new variables that I added begin with an underscore so they can be easily identified.


    Step 3: Create your .fla file.

    Open Flash and create a new AS3 file.

    In the "Properties" tab make the following changes:
    Size: 640x480 pixels
    Frame rate: 30 fps
    Document Class: BasicFLARToolKit (this is case-sensitive)

    Now just save your FLA file to your project directory, make sure your webcam is on, and publish.

    I am sure this can be improved, but it's a start.
  • saul
    READ THIS:

    Just so you all know IF YOU USE THE FLARToolkit your source must be open to all unless you are willing to pay the licensing fee, up to 7K.

    For instance Seb said his recursive code was non-commercial but because he used it in the context we are speaking (and assuming he has not bought such license) that legal argument would become null and void.

    If you don't believe me ask Saqoosha or go to the google group to find out more.

    John i hope you have found a new job. All the best.
  • John Lindquist
    @saul - You really shouldn't draw conclusions on legal issues unless you're a licensed attorney practicing in the proper jurisdiction.
  • The company www.metaio.com claims the patent for augmented reality.

    As a matter of fact I saw it the first time here on this marvelous blog.

    Did www.metaio.com really invent "augmented reality"?

    John?
  • Hi John,
    very nice Stuff!
    Thanks for the SourceCode..
    Greetz from Germany
  • Ned
    @John
    Thanks for this great post, but i have a problem:
    I can`t add mouse- or interactiv3DEvents to the PV3D objects! the events dont trigger..
    In the second example you have added an event listener to the whole stage. is it possible to assign it to the sphere?
  • John Lindquist
    @Ned - read up on some of the other posts regarding enabling interactivty (enabling on the viewport, material, and adding listeners to 3d objects). Although, you'll have to do a lot of optimization to do AR and interactivity on the same swf.
  • Augusto
    hello!! sorry but my engliah its poor, i´m a brazillian programmer, and i wil try to create some pices of augmented reality, bu i need a help, i don´t now how i create the 3d pieces with papervision3d, did you have a pdf with a introduction to this? or better, can i use other format in flar toolkit / pv3d? (.wrl or swf or fla...) if i use swf, how i change the code? thanks....
  • Shung Wu
    Excellent Post! It's very helpful for me to get into the FLARToolkit. However, could you provide an example how to put a Google 3d Warehouse model into your example. Thanks a lot.
  • @Shung Wu - PV3D can import .kmz file natively, very similar to other formats (.dae, etc)

    Here's a little snippet playing around with a simple cylinder created and textured in Sketch-Up, and exported as .kmz http://snipt.org/lUp
  • Shung Wu
    SamBrown, Thanks for your information. But I mean to put .kmz file in Flash VR (FLARToolkit), not in Flash 3D (Papervison 3D). Any idea about that?
  • @Shung Wu - unfortunately can't shed any light on using .kmz's with the FLARtoolkit, I've only used .dea/COLLADA's
  • Tom
    Hi All,
    I'm trying to get this to run in flashdevelop.

    I've added the swc files to the libary set export mode to flash player 10 and am getting the following errors when trying to build

    C:\tomdev\AugmentedReality\BasicFLARToolKit_FlashDevelop\src\BasicFLARToolKit5.as(36): col: 41 Error: The definition of base class BasicView
    was not found.


    I have pointed it at flex sdk etc just am not sure.. has anyone else had this problem?
    Cheers,
    Tom
  • I saw PV3d import to save Kmz file. But, how can i use it?
  • Martijn
    Hi All,

    How can I put my own 3D model in it? So how can I replace for example the arrows with my own 3D model?

    Thankss
blog comments powered by Disqus

Preferred Video Tutorial Resolution

  • 1024x768 (53%, 85 Votes)
  • 1280x1024 (15%, 24 Votes)
  • 1920x1080 (15%, 24 Votes)
  • 800x600 (13%, 20 Votes)
  • 480x320 (4%, 6 Votes)
  • 640x480 (0%, 2 Votes)

Total Voters: 160

Loading ... Loading ...

Search

Recommended Books

 

March 2009
M T W T F S S
« Feb   Apr »
 1
2345678
9101112131415
16171819202122
23242526272829
3031