Posts Tagged Collada

Dominoes for all for the holidays : Twist Image Holiday Humanoes

Want to see more than 2400 dominoes in 3D ?(why would you not?) Head over the Twist Image holiday card, see the Holiday Humanoes and make some with your friends’ faces on them.

I know that for every project I say that it was the most complicated one that I did, but this one really was the most complicated I ever did. There even was a night where I didn’t sleep because I wasn’t sure I could make it happen.

My big challenge was to create an experience that was close to what the design team was imagining but that wasn’t too CPU intensive (like all my other projects). I think I did manage to do that. It runs pretty smoothly even on some bad computers. I let Papervision3D do all the heavy lifting but I kinda trick the user into think that there are a huge load of dominoes while at any time there is only 300 of them max (you could consider this object pooling). A second challenge was to position those 2400 dominoes so the they make the final path. The design was done in Illustrator so what we did was that we exported the .AI file as a .SVG file. SVG is just an XML so I made another program that would read the SVG and output (trace to the console) ActionScript code that I would paste into the main application. Finally, the last challenge was to show a zoom out with all the dominoes fallen revealing the message. As I said earlier, if I had 2000+ dominoes at the same time that would be too hard for the computer and run really slow. So I replaced the scene with a bitmap. To get that final bitmap I had to make yet another program that would render me the final path with all dominoes fall and that a screenshot of it.

So I ended up doing 2 more ActionScript projects to end up with the finished product: The Holiday Humanoes.

Oh yeah, just a little trick to finish up, when you deal with COLLADA models, make sure your 3D guy exports the model without the textures if you don’t want the Flash Player to query the server each time you create a DAE. That is what was happening at first and it really scared me.

Holiday Humanoes

Holiday Humanoes

, , , , , ,


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

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);
function _daeLoadComplete(event:FileLoadEvent):void {, _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).

, , , , , ,


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);
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.addEventListener(FileLoadEvent.LOAD_COMPLETE , daeLoadComplete, false, 0, true);
//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!

, , ,


Parse error: syntax error, unexpected ';' in /homepages/25/d169645162/htdocs/wp-content/themes/fusion/footer.php on line 13