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.

  1. Man, that is insane. Flash has really grown up. Awesome work!

    Rock on Papervision! \m/

  2. when i first saw papervision at Carlos blog i knew something that it was huge. letΒ΄s see what future bring us.

  3. Nice work, particularly for your first textured project.

    Is the performance gain using png8 over png32 in runtime framerate terms or simply download filesize?

    Looking at your texturemap, I’d suggest that you could reduce your workload by reusing the same texture part more than once. For example if the engine fronts are all the same , the four engine models’ UVs can all be the same, thus the image only needs to be on the texture map once. This could also apply to the sides of the craft. Try and reduce the wasted space between utilized areas of texturemap -i.e. make the texuremap as small as possible. Tall and thin is better than short and wide. All of these will help keep the texturemap in cache and speed performance, (and also reduce filesize).
    Also, if you are using png or gif , the unused space on the texturemap could be a solid color, as this will help reduce the filesize.

    Hope this helps, Jake

  4. Hey Jake, yes in reference to the PNG question, it’s more about performance than download. But both are a plus if PNG8 gives you the quality you need.

    As for your suggestion, yeah, I totally picked up on that near the end. In fact, if you look at my screenshot of the uv map, you can see that I started to do that near the end. The insides of the wings are lumped together over 2 different inside patterns, and I could have gotten away with 2 top shots of the engines instead of 4.

    to get a smooth transition of shading, I realized I could put those faces over each other. So, that’s why you see a lump of faces together over the engines. That’s such a simple thing, but it just took trial and error before I really realized how I could use it. I was a little paranoid that I’d do something with a face and wouldn’t be able to fix it back. but as I got comfy with going back and forth between the model and the UV editor, it wasn’t a problem πŸ˜‰

  5. Nice article!
    One question regarding the work-flow. Is it possible to add textures after the modeling? If not add, then change?

    We are planning a 3d avatar system for our community, and wan to have editors to change textures in the model.

    is this feasable?



  6. Yeah that’s the beauty of this workflow and Flash – you could take the texture that you’d been working with into flashIDE and continue to modify it from there.

    So, for example, I wrapped the Xwing with a static JPG. I plan to take that JPG into flash and add “pink” animated glows to the engine so it looks like the movie. Then, I was hoping to add something like a video object where the cockpit is and have it show me sitting there πŸ˜‰ That’s a bit much, but you get the point. The mesh and the textured are married together in Flash with papervision3D and you assign the texture at that point. The only thing Papervision3D cares about is that your texture be the same size in dimensions.

Comments are closed.