Archive for the ‘ AS3 ’ Category

Papervision3D : Creating models and texturing

When I first saw Papervision3D’s room, I thought we were seeing the first signs of a usable 3D engine for Flash. After I made my second post about the PV3D preview, it was obvious that other people agreed 🙂 To date, it is the most hit post so far!

But I admit, there was one more step to really prove to myself that this, indeed, was the age of 3D in Flash. I had to see how it could be applied practically in a Flash development cycle and work flow. Coming from an agency like BLITZ, we had our own 3D guys in-house, and the work flow always consists of exporting to some image sequence or FLV for use in flash. So, I had to see how tangible this was in an environment like that – could a Flash dev actually control a scene/camera/3D objects like his 3D counter parts do? Could I actually get a model with a texture for the 3D guy and load it at runtime and start working??

The answer is "YES"!


click to view 3D
[ click to view 3D model ( Flash 9 )

The sceenshots here are all from the model previewer I created in Flash9/AS3 with the latest PV3D AS3 classes. The Xwing is a low-poly (949 ploys total) model I created and textured in 3D Studio Max 7 (3DS). To get the poly count down even further, I used Poly Cruncher 7 and was able to reduce the model by 50%.

Now, this was my first time at real texture mapping. I’ve never really done it before, but had a fair clue about what it was about. I found this great tutorial by Waylon Brinck that pretty well spelled out the steps. It certainly was enough to get me on my way and before I knew it, I had a fairly decent looking Xwing.

I created my texture in Fireworks8 and admittedly attacked the mapping in a backwards manor before I realized what I was supposed to do. You can see that the engine fronts and fuciliage are all in weird locations – that’s because I tried to put the elements in the locations that would match up to the faces you see in the UV editor. I finally realized I could move, scale, rotate, flip, break apart all of those faces to position them over the image map perfectly 😉 After I realized that, the mapping went much faster!

Exporting the model requires only a few options in the panel and that’s it!

ASE Export

Click to view large images

[ click to see large screen shots ]

xwing skin

[ click to see texture map ]

uv editing

[ click to see UVEditor ]

Now, somethings to note about creating models and textures for PV3D right now:

  • Models have to be one object. Carlos has said he plans on getting entire scene imports happening, but right now, it’s single objects.
  • Try and not have faces beneath faces. With PV3D’s sorting, you’ll see some artifacts as it tries to deal with faces that are directly over other faces. On the Xwing, if you look at the foot step next to the main part of the engine, you can see that it has some issues with z-sorting. That’s because the wing face extends under that footstep object.
  • Wherever you position your model in the grid in your 3D app is where PV3D renders it in real space. So, in the Xwing model, when you rotate it around, you’ll notice that the center point is just behind R2-D2
  • You might notice in my screenshot of the UV Editor, there were faces moved out side of the extents of the texture. In 3DS, this is actually permissible in that the render will map it in a “tiled” fashion. However, when you bring it over into Flash, you’ll see that those faces are blank on your model. So, you have to have all faces you want mapped in that bound area of the image map
  • Becareful about the type of file you us in flash for the texture. Same rules apply with Flash as they always do, and using a PNG8 version of the map was a definite performance gain over the original PNG32.

This model took me 4hrs to create and another 4hrs to texture the first time I did it. The 2nd time, after I lowered the poly’s with Poly Cruncher, the mapping took less than an hour. I suspect if I had to re-create the model, that too would go much quicker, but that’s simply because of the learning curve I went through with 3DS. I’ve used 3DS for a long time, but only in a very limited capacity. Simple models and rendering other people’s models for my own use was about all.

I figure, if a Flasher like me can get into doing this model in about that many hours and have it fully rendered and controlled in Flash, that’s gotta mean that PV3D truly has brought a real and tangible 3D candidate for use in the mass Flash market of possibilities. Imagine an agency with this type of in-house 3D talent and what they could produce – it’s literally gone beyond the atmosphere and on out into outterspace (to the moon alice!!). As it stands now, I’m able, on my own, to create decent low-poly models and texture them and bring them to life in Flash – which brings it to a world I can take full control of. I don’t think I’ll be sleeping anytime soon 😉


So, the workflow ended up as simple as you’d hope’d it’d be:

3DS -> ASE File -> Load at runtime into Flash

which equates to:

  • 3D guy lives life normaly ->
  • hands Flash dev a text file and bitmap ->
  • Flash dev creates awesome stuff. Retires early.

The Xwing model is 222kb and the image map is 264kb. With AS3, I could pull in quite a few low poly models with textures and possibly remain under 1mb, yet be able to render a full 3D world. Not to mention the fact that meshes and textures can be loaded on demand, and textures can literally be anything from a bitmap, to an FLV, to a SWF.

I think 2007 is the year 3D really comes to life in Flash.

Red5 :: Flex2/AS3 Samples started


I’ve just started on some basic sample/reusable code for creating basic applications with Flex/as3 that use Red5. The first, is a Connection class along with a SimpleConnector.mxml to show how to use the Connection class.

SimpleConnector has a textfield for the URI, Red/Green light for connection status and a connect button. There are methods to get the NetConnection object to pass along for any netstreaming you’ll be doing. This zip includes the orignal FLVPlayer code that now uses the SimpleConnector.mxml and Connection class.

We’re still discussing where we’ll put the sample code for Red5, but for now, I’ll post updates here.