lOOney dOOdle

FLAR Manager, Multi Marker Multi Collada

25 Apr 2010 6 Comments

by lOOney dOOdlein College, Tips Tags: 3D, 3D Studio, AR Toolkit, Augmented Reality, FLARManager, Marker

Marker

I ve been toying around with Augmented Reality a lot lately. I came across FLARManager which is the easiest way to implement AR. Somehow i haven’t found any code out there till now that displays multiple collada files on multiple markers. So, here is my implementation of the concept.

package {

import com.transmote.flar.FLARManager;

import com.transmote.flar.marker.FLARMarker;

import com.transmote.flar.marker.FLARMarkerEvent;

import com.transmote.flar.utils.geom.FLARPVGeomUtils;

import flash.display.Sprite;

import flash.events.Event;

import org.libspark.flartoolkit.support.pv3d.FLARCamera3D;

import org.papervision3d.lights.PointLight3D;

import org.papervision3d.objects.DisplayObject3D;

import org.papervision3d.objects.parsers.DAE;

import org.papervision3d.render.LazyRenderEngine;

import org.papervision3d.scenes.Scene3D;

import org.papervision3d.view.Viewport3D;

public class MultiMarkerMultiDae extends Sprite {

private var flarManager:FLARManager;

private var scene3D:Scene3D;

private var camera3D:FLARCamera3D;

private var viewport3D:Viewport3D;

private var renderEngine:LazyRenderEngine;

private var pointLight3D:PointLight3D;

private var activeMarker1:FLARMarker;

private var activeMarker2:FLARMarker;

private var activeMarker3:FLARMarker;

private var activeMarker:FLARMarker;

private var modelContainer:DisplayObject3D;

private var modelContainer1:DisplayObject3D;

private var modelContainer3:DisplayObject3D;

private var markerId:int;

public function MultiMarkerMultiDae ()

{

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

this.flarManager = new FLARManager("flar/flarConfig.xml");

// 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 Papervision3D 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();

// initialize FLARCamera3D with parsed camera parameters.

this.camera3D = new FLARCamera3D(this.flarManager.cameraParams);

this.viewport3D = new Viewport3D(this.stage.stageWidth, this.stage.stageHeight);

this.addChild(this.viewport3D);

this.renderEngine = new LazyRenderEngine(this.scene3D, this.camera3D, this.viewport3D);

this.pointLight3D = new PointLight3D();

this.pointLight3D.x = 1000;

this.pointLight3D.y = 1000;

this.pointLight3D.z = -1000;

// load the model.

// (this model has to be scaled and rotated to fit the marker; every model is different.)

var model1:DAE = new DAE(true, "model1", true);

model1.load("assets/model4.dae");

model1.rotationX = 0;

model1.rotationY = 0;

model1.rotationZ = 0;

model1.scale = 10;

// load the model.

// (this model has to be scaled and rotated to fit the marker; every model is different.)

var model2:DAE = new DAE(true, "model2", true);

model2.load("assets/model4.dae");

trace("model4 loaded");

model2.rotationX = 0;

model2.rotationY= 0;

model2.rotationZ = 0;

model2.scale = 10;

// load the model.

// (this model has to be scaled and rotated to fit the marker; every model is different.)

var model3:DAE = new DAE(true, "model3", true);

model3.load("assets/model4.dae");

model3.rotationX = 0;

model3.rotationY= 0;

model3.rotationZ = 0;

model3.scale = 10;

// // create a container for the model, that will accept matrix transformations.

// create a container for the model, that will accept matrix transformations.

this.modelContainer = new DisplayObject3D();

this.modelContainer.addChild(model1);

this.modelContainer.visible = false;

this.scene3D.addChild(this.modelContainer);

this.modelContainer1 = new DisplayObject3D();

this.modelContainer1.addChild(model2);

this.modelContainer1.visible = false;

this.scene3D.addChild(this.modelContainer1);

this.modelContainer3 = new DisplayObject3D();

this.modelContainer3.addChild(model3);

this.modelContainer3.visible = false;

this.scene3D.addChild(this.modelContainer3);

//------------------------------------------------------------------------- ---------

this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame);

}

private function onMarkerAdded (evt:FLARMarkerEvent) :void

{

trace("["+evt.marker.patternId+"] added");

if(evt.marker.patternId == 1)

{

trace("Pattern 1 Added");

markerAdded(1);

this.activeMarker1 = evt.marker;

}

if(evt.marker.patternId == 2)

{

trace("Pattern 2 Added");

markerAdded(2);

this.activeMarker2 = evt.marker;

}

if(evt.marker.patternId == 3)

{

trace("Pattern 3 Added");

markerAdded(3);

this.activeMarker3 = evt.marker;

}

this.activeMarker = evt.marker;

}

private function onMarkerUpdated (evt:FLARMarkerEvent) :void

{

trace("["+evt.marker.patternId+"] updated");

if(evt.marker.patternId == 1)

{

trace("Pattern 1 Updated");

markerAdded(1);

this.activeMarker1 = evt.marker;

}

if(evt.marker.patternId == 2)

{

trace("Pattern 2 Updated");

markerAdded(2);

this.activeMarker2 = evt.marker;

}

if(evt.marker.patternId == 3)

{

trace("Pattern 3 Updated");

markerAdded(3);

this.activeMarker3 = evt.marker;

}

}

private function onMarkerRemoved (evt:FLARMarkerEvent) :void {

trace("["+evt.marker.patternId+"] removed");

if(evt.marker.patternId == 1)

{

trace("Pattern 1 Removed");

markerRemoved(1);

}

if(evt.marker.patternId == 2)

{

trace("Pattern 2 Removed");

markerRemoved(2);

}

if(evt.marker.patternId == 3)

{

trace("Pattern 3 Removed");

markerRemoved(3);

}

this.activeMarker = null;

this.activeMarker1 = null;

this.activeMarker2 = null;

this.activeMarker3 = null;

}

private function onEnterFrame (evt:Event) :void {

// apply the FLARToolkit transformation matrix to the Cube.

if (this.activeMarker) {

this.modelContainer.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(this.activeMarker.transformMatrix);

}

if (this.activeMarker1) {

this.modelContainer.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(this.activeMarker1.transformMatrix);

}

if (this.activeMarker2) {

this.modelContainer1.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(this.activeMarker2.transformMatrix);

}

if (this.activeMarker3) {

this.modelContainer3.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(this.activeMarker3.transformMatrix);

}

// // apply the FLARToolkit transformation matrix to the Cube.

this.renderEngine.render();

}

//EVENTS FOR ADDED MARKER

private function markerAdded(markerId:int):void

{

trace(markerId);

var x:int = markerId;

switch(x)

{

case 1:

{

trace("1 Yeah");

if(modelContainer1.visible==false)

{

modelContainer1.visible=true;

break;

}

else

break;

}

case 2:

{

if(modelContainer.visible==false)

{

modelContainer.visible=true;

break;

}

else

break;

}

case 3:

{

trace("1 Yeah");

if(modelContainer3.visible==false)

{

modelContainer3.visible=true;

break;

}

else

break;

}

}

}

private function markerRemoved(markerId:int):void

{

var x:int = markerId;

switch(x)

{

case 1:

{

if(modelContainer1.visible==true)

{

modelContainer1.visible=false;

break;

}

else

break;

}

case 2:

{

if(modelContainer.visible==true)

{

modelContainer.visible=false;

break;

}

else

{

break;

}

}

case 3:

{

if(modelContainer3.visible==true)

{

modelContainer3.visible=false;

break;

}

else

break;

}

}

}

}

}

Just link back to me if you use this code. Here is the example of how the code works. Download the marker here.

If it does not load, click here.

Previous Toy Design Class Research (Week 2) Next FLAR Manager – Project file for Multiple Markers loading Multiple Collada files

6 Comments (+add yours?)

1. rie
   Apr 27, 2010 @ 04:05:14

   much be more than 1 camera?
   nice… thk

2. lOOney dOOdle
   Apr 27, 2010 @ 16:42:45

   More than 1 camera from the Collada file? or inside FLAR?

3. Rachel
   Jul 27, 2010 @ 11:08:24

   Hi I tried you code but it came u with this error:

   (18): col: 5 Error: The public attribute can only be used inside a package.
   public class FLARManagerTutorial_Collada extends Sprite

   I am new to FLARManager acutally all AR but is there anyway to fix this?
   Thanks Rachel

4. lOOney dOOdle
   Aug 04, 2010 @ 03:12:33

   @Rachel AS3 does not allow you to have public attributes inside a package. Check your code to see if you accidentally defined an object outside a package.

5. Rachel
   Aug 06, 2010 @ 14:38:29

   @ IOOney dOOdle Hey thanks for your help I have got it now =]

6. lOOney dOOdle
   Aug 11, 2010 @ 16:22:42

   Glad it worked out for you.