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:

  • john baldy
    john did u fart??
  • Atis crerbrum
    Бугага! Чувак, ты жжошь!!!
  • 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
  • I saw PV3d import to save Kmz file. But, how can i use it?
  • 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
  • @Shung Wu - unfortunately can't shed any light on using .kmz's with the FLARtoolkit, I've only used .dea/COLLADA's
  • 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 - 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
    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.
  • 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....
  • 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.
  • Hi John,
    very nice Stuff!
    Thanks for the SourceCode..
    Greetz from Germany
  • 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?
  • 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.
  • 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.
  • thanks for the flash convertion fodder!
    it's very usefull to me!

    but....

    WHY IT DOESN'T WORKS?!!

    i really would to do it in flash to not have to learn flex... if you can enlight me...
  • 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?
  • sweetness! augmented reality is madness...
    thanx for the sources!
  • John Lindquist
    Does this help:

    var material:MovieMaterial = new MovieMaterial(movieClip, false, true, false, new Rectangle(0, 0, 640, 480));
  • 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!
  • wow. When I get my current project done I am going to give this a shot. That is just amazing.
  • Great work John!
  • That is wicked, thanks for the source. Will make a great starting point. I'm loving this AR stuff and the mobile capabilities.
  • Monkey
    SWEEEEEEEET!
  • 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
blog comments powered by Disqus

Search

Recommended Books

Speaking at FITC Toronto

 

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

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 ...