There are many open source Flash projects out there these days, but one of the most exciting ones is PaperVision3D. This relatively new API empowers you to import and render 3D objects in real time! Today we will be presenting this subject at the LA Flash User Group, a web cast of the presentation should be on their site shortly so be sure to head over to http://www.laflash.org/ to check it out.
I know you might be thinking “fine we can do 3D in Flash, but why bother?” or “what does that empower me to do, that we can’t do already?” So in our effort to explore this ever opening envelope of technology, and answer that exact question we have cooked up a few little demos to show just what is possible in Flash 8 and 9, and how that can totally change the web as we know it.
Sample Space Simulation
Let’s say you want to build an educational site that tours the solar system. But you don’t want just another plain old catalogue type website, you want more. Something that can really give kids an idea of the scope and scale of space, the planets, and our sun. Using PaperVision, you could model the solar system, and then even animate the planets orbiting through space. If your math is really good, you could even make them match the actual locations of the real planets at any given moment.
To test the plausibility of this, we set up a little space sim, that makes use of a custom camera class that we built on top of Papervision. Click the image below to take it for a test run.
Use the W, A, S, and D keys to move.
Move your mouse away from the center to look.
Sample First Person Shooter
Let’s say that instead you want to make a hip game for a viral marketing campaign, but you want it to have the look of a modern game like Tony Hawk, or Half-Life. Now that is within reach, and all while still staying in the Flash player. Below is a little demo that uses almost identical code to the one above, the only difference being a different control scheme for the look controls.
Use the W, A, S, and D keys to move.
Click and drag your mouse to look.
The COLLADA Plugin
“COLLADA defines an open standard XML schema for exchanging digital assets among various graphics software applications that might otherwise store their assets in incompatible formats. COLLADA documents that describe digital assets are XML files, usually identified with a .dae (digital asset exchange) filename extension.” -Wikipedia
The COLLADA plugin is available for current versions of MAX, Maya, and Blender and can be downloaded from http://www.feelingsoftware.com/. Download and install the plugin, it should auto detect which 3D package you are using and install the appropriate files.
PaperVision3D is an open source project started by Carlos Ulloa, it’s a simple to use graphics API in both AS2 and AS3 flavors. A copy of the example .fla and model files used to create the “Sample First Person Shooter” source files are located here. The most recent build of PaperVision can be retrieved from OSFlash’s Subversion Repository (SVN) here. If you do not use the Subversion control system, or want to use the same build we are using for this tutorial, you can download a zip of the class package in AS2 here. (Revision 21)
Regardless of how you get PaperVision, once you have a copy of it on your machine you will need to remember to add the class path to PV3D in your publish settings. The
Preparing your model
The first thing we need is a textured low poly model. The processes of low poly modeling, texturing, and unwrapping are sophisticated arts unto themselves and the details of that process is outside of the scope of this humble post. Suffice it to say though that there is an incredible volume of information on these subjects available in book stores, online, and taught in fine institutions around the world, not to mention many are available for sale on TurboSquid’s website.
Assuming you, already have those bases covered, here’s what you need to do:
1. Open up your 3D application of choice, and import or build your low poly model.
2. Then you are going to want to apply a UVW modifier to your model, and unwrap and layout your UVs for texturing in Photoshop. Essentially painting on your flattened model.
3. The next step is to apply that material to the diffuse channel of a default material, and then apply that material to your model.
4. You should now see your newly painted textures on the faces of your model. If you would like to add lighting effects or shadows to your model, now is the time to add lights and set up your scene. When you are finished, open up the rendering dialogue and render to texture, this will rewrite your .jpg texture so that lights and shadows are now “baked” in.(Baked is the gaming industry term for rendering the environment effects back onto the existing textures so that you don’t need to render those effects at run-time. More realisim, with less clock cycles. Careful though, don’t bake shadows onto things that will move, as it wont look right.)
Exporting Your Model
5. Now we are ready to export the model and import it into flash. This is as simple as selecting your model, and going to File -> Export Selected and selected the COLLADA (.DAE) file type from the drop down menu.
Ready To Go
Now your model is ready to be imported into PaperVision3D, if you’ve downloaded the provided “Sample First Person Shooter” files you can have it load your model and texture by simply replacing the texture in the .swf’s library, and saving your new model over the existing one, or by changing the path to the model in the main.as file.