FLARToolKit

osbo.com | Flash | FLARToolKit

FLARToolKit is an augmented reality library for the Adobe Flash Platform.

It displays 3D animation over a web camera image. A marker is held in front of the web camera to determine the location for the animation.

Note: add "libs\NyARTookKitAS3\src" as a classpath in later revisions of FLARToolKit

Marker - print and hold in front of the web camera

1. Open Photoshop or preferred image editing software
2. Create 80mm x 80mm black square
3. Create 40mm x 40mm white square
4. Create asymmetrical black shape
5. Save marker image
6. Print marker image
7. Install Marker Generator - creates .pat file
8. Open Marker Generator
9. Hold marker image in front of web camera
10. Click Save Pattern

1. Import Flash

   import flash.display.BitmapData;
   import flash.events.Event;
   import flash.media.Camera;
   import flash.media.Video;

2. Import FLARToolKit

   import org.libspark.flartoolkit.core.FLARCode;
   import org.libspark.flartoolkit.core.param.FLARParam;
   import org.libspark.flartoolkit.core.raster.rgb.FLARRgbRaster_BitmapData;
   import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
   import org.libspark.flartoolkit.detector.FLARSingleMarkerDetector;
   import org.libspark.flartoolkit.support.pv3d.FLARBaseNode;
   import org.libspark.flartoolkit.support.pv3d.FLARCamera3D;

3. Import Papervision3D - edit to create a different Papervision3D animation

   import org.papervision3d.materials.ColorMaterial;
   import org.papervision3d.materials.WireframeMaterial;
   import org.papervision3d.materials.special.CompositeMaterial;
   import org.papervision3d.objects.primitives.PaperPlane;
   import org.papervision3d.view.BasicView;

4. Embed parameter data

   [Embed(source="parameter.dat", mimeType="application/octet-stream")]
   private var Parameter :Class;

5. Embed marker pattern

   [Embed(source="marker.pat", mimeType="application/octet-stream")]
   private var Marker :Class;

6. Declare variables

   private var video      :Video;
   private var bitmapData :BitmapData;
   
   private var raster   :FLARRgbRaster_BitmapData;
   private var detector :FLARSingleMarkerDetector;
   private var result   :FLARTransMatResult;
   private var cam      :FLARCamera3D;
   private var base     :FLARBaseNode;

7. Declare and initialize constants

   private static const WIDTH  :uint = 640;
   private static const HEIGHT :uint = 480;

8. Set viewport width, height, and do not resize

   super(WIDTH, HEIGHT, false);

9. Initialize web camera, set width and height to smaller size for faster animation, and set frames per second

   var webcam :Camera = Camera.getCamera();
   webcam.setMode(WIDTH * 0.5, HEIGHT * 0.5, 30);

10. Initialize video, attach web camera, and add video

    video = new Video(WIDTH, HEIGHT);
    video.attachCamera(webcam);
    addChildAt(video, getChildIndex(viewport));

11. Initialize and draw still image

    bitmapData = new BitmapData(WIDTH, HEIGHT, false);
    bitmapData.draw(video);

12. Initialize and load parameter data

    var parameter :FLARParam = new FLARParam();
    parameter.loadARParam(new Parameter());

13. Initialize and load marker pattern

    var marker :FLARCode = new FLARCode(16, 16);
    marker.loadARPatt(new Marker());

14. Initialize augmented reality raster, detector, result, camera, base, and add base to scene

    raster   = new FLARRgbRaster_BitmapData(bitmapData);
    detector = new FLARSingleMarkerDetector(parameter, marker, 80);
    result   = new FLARTransMatResult();
    cam      = new FLARCamera3D(parameter);
    base     = new FLARBaseNode();
    scene.addChild(base);

15. Papervision3D paper plane - edit to create a different Papervision3D animation

    var material :CompositeMaterial = new CompositeMaterial();
    material.doubleSided = true;
    material.addMaterial(new ColorMaterial(0x000000, 0.5));
    material.addMaterial(new WireframeMaterial(0x000000));
    
    var object :PaperPlane = new PaperPlane(material);
    object.rotationX = 90;
    object.rotationZ = -90;
    base.addChild(object);

16. Listen each frame

    startRendering();

17. Handle each frame

    override protected function onRenderTick(e:Event=null):void {}

18. Draw still image

    bitmapData.draw(video);

19. Detect marker and render if above specified confidence

    if (detector.detectMarkerLite(raster, 80) && (0.5 < detector.getConfidence())) {
        detector.getTransformMatrix(result);
        base.setTransformMatrix(result);
    
        renderer.renderScene(scene, cam, viewport);
    }

package 
{
    import flash.display.BitmapData;
    import flash.events.Event;
    import flash.media.Camera;
    import flash.media.Video;

    import org.libspark.flartoolkit.core.FLARCode;
    import org.libspark.flartoolkit.core.param.FLARParam;
    import org.libspark.flartoolkit.core.raster.rgb.FLARRgbRaster_BitmapData;
    import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
    import org.libspark.flartoolkit.detector.FLARSingleMarkerDetector;
    import org.libspark.flartoolkit.support.pv3d.FLARBaseNode;
    import org.libspark.flartoolkit.support.pv3d.FLARCamera3D;

    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.WireframeMaterial;
    import org.papervision3d.materials.special.CompositeMaterial;
    import org.papervision3d.objects.primitives.PaperPlane;
    import org.papervision3d.view.BasicView;

    public class FLARToolKit extends BasicView
    {
        [Embed(source="parameter.dat", mimeType="application/octet-stream")]
        private var Parameter :Class;

        [Embed(source="marker.pat", mimeType="application/octet-stream")]
        private var Marker :Class;

        private var video      :Video;
        private var bitmapData :BitmapData;

        private var raster   :FLARRgbRaster_BitmapData;
        private var detector :FLARSingleMarkerDetector;
        private var result   :FLARTransMatResult;
        private var cam      :FLARCamera3D;
        private var base     :FLARBaseNode;

        private static const WIDTH  :uint = 640;
        private static const HEIGHT :uint = 480;

        public function FLARToolKit()
        {
            super(WIDTH, HEIGHT, false);

            var webcam :Camera = Camera.getCamera();
            webcam.setMode(WIDTH * 0.5, HEIGHT * 0.5, 30);

            video = new Video(WIDTH, HEIGHT);
            video.attachCamera(webcam);
            addChildAt(video, getChildIndex(viewport));

            bitmapData = new BitmapData(WIDTH, HEIGHT, false);
            bitmapData.draw(video);

            var parameter :FLARParam = new FLARParam();
            parameter.loadARParam(new Parameter());

            var marker :FLARCode = new FLARCode(16, 16);
            marker.loadARPatt(new Marker());

            raster   = new FLARRgbRaster_BitmapData(bitmapData);
            detector = new FLARSingleMarkerDetector(parameter, marker, 80);
            result   = new FLARTransMatResult();
            cam      = new FLARCamera3D(parameter);
            base     = new FLARBaseNode();
            scene.addChild(base);

            var material :CompositeMaterial = new CompositeMaterial();
            material.doubleSided = true;
            material.addMaterial(new ColorMaterial(0x000000, 0.5));
            material.addMaterial(new WireframeMaterial(0x000000));

            var object :PaperPlane = new PaperPlane(material);
            object.rotationX = 90;
            object.rotationZ = -90;
            base.addChild(object);

            startRendering();
        }

        override protected function onRenderTick(e:Event=null):void
        {
            bitmapData.draw(video);

            if (detector.detectMarkerLite(raster, 80) && (0.5 < detector.getConfidence())) {
                detector.getTransformMatrix(result);
                base.setTransformMatrix(result);

                renderer.renderScene(scene, cam, viewport);
            }
        }
    }
}

Download