Code Answer: AS3 DAE Augmented Reality PaperVision 3D

I have been playing with Augmented Reality recently (and having lots of fun with it too!!) I have been able to create PaperVision primitives (cube, cylinder, cone, etc.. and work with them) But adding a DAE model is proving to be illusive!

var cubeMaterialList:MaterialsList = new MaterialsList( { all: new FlatShadeMaterial(light, 0x0099FF, 0x0066AA) } );

            var cube:Cube = new Cube(cubeMaterialList,
                                     30,
                                     30,
                                     30);

            cube.z += 15;

            mainContainer.addChild(cube);

This all works fine!

I am using this to import/attempt to import a dae!

private var mCollada:Collada;
private var universe:DisplayObject3D;
mCollada = new Collada("sample.dae");
universe = new DisplayObject3D();
universe.addChild(mCollada);
        mainContainer.addChild(universe);

I have used this method of importing DAEs into a non-Augmented Reality PaperVision projects and it works a treat! So just wondering if anyone had any luck at importing DAEs with AR!

From stackoverflow

Click here to view a video of the necessary imports and working demo.

I notice that you are using the Collada Class, as opposed to the DAE, class, which both act a bit differently as is displayed in the video abobe.

It is also important to note that you may very well be doing this correctly and that there is a problem with the model or possibly even the texture. If the texture isn't loading you should know immediately from the console. Try creating a ColorMaterial and create a MaterialsList object setting the "all" property to the ColorMaterial you created. Finally pass the list to the instantiation of Collada or DAE Classes through the instantiation or load method. Also make sure that the camera isn't zoomed in to close, possibly leaving the 3D Object behind it. Finally play with the scale, not all models come in at the same scale, and using Collada class, as opposed to DAE, seems to blow the model up considerable as shown in the video link above.

I have had a lot of time to play with the FlarToolkit / Papervision3D / Collada partnership lately in preparations for the Tony Hawk XI website.

-What you need

An IDE, I use FlashDevelop3 RC2, but Flex Builder or your IDE of choice will work.
Papervision3D 2.0 Whiteshark, (latest build)
Flex 3.3 SDK
Patience

-Finding and prepping the model

Use Google 3D Warehouse for my Collada files.
Next take the ".skp" sketchup file into Google Sketchup.
Make sure the sketchup window has focus and hit CTRL and A at the same time. (Select all)
Head up to edit, and go down to the bottom of the drop-down list where it will typically say how many groups you have selected.
Choose explode.
Repeat until you cannot explode any more. (If you are using low-poly models like you are supposed to, this shouldn't take long.)
CTRL + A to select all again.
Goto File > Export > 3D Model and choose ".dae" //If you do not own Sketchup the .dae extension is not available, lookup the work around :) (Essentially the .dae is wrapped in the ".skp"
You will now have a .dae file, and a folder with the same EXACT name, with textures pertaining to the model inside of it.

- Importing / parsing the model and displaying it

package 
{
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.media.Camera;
    import flash.media.Video;
    import flash.utils.ByteArray;
    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.FLARTransMat;
    import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
    import org.libspark.flartoolkit.detector.FLARSingleMarkerDetector;
    import org.libspark.flartoolkit.pv3d.FLARBaseNode;
    import org.libspark.flartoolkit.pv3d.FLARCamera3D;
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.LazyRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.objects.parsers.Collada;
    import org.papervision3d.objects.parsers.DAE;
/**
 * ...
 * @author Brian Hodge
 */
public class Main extends Sprite 
{
 [Embed(source="../lib/camera_para.dat", mimeType="application/octet-stream")]
 private var CameraParameters:Class;

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

 private var cameraParameters:FLARParam;
 private var markerPattern:FLARCode;
 private var raster:FLARRgbRaster_BitmapData;
 private var detector:FLARSingleMarkerDetector;

 private var cam:Camera;
 private var vid:Video;
 private var capture:BitmapData;

 private var cam3D:FLARCamera3D;
 private var scene3D:Scene3D;
 private var viewPort:Viewport3D;
 private var mainContainer:FLARBaseNode;
 private var renderer:LazyRenderEngine;

 private var trans:FLARTransMatResult;
 private var prevSet:Boolean = false;
 private var prevZ:Number = 0;

 private var _collada:Collada;
 private var _dae:DAE;

 public function Main():void 
 {
  cameraParameters = new FLARParam();
  cameraParameters.loadARParam(new CameraParameters() as ByteArray);

  markerPattern = new FLARCode(16, 16);
  markerPattern.loadARPatt(new MarkerPattern());

  cam = Camera.getCamera();
  cam.setMode(640, 480, 30);

  vid = new Video();
  vid.width = 640;
  vid.height = 480;
  vid.attachCamera(cam);
  addChild(vid);

  capture = new BitmapData(vid.width, vid.height, false, 0x0);
  capture.draw(vid);

  raster = new FLARRgbRaster_BitmapData(capture);
  detector = new FLARSingleMarkerDetector(cameraParameters, markerPattern, 80);

  cam3D = new FLARCamera3D(cameraParameters);

  scene3D = new Scene3D();

  mainContainer = new FLARBaseNode();
  scene3D.addChild(mainContainer);

  viewPort = new Viewport3D(vid.width, vid.height);
  viewPort.scaleX = viewPort.scaleY = 2;
  addChild(viewPort);

  renderer = new LazyRenderEngine(scene3D, cam3D, viewPort);

  _dae = new DAE();
  _dae.load("assets/dae/apc.dae");
  _dae.rotationZ -= 90;
  mainContainer.addChild(_dae);

  /*
  _collada = new Collada("assets/dae/apc.dae");
  _collada.scale = 0.05;
  _collada.rotationZ -= 90;
  mainContainer.addChild(_collada);
  */

  trans = new FLARTransMatResult();

  this.addEventListener(Event.ENTER_FRAME, mainEnter);
 }
 private function mainEnter(e:Event):void 
 {
  capture.draw(vid);

  if (detector.detectMarkerLite(raster, 80) && detector.getConfidence() > 0.5)
  {
   detector.getTransformMatrix(trans);

   mainContainer.setTransformMatrix(trans);
   mainContainer.visible = true;
   renderer.render();
  }
  else
  {
   mainContainer.visible = false;
   renderer.render();
  }
 }
}

}

Hopefully all this helps you, I suggest you just keep playing with it and keep familiarizing yourself with it.

Brian Hodge blog.hodgedev.com hodgedev.com

thank you good work.

I have be trying to get this working but to no success... I am using the following code but the model never appears? thanks

package { import flash.display.BitmapData; import flash.display.Sprite; import flash.events.Event; import flash.media.Camera; import flash.media.Video; import flash.utils.ByteArray; 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.FLARTransMat; import org.libspark.flartoolkit.core.transmat.FLARTransMatResult; import org.libspark.flartoolkit.detector.FLARSingleMarkerDetector; import org.libspark.flartoolkit.pv3d.FLARBaseNode; import org.libspark.flartoolkit.pv3d.FLARCamera3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.LazyRenderEngine; import org.papervision3d.scenes.Scene3D; import org.papervision3d.view.Viewport3D; import org.papervision3d.objects.parsers.Collada; import org.papervision3d.objects.parsers.DAE; /** * ... * @author Brian Hodge */ public class Main extends Sprite { [Embed(source="pat1.pat", mimeType="application/octet-stream")] private var CameraParameters:Class;

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

    private var cameraParameters:FLARParam;
    private var markerPattern:FLARCode;
    private var raster:FLARRgbRaster_BitmapData;
    private var detector:FLARSingleMarkerDetector;

    private var cam:Camera;
    private var vid:Video;
    private var capture:BitmapData;

    private var cam3D:FLARCamera3D;
    private var scene3D:Scene3D;
    private var viewPort:Viewport3D;
    private var mainContainer:FLARBaseNode;
    private var renderer:LazyRenderEngine;

    private var trans:FLARTransMatResult;
    private var prevSet:Boolean = false;
    private var prevZ:Number = 0;

    private var _collada:Collada;
    private var _dae:DAE;

    public function Main():void 
    {
            cameraParameters = new FLARParam();
            cameraParameters.loadARParam(new CameraParameters() as ByteArray);

            markerPattern = new FLARCode(16, 16);
            markerPattern.loadARPatt(new MarkerPattern());

            cam = Camera.getCamera();
            cam.setMode(640, 480, 30);

            vid = new Video();
            vid.width = 640;
            vid.height = 480;
            vid.attachCamera(cam);
            addChild(vid);

            capture = new BitmapData(vid.width, vid.height, false, 0x0);
            capture.draw(vid);

            raster = new FLARRgbRaster_BitmapData(capture);
            detector = new FLARSingleMarkerDetector(cameraParameters, markerPattern, 80);

            cam3D = new FLARCamera3D(cameraParameters);

            scene3D = new Scene3D();

            mainContainer = new FLARBaseNode();
            scene3D.addChild(mainContainer);

            viewPort = new Viewport3D(vid.width, vid.height);
            viewPort.scaleX = viewPort.scaleY = 2;
            addChild(viewPort);

            renderer = new LazyRenderEngine(scene3D, cam3D, viewPort);
   /*
            _dae = new DAE();
            _dae.load("house.dae");
            _dae.rotationZ -= 90;
            mainContainer.addChild(_dae);
   */

            _collada = new Collada("house.dae");
            _collada.scale = 0.05;
            _collada.rotationZ -= 90;
            mainContainer.addChild(_collada);


            trans = new FLARTransMatResult();

            this.addEventListener(Event.ENTER_FRAME, mainEnter);
    }
    private function mainEnter(e:Event):void 
    {
            capture.draw(vid);

            if (detector.detectMarkerLite(raster, 80) && detector.getConfidence() > 0.5)
            {
                    detector.getTransformMatrix(trans);

                    mainContainer.setTransformMatrix(trans);
                    mainContainer.visible = true;
                    renderer.render();
            }
            else
            {
                    mainContainer.visible = false;
                    renderer.render();
            }
    }

}}

Hi Brian Hodge, I tried everything but no success.I am having big problems in importing files.So many error.... spent 5 hours but nothing. I successfully able to create project using collada parser but all the problems are coming when i am using import org.papervision3d.objects.parsers.DAE; There were some files missing and when i tried to download the missing files then it is showing me errors in files that i downloaded. Please suggest me how to get solve it.I wonder w'd it be possible for you to upload the configuration of papervision+libspark+ascollada which you used for demonstrating the above demo. Thanks alot in advance.
@Brady,

Hey I think this could be the error:

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

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

Here at the "CameraParameters" you should embed "camera_para.dat" rather than - pat1.pat . try with this one.
Hi, I have some problems with the dae, it takes too much time to load it, guess it is very big, how big could the dae be? I am not sure about this, but since dae is a xml, it is not very efficient for animations. I also tried the 3DS format but the Max3DS class just skips the keyframe chunks when it finds them, so there is no animation. Anyone could load a 3DS with animation? or some other format better than dae? Thanks in advance

I found some good information actually at this site. I used the code there to import models into my AR stuff. It outlines a very simple method for importing collada models. I just took the sample FlarToolkit example (the simpleCube example) and added the code in that article and that was enough to get me going.

Here's the code:

package {
    import org.papervision3d.lights.PointLight3D;
    import org.papervision3d.materials.WireframeMaterial;
    import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.materials.*;
    import org.papervision3d.materials.utils.*;
    import org.papervision3d.materials.shadematerials.*;
    import org.papervision3d.objects.primitives.Cube;
    import org.papervision3d.objects.primitives.Cylinder;
    import org.papervision3d.objects.DisplayObject3D;
    import org.papervision3d.objects.parsers.Collada;
    import flash.events.*;

    public class SimpleCube extends PV3DARApp {

        public var FAlogo:DisplayObject3D;
        public var light                        :PointLight3D;

        public function SimpleCube() {
            this.init('Data/camera_para.dat', 'Data/flarlogo.pat');
        }

        protected override function onInit():void {
            super.onInit();
            this.addEventListener( Event.ENTER_FRAME, EROnEnterFrame );

            // let there be light
            this.light = new PointLight3D;
            this.light.x = 0;
            this.light.y = 1000;
            this.light.z = -1000;

            // cow model
            FAlogo = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
            FAlogo.rotationZ = -90;
            FAlogo.rotationY = -90;
            FAlogo.x = -100;
            FAlogo.z = 100;
            FAlogo.scale = 0.1;

            // re-orient the logo model before adding it to the scene

            this._baseNode.addChild(this.FAlogo);
        }

        private function EROnEnterFrame( event :Event ):void
        {
            // spins the cow yay!
            FAlogo.yaw(3);
        }
    }
}

shady : Wanted to add a quick note: make sure your marker is available to this code! here, I have my marker file in a subfolder called "data" so don't forget to adjust the code to your setup.

Hi Shady,

I Used your code but there was an error on the

this._baseNode.addChild(this.FAlogo);

1119: Access of possibly undefined property _baseNode through a reference with static type SimpleCube.

Hope to hear from you soon.

Thanks!

ninja

Code Answer

Friday, April 29, 2011

AS3 DAE Augmented Reality PaperVision 3D

-What you need

-Finding and prepping the model

- Importing / parsing the model and displaying it

0 comments:

Post a Comment

Blog Archive