HomeMenu
Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

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

Example

FLARToolKit

Marker

Marker - print and hold in front of the web camera

Marker Generator

  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

Instructions

  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);
    }

Code

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