Archive for category Papervision 3D

Loading a COLLADA model without loading a file

You know what is funny? It’s when every project your doing what was cool 2 years ago. Yeah I have been doing a lot of Papervision3D lately, but you know what, I’m fine with it, I actually like it. Anyway, I think Augmented Reality is retarded (ok not that much, but fun to say). So I’m doing all that 3D and usually it’s easier to just load COLLADA models, mostly because you get more complex shapes and the texturing is also easier, all done by the 3D artist. That also help with the workflow, 3D guy does his thing Flash guys does his and they can work at the same time, which is great.

Normally I would just load the DAE file externally, it’s just an xml file but some times it can get quite big. For the project I am currently working on, (stay posted this one is going to be great) I have a lot of very small models, like a lot (omg I sound like the 10 years old daughter I don’t have). So I can’t load all of them externally because this would make too many server call which would in return slow my application greatly. It is not well know (maybe Flex developer knew this more) but you can embed the DAE file inside your SWF by using the Flex embed tag, now available in Flash CS4. I found this info on the pv3d.org site. Here is the code:

[Embed(source="../../../../../assets/domino.dae", mimeType = "application/octet-stream")]
private var daeAsset:Class;
 
var byteArray:ByteArray = new daeAsset() as ByteArray;
var _dae:DAE = new DAE();
_dae.load(byteArray);

Well that is pretty cool and it saves you some loading time and server calls. What I don’t like with the embed tag is that the path to your asset is relative to the class file path not to the project, so sometime it is very tedious to find the right path.

Now let say you were generating textures at runtime (you guessed right, that is what I am doing) you still need to put a listener on the DAE to know when the load is completed, because even though it’s faster than loading an external file it’s still not instantaneous. Here is the full code:

[Embed(source="../../../../../assets/domino.dae", mimeType = "application/octet-stream")]
private var daeAsset:Class;
 
var byteArray:ByteArray = new daeAsset() as ByteArray;
var _dae:DAE = new DAE();
_dae.addEventListener(FileLoadEvent.LOAD_COMPLETE , _daeLoadComplete, false, 0, true);
_dae.load(byteArray);
 
function _daeLoadComplete(event:FileLoadEvent):void {
  event.target.removeEventListener(FileLoadEvent.LOAD_COMPLETE, _daeLoadComplete);
  var child:DisplayObject3D = _dae.getChildByName("modelName", true) //modelName is the name of the shape the was outputted from your 3D program, you can see that name in the trace from Papervision3D
 
  var bitmapMaterial:BitmapMaterial = new BitmapMaterial(_texture, true);//_texture is you runtime generated bitmapData
  child.material = bitmapMaterial;
}

Ok, only 4 more articles to write to remove the annoying roar4milk widget from my homepage (the reason for the sudden music).

, , , , , ,

4 Comments


How to make Collada model double sided in Papervision3D

Well I searched for this for a little while and even tough it is pretty easy, if I didn’t figure it out at first probably other people had the same absence of mind. Also I find it hard to find example of Papervision3D and know which version was used; you find a lot of examples but you never know if the API changed since then so I am going to do a complete example with the version used.

The version used for this example is 2.1.92.

What I wanted to do was to load a Collada model in Flash an animate it. Every thing was going fine with the test models until I used the real models. You see the real models had holes in them that allowed you to see inside the model. Now if your material is single sided, when looking inside, you are going to see through the material and it will look buggy. The solution to this is just to make all material in your model (you can map multiple textures in one loaded Collada model), but that is not as easy as it sound. I tried a couple of options before hitting myself on the face. What did you learn back with ActionScript 2; wait till something is loaded before trying to modify it. This also applies to loaded models. Once loaded I made a little function that would cycle through all materials and make them double side.

Here is the code for the example :

//create all the actors of a Papervision3D scene
 
var viewport:Viewport3D = new Viewport3D(1000, 800);
addChild(viewport);
 
var renderer:BasicRenderEngine = new BasicRenderEngine();
var camera:Camera3D = new Camera3D();
var scene:Scene3D = new Scene3D();
 
//create the DAE/Collada object and load the model
 
var model:DAE = new DAE(false);
model.load("model.dae");
model.addEventListener(FileLoadEvent.LOAD_COMPLETE , daeLoadComplete, false, 0, true);
scene.addChild(model);
//finally add the enter frame listener to render the scene
 
addEventListener(Event.ENTER_FRAME, render, false, 0, true);
 
function render(event:Event):void{
  renderer.renderScene(scene, camera, viewport);
}
 
//this is where the magic happens, we cycle through all the materials of the model and make them double sided
 
function daeLoadComplete(event:FileLoadEvent):void{
  var matList:MaterialsList;
  var mat:MaterialObject3D;
  matList = model.materials;
  if ( matList ) {
    for each (mat in matList.materialsByName) {
      mat.doubleSided = true;
    }
  }
}

I didn’t include the import statement because I plainly forgot to send them to myself, but I will update this post to add them. Have fun loading models!

, , ,

6 Comments


Difficulties with Papervision3d when embed width and height in html are 100%

Well it’s not really difficulties; more something you have to keep in mind when, in your HTML, you set the width and the height of the flash portion to 100%. In my case I did this so that my swf would take all the browser space.

So I was doing some minor papervision3d programming and everything was going fine until I embedded my swf in HTML. Since the embedded flash size (width and height) wasn’t the same as the exported flash size I had some glitches on the papervision3d side. The Viewport3D was the part that moved when I resized the browser. In order to fix this I had to assign it a new x and y at creation that was dependent on the stage width and height. This is how you do it:

1
2
3
4
viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true, true);
viewport.x = -((stage.stageWidth - 800) / 2);
viewport.y = -((stage.stageHeight - 600) / 2);
addChild(viewport);

800 being the original width of my stage and 600 the original height. So by modifying the x and y of the Viewport3D at creation when I loaded the site or reloaded it it was always at the right place. At least that is what I thought until I tested it in Internet Explorer. I guess Internet Explorer doesn’t handle resizing of the browser in the same way as Firefox or Opera, because if you loaded the site, then resized the browser and then refresh the page it would not work properly in IE, the Viewport3D would be offseted. Actually in any browser, resizing the browser would offset the viewport making alignment not fit anymore. This is more obvious when you have some parts of your site in papervision3d and some parts under it not in 3D. To fix this I had to add a listener for the RESIZE event on the stage:

1
2
3
4
5
6
7
stage.addEventListener(Event.RESIZE, stageResizer);
 
private function stageResizer(e:Event):void{
viewport.x = -((stage.stageWidth - 800) / 2);
viewport.y = -((stage.stageHeight - 600) / 2);
 
}

Every time the browser would be resized this code would align the viewport in the middle of the stage.

This was a minor problem I encountered while using papervision3d; it wasn’t really hard to solve, but I guess it will be easier for you to find the answer than for me (since it’s all here).

, ,

5 Comments


Interactive scene with Papervision3D (Great White)

I updated my previous experimentation with papervision3D to version 2.0 (Great White). I can say that it wasn’t too hard thanks to this John Grden article.  But is article doesn’t explain everything. A lot of things have moved since the phunky branch; as an example, Planes are now in the org.papervision3d.objects.primitives package. Once you adjusted all the package you previously used so that they can now compile, you can start playing with the new toys. I didn’t try anything fancy; I just wanted to make my materials interactive. It actually was easier than with the previous version even if I had less documentation. I didn’t quite get how to use the Interactive Scene Manager in the previous version.

So if you want to make your 3D objects interactive, you first have to advise the viewport3d object. You do it in this way:

1
viewport = new Viewport3D(0, 0, true, true);

The fourth parameter of the Viewport3D constructor is the one you want to set to true. Once that is done you have to make your individual materials interactive also.

1
2
3
4
5
6
var mam:MovieMaterial = new MovieMaterial(myMovie);
mam.interactive = true;
 
var p:Plane = new Plane(mam, 100, 100);
p.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, handleMouseOver);
p.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, handleMouseClick);

You can see that you have to set the interactive property of the material to true in order to interact with it. In the previous, I also created a plane and used the MovieMaterial on it. I then added the listeners on the plane itself. I don’t know if it is better to add the listeners on the plane or on the material but it worked fine this way, if you have more insight on this feel free to make a comment about it.

You have to import the org.papervision3d.events.InteractiveScene3DEvent package in order to use the 3d events. The events you can use are these ones: OBJECT_CLICK, OBJECT_OVER, OBJECT_OUT, OBJECT_PRESS, OBJECT_RELEASE, OBJECT_RELEASE_OUTSIDE , OBJECT_MOVE, OBJECT_ADDED. They are all self explanatory so I won’t explain them.

You now have everything you need to make an interactive flash movie using papervision3D, I hope I shed some light on that.

,

8 Comments


Papervision3D 2.0 – Great White – is out

Today the newest version of papervision3d was released. It’s the alpha for the 2.0 version and the code name is Great White. It has a ton of new features like shaders, animated models,  shading, bumpmaping, frustrum camera etc. Tons of words I don’t understand yet, but what is more important to me is that it’s faster; in fact it’s supposed to be about 23% faster.

It’s funny because just last weak I was trying it out, I started with version 1.5, then I went to version 1.7. Two days later I was reading the forums and I kept reading about the Phunky Branch, so I tried it, it was version 1.9. Now just one week later version 2.0 is out, I guess I’ll have to switch again. It seems like a lot as changed in the Great White branch so I suggest reading this articles by John Grden about how to upgrade current papervision3d projects.

, ,

No Comments


Papervision3D experiments with models

I did experiments with papervision3D all day long and let me tell you this: starting by trying to import a collada model might not be the right idea at first. I finally succeeded, but not with the model I wanted …  Actually I never got my model to work but at least I know I am doing every thing right in the Flash IDE since it works for other models. I think my problem either comes from the fact that my model had too much polygons in it or we had trouble when exporting the collada file from Maya. I didn’t even code anything, I just used the papervision3D component and panel inside Flash. Its great, but I didn’t get it to work properly. It is supposed to give you a preview as you are designing but that part didn’t work. What did work was the change I was making inside the panel did show up when I compiled the movie.

It’s kinda hard to learn how to use papervision3D, at least the part about importing a model. I know gotoandlearn.com has some nice tutorials not about using model but what helped my the most is this post from John Grden. The video at the end shows you how to use the component and the panel.

, ,

No Comments


Really nice papervision3D website

While browsing the papervision3D blog, I found a link to the new site for the Canon EOS 400D. I can say that it is absolutely amazing. The design is really nice and papervision3D is used in a way that it adds to the experience, not just to show off some cool 3D. It is in fact very subtle and it is that subtility that makes it awesome. Papervision is really nice, but it has some flaws, like the edges of a plane are usually not that smooth, but in this site, they used Papervision3D in a way that it didn’t show. Well nice work!

,

No Comments


Just in time papervision3D example

Yesterday I spoke about Papervision3D; well today’s FWA is a site made using Papervision3D and it’s quite amazing. I also found a blog post from the company explaining the process they went trough.  Ah yeah, by the way the website is this one, Sony Bravia. Also I have found a tutorial giving you the big steps to make good models for papervision3D. I’ll be sure to read it.

I also read a lot about design patterns today, and I really ask myself if it really applies to Flash and simple interfaces, because implementing a MVC (Model-View-Controller) pattern for each and every button seems a bit too much. I’m trying to keep an open mind, but sometimes object-oriented programming seems cool in theory but far from practice… Maybe if I keep on reading…

,

No Comments