FLARManager v1.1 (FLARToolkit + Away3D) + FlashDevelop = Multi Marker & Collada

Setelah menunggu 2 bulan sejak versi terakhirnya FLARManager v1.0.4 yang masih banyak bug (terutama sangat terasa pada fitur mirrorDisplay yang saat itu hanya mencerminkan video dari kamera saja tanpa mencerminkan objek 3D-nya), akhirnya di bulan Januari yang lalu kembali ada update menjadi FLARManager v.1.1.0. Pada FLARManager v1.1.0 ini ada perbedaan yang sangat mendasar dari versi-versi sebelumnya, yaitu diubahnya sebagian besar contoh kode untuk menampilkan objek 3D yang pada awalnya menggunakan engine Papervision3D menjadi menggunakan engine Away3D.


Berkaitan dengan pekerjaan saya tentang Augmented Reality yang salah satu fiturnya yaitu harus dapat menampilkan objek 3D yang berbeda-beda untuk tiap marker yang berbeda-beda pula, maka saya modifikasi file contoh standar yang awalnya hanya menampilkan satu objek COLLADA pada marker menggunakan FLARManager v1.1, FLARToolkit, dan Away3D (FLARManagerTutorial_Collada_Away3D.as). Metode untuk melakukannya saya adaptasikan dari kode milik lOOney dOOdle pada link ini yang masih menggunakan Papervision3D sebagai Flash 3D engine (dan FLARManager versi sebelumnya), sedemikian sehingga file hasil modifikasinya (MultiMarkerMultiCollada.as) menjadi seperti ini:

package examples {
 import away3d.animators.Animator;
 import away3d.animators.BonesAnimator;
 import away3d.containers.ObjectContainer3D;
 import away3d.containers.Scene3D;
 import away3d.containers.View3D;
 import away3d.core.utils.Cast;
 import away3d.events.Loader3DEvent;
 import away3d.lights.DirectionalLight3D;
 import away3d.loaders.AbstractParser;
 import away3d.loaders.Collada;
 import away3d.loaders.Loader3D;
 import away3d.loaders.utils.AnimationLibrary;
 import away3d.materials.BitmapMaterial;
 
 import com.transmote.flar.FLARManager;
 import com.transmote.flar.camera.FLARCamera_Away3D;
 import com.transmote.flar.camera.FLARCamera_PV3D;
 import com.transmote.flar.marker.FLARMarker;
 import com.transmote.flar.marker.FLARMarkerEvent;
 import com.transmote.flar.tracker.FLARToolkitManager;
 import com.transmote.flar.utils.geom.AwayGeomUtils;
 
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.geom.Rectangle;
 import flash.geom.Vector3D;
 import flash.utils.getTimer;
 
 
 /**
  * This file (MultiMarkerMultiCollada.as) is modification of the standard
  * example file to display collada-formatted model using FLARManager v1.1,
  * FLARToolkit, and Away3D (FLARManagerTutorial_Collada_Away3D.as) authored 
  * by Eric Socolofsky (http://transmote.com/flar). The collada model used 
  * for this example (mario_testrun.dae) comes from Away3D's examples.
  * 
  * The method to display multiple colladas on multiple markers is derived
  * from a code to display multiple colladas on multiple markers using 
  * previous version of FLARManager, FLARToolkit, and Papervision3D
  * (http://www.looneydoodle.com/MultiMarkerMultiCollada.zip) authored by
  * Arunram Kalaiselvan aka lOOney dOOdle (http://www.looneydoodle.com/).
  * 
  * @author Fathah Noor Prawita
  * @url  http://blog.fathah.net
  */
 
 public class MultiMarkerMultiCollada extends Sprite {
  private var flarManager:FLARManager;
  
  private var view:View3D;
  private var camera3D:FLARCamera_Away3D;
  private var scene3D:Scene3D;
  private var light:DirectionalLight3D;
  
  private var activeMarker:FLARMarker;
  private var activeMarker1:FLARMarker;
  private var activeMarker2:FLARMarker;
  
  private var modelLoader:Loader3D;
  
  private var modelContainer:ObjectContainer3D;
  private var modelContainer1:ObjectContainer3D;
  private var modelContainer2:ObjectContainer3D;
  
  private var modelAnimator:BonesAnimator;
  private var modelAnimator1:BonesAnimator;
  private var modelAnimator2:BonesAnimator;
  
  // texture file for mario
  [Embed(source="../../resources/assets/mario_tex_red-blue.jpg")]
  private var MarioTextureRedBlue:Class;
  
  [Embed(source="../../resources/assets/mario_tex_green-red.jpg")]
  private var MarioTextureGreenRed:Class;
  
  [Embed(source="../../resources/assets/mario_tex_blue-green.jpg")]
  private var MarioTextureBlueGreen:Class;
  
  // collada file for mario
  [Embed(source="../../resources/assets/mario_testrun.dae",mimeType="application/octet-stream")]
  private var MarioDae:Class;
  
    
  public function MultiMarkerMultiCollada () {
   this.addEventListener(Event.ADDED_TO_STAGE, this.onAdded);
  }
  
  private function onAdded (evt:Event) :void {
   this.removeEventListener(Event.ADDED_TO_STAGE, this.onAdded);
   
   // pass the path to the FLARManager xml config file into the FLARManager constructor.
   // FLARManager creates and uses a FLARCameraSource by default.
   // the image from the first detected camera will be used for marker detection.
   // also pass an IFLARTrackerManager instance to communicate with a tracking library,
   // and a reference to the Stage (required by some trackers).
   this.flarManager = new FLARManager("../resources/flar/flarConfig.xml", new FLARToolkitManager(), this.stage);
   
   // to switch tracking engines, pass a different IFLARTrackerManager into FLARManager.
   // refer to this page for information on using different tracking engines:
   // http://words.transmote.com/wp/inside-flarmanager-tracking-engines/
   //   this.flarManager = new FLARManager("../resources/flar/flarConfig.xml", new FlareManager(), this.stage);
   //   this.flarManager = new FLARManager("../resources/flar/flarConfig.xml", new FlareNFTManager(), this.stage);
   
   // add FLARManager.flarSource to the display list to display the video capture.
   this.addChild(Sprite(this.flarManager.flarSource));
   
   // begin listening for FLARMarkerEvents.
   this.flarManager.addEventListener(FLARMarkerEvent.MARKER_ADDED, this.onMarkerAdded);
   this.flarManager.addEventListener(FLARMarkerEvent.MARKER_UPDATED, this.onMarkerUpdated);
   this.flarManager.addEventListener(FLARMarkerEvent.MARKER_REMOVED, this.onMarkerRemoved);
   
   // wait for FLARManager to initialize before setting up Away3D environment.
   this.flarManager.addEventListener(Event.INIT, this.onFlarManagerInited);
  }
  
  private function onFlarManagerInited (evt:Event) :void {
   this.flarManager.removeEventListener(Event.INIT, this.onFlarManagerInited);
   
   this.scene3D = new Scene3D();
   this.camera3D = new FLARCamera_Away3D(this.flarManager, new Rectangle(0, 0, this.stage.stageWidth, this.stage.stageHeight));
   this.view = new View3D({x:0.5*this.stage.stageWidth, y:0.5*this.stage.stageHeight, scene:this.scene3D, camera:this.camera3D});
   this.addChild(this.view);
   
   this.light = new DirectionalLight3D();
   this.light.direction = new Vector3D(500, -300, 200);
   this.scene3D.addLight(light);
   
   
   //--------------------------------------3D-Model----
   var collada:Collada = new Collada();
   collada.scaling = 10;
   var model:ObjectContainer3D = collada.parseGeometry(MarioDae) as ObjectContainer3D;
   model.materialLibrary.getMaterial("FF_FF_FF_mario1").material = new BitmapMaterial(Cast.bitmap(MarioTextureRedBlue));
   model.mouseEnabled = false;
   model.rotationX = 90;
   this.modelAnimator = model.animationLibrary.getAnimation("default").animator as BonesAnimator;
   
   // create a container for the model, that will accept matrix transformations.
   this.modelContainer = new ObjectContainer3D();
   this.modelContainer.addChild(model);
   this.modelContainer.visible = false;
   this.scene3D.addChild(this.modelContainer);
   
   
   //--------------------------------------3D-Model----
   var collada1:Collada = new Collada();
   collada1.scaling = 10;
   var model1:ObjectContainer3D = collada1.parseGeometry(MarioDae) as ObjectContainer3D;
   model1.materialLibrary.getMaterial("FF_FF_FF_mario1").material = new BitmapMaterial(Cast.bitmap(MarioTextureGreenRed));
   model1.mouseEnabled = false;
   model1.rotationX = 90;
   this.modelAnimator1 = model1.animationLibrary.getAnimation("default").animator as BonesAnimator;
   
   // create a container for the model, that will accept matrix transformations.
   this.modelContainer1 = new ObjectContainer3D();
   this.modelContainer1.addChild(model1);
   this.modelContainer1.visible = false;
   this.scene3D.addChild(this.modelContainer1);
   
   
   //--------------------------------------3D-Model----
   var collada2:Collada = new Collada();
   collada2.scaling = 10;
   var model2:ObjectContainer3D = collada2.parseGeometry(MarioDae) as ObjectContainer3D;
   model2.materialLibrary.getMaterial("FF_FF_FF_mario1").material = new BitmapMaterial(Cast.bitmap(MarioTextureBlueGreen));
   model2.mouseEnabled = false;
   model2.rotationX = 90;
   this.modelAnimator2 = model2.animationLibrary.getAnimation("default").animator as BonesAnimator;
   
   // create a container for the model, that will accept matrix transformations.
   this.modelContainer2 = new ObjectContainer3D();
   this.modelContainer2.addChild(model2);
   this.modelContainer2.visible = false;
   this.scene3D.addChild(this.modelContainer2);
   
   
   
   this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame);
  }
  
  private function onMarkerAdded (evt:FLARMarkerEvent) :void {
   trace("[" + evt.marker.patternId + "] added");
   
   if (evt.marker.patternId == 0) {
    markerAdded(0);
    this.activeMarker = evt.marker;
   }
   
   if (evt.marker.patternId == 1) {
    markerAdded(1);
    this.activeMarker1 = evt.marker;
   }
   
   if (evt.marker.patternId == 2) {
    markerAdded(2);
    this.activeMarker2 = evt.marker;
   }
  }
  
  private function onMarkerUpdated (evt:FLARMarkerEvent) :void {
   trace("[" + evt.marker.patternId + "] updated");
   
   if (evt.marker.patternId == 0) {
    markerAdded(0);
    this.activeMarker = evt.marker;
   }
   
   if (evt.marker.patternId == 1) {
    markerAdded(1);
    this.activeMarker1 = evt.marker;
   }
   
   if (evt.marker.patternId == 2) {
    markerAdded(2);
    this.activeMarker2 = evt.marker;
   }
  }
  
  private function onMarkerRemoved (evt:FLARMarkerEvent) :void {
   trace("[" + evt.marker.patternId + "] removed");
   
   if (evt.marker.patternId == 0) {
    markerRemoved(0);
   }
   
   if (evt.marker.patternId == 1) {
    markerRemoved(1);
   }
   
   if (evt.marker.patternId == 2) {
    markerRemoved(2);
   }
   
   this.activeMarker = null;
   this.activeMarker1 = null;
   this.activeMarker2 = null;
  }
  
  private function onEnterFrame (evt:Event) :void {
   // apply the FLARToolkit transformation matrix to the Cube.
   if (this.activeMarker) {
    this.modelContainer.transform = AwayGeomUtils.convertMatrixToAwayMatrix(this.activeMarker.transformMatrix);
   }
   
   if (this.activeMarker1) {
    this.modelContainer1.transform = AwayGeomUtils.convertMatrixToAwayMatrix(this.activeMarker1.transformMatrix);
   }
   
   if (this.activeMarker2) {
    this.modelContainer2.transform = AwayGeomUtils.convertMatrixToAwayMatrix(this.activeMarker2.transformMatrix);
   }
   
   // update the animation and Away3D view.
   if (this.modelAnimator) {
    this.modelAnimator.update(getTimer() * .005);
   }
   
   if (this.modelAnimator1) {
    this.modelAnimator1.update(getTimer() * .005);
   }
   
   if (this.modelAnimator2) {
    this.modelAnimator2.update(getTimer() * .005);
   }
   this.view.render();
  }
  
  private function markerAdded(markerId:int):void {
   switch(markerId) {
    case 0: {
     if (modelContainer.visible == false) {
      modelContainer.visible = true;
      break;
     } else {
      break;
     }
    }
    case 1: {
     if (modelContainer1.visible == false) {
      modelContainer1.visible = true;
      break;
     } else {
      break;
     }
    }
    case 2: {
     if (modelContainer2.visible == false) {
      modelContainer2.visible = true;
      break;
     } else {
      break;
     }
    }
   }
  }
  
  private function markerRemoved(markerId:int):void {
   switch(markerId) {
    case 0: {
     if (modelContainer.visible == true) {
      modelContainer.visible = false;
      break;
     } else {
      break;
     }
    }
    case 1: {
     if (modelContainer1.visible == true) {
      modelContainer1.visible = false;
      break;
     } else {
      break;
     }
    }
    case 2: {
     if (modelContainer2.visible == true) {
      modelContainer2.visible = false;
      break;
     } else {
      break;
     }
    }
   }
  }
 }
}

Untuk langsung mencobanya, silakan print marker-1, marker-2, dan marker3, kemudian buka link ini. Jika Flash meminta izin untuk mengakses webcam, tekan "Allow" saja. Arahkan marker yang tadi telah diprint ke depan webcam.

Bagi yang biasa menggunakan FlashDevelop, file proyeknya dapat dapat didownload di link ini. Semoga bermanfaat.