Everyday 3D

Those of you who follow my blog, may remember the Paperskate3D demo I published back in the summer. Back then I said that I’ll post the rest of the story someday. So here it is.

It was originally created for the Paperking3D contest organized by the Pv3D team. There were many awesome project sent it for this contest, including Vectorvision – the cool 3d vector library. The skate demo didn’t make it to the top 3 but it received a honorable mention, which made me very happy.

But the best came a bit later, when I was contacted by Revolutive Design from Vancouver. Based on the original application, together we created a demo for Skateit, a new skating game from Electronic Arts targeted for Nintendo DS.

To biggest improvement over the original version is the new way the skateboard is controlled by the user. While before it was based on keyboard, in the EA demo it is modeled on the “Flickit” system which allows to control the skateboard with the stylus on the DS. To simulate this in Flash, I used mouse gesture recognition based on the excellent class provided by Didier Brun. This class was originally intended to identify written characters, but I was able to adapt it to my needs pretty easily. In the demo, it is used to recognize gestures for 20 different tricks.

To access the demo go to the EA website and click the large button in the middle right of the screen. Have fun!

WOW-Engine is an Actionscript API to simulate physics in a 3d environment. The code is based on a popular 2d physics library – APE. It offers some very interesting possibilities in 3D animation, and everyone doing 3D in Flash should have it in their toolbox.

WOW engine simulates a physics world model composed of entities called particles. Particles can be connected using constraints and exposed to different forces that make them move around. Some more information as well as a few tutorials can be found on the projects home page.

The basic technique of using WOW and 3D in Flash is to map those particles to objects on the 3D scene, and before each render read synchronize their x, y and z coordinates. But there are other ways too… On the WOW page, here and here you can find some examples of particles mapped not to whole objects but rather to individual vertices.

Animation based on vertices has been my main preoccupation for some time now, so I got immediately interested. Unfortunately those WOW examples come without source code, so I had to figure that out on my own. The above demo comes as a result.

Some quick details: the windsock was modeled in Blender and the textures were baked using the technique I mentioned in my previous post. On the flash side Papervision3D engine is used and a couple of AS3Dmod modifiers – Taper and Perlin.

This is my first experiment with WOW physics engine, but after getting a basic understanding of how it works, I am convinced there is a big potential in combining AS3Dmod and WOW, so more stuff will be coming hopefully!

As usual here’s the source code. Please mind that this code is a result of a late night coding session ;)

Texture baking has been known to the Flash 3d community since a long time, but a quick look into Google shows us that it is not a very popular topic. I think it definitely should get more attention. In Flash performance is always an issue, and high quality is always expected by our clients. Texture baking helps to achieve this goal.

In short, it consists of getting all the lightning effects of a material and “burning” them directly on the material itself. After such operation, the lights cannot change anymore, but the material gets a nice effect of depth and it doesn’t require any more computations at runtime.

Most of the available 3D software offers a texture baking function. For the demo above, I did choose Blender because it’s free (it also has a very weird user interface, but I digress). On the Flash side, it runs on Away3d.

To create a model with baked textures in Flash I followed this steps:

1. Create the 3d model of the chair in Blender
2. Project all the faces of the model on to an bitmap (in Blender its called UV Unwrapping)
3. Paint the texture in Photoshop
4. Import the texture to Blender and apply it to back the model
5. Add lights and bake the texture on to another bitmap
6. Export the geometry with the UV information included (Collada or Wavefront)
7. Export the baked texture as a jpg
8. Import both into Flash and use your favorite 3d engine to render

Each of the steps above could require a separate tutorial, so instead I published some files created in the process to give you a better idea. You can get them here. Please note, that this is only a reference material – it is not supposed to be built or compiled or anything.

Additionally, for those of you who use Blender a nice tutorial on both UV Texture Mapping and Texture Baking is available here.

In the current state of Flash 3D and its overall performance, texture baking is a highly useful technique that allows to achieve very good results. If you do not believe me, take look at some of the most awesome Flash 3d pieces that came out in the last few months:

• Bunker demo by Alternativa3d team (sources available here)
• EcoDaZoo by Roxik

I am sure you’ve seen them before anyway. They both combine great visual effects with a very high performance. And guess what… in both of them, you’ll find baked textures all over the place!

A few weeks passed since I wrote about the AS3Dmod library and released an initial version of the code. Some new stuff has happened since, so here’s an update.

First of all AS3Dmod has a new team member – Makc. Makc has been involved in several AS open-source projects, most notably Sandy3D. You can read more about Makc, here, where you will also find some cool Flash experiments.

The code has also evolved, and was moved to a modest 0.2 version. The most important changes are some fixes in the imports that prevented the compilation of the project so far.

The 0.2 version has 5 new modifiers: Bloat, Twist, Taper, Skew and a UserDefined modifier that allows to create custom vertex manipulation and easily integrate it into the stack.

Other then that, there is now an ANT script that allows to compile the demos for all 4 engines, and also to generate API Docs. Of course the documentation is ever evolving, but the latest version is always available here. Please note, that API docs are synchronized with the contents of the SVN repository. The zipped sources available on the project home page are there for reference, but they quickly become outdated.

Last but not least, there already are a few demos that use AS3Dmod. I allowed myself to gather a short list of what I found out there:

• Interactive demo by Dehash. I think the first AS3Dmod ever made ;)
• Elephant demo by Tres Graficos
• Away3D + AS3Dmod by note.x
• VectorVision + AS3Dmod by Billy Lamberta
• Bending example with Pv3d by ClockMaker

Thanks to everyone! We will try to put in more and more features, document the code and also create a tutorial, so stay tuned.

Meet AS3Dmod, a cross-engine 3d modifier library for Flash. Sounds cool? Yeah, I am sure it does! Just in case, however, let’s see what it does step by step.

A. Cross-engine. 3D in Flash is around here for some time now, and it resulted in quite a few engines available. Each engine has some cool features of its own, and sometimes having to choose between them can result in a headache. While AS3Dmod won’t solve this situation, it is an attempt to create some functionality that will be available across different engines.

B. Modifier library. The readers of this blog probably remember the Bend modifier I wrote for PV3D. Well, it is one of many possible modifiers. Classic 3d packages come equipped with at least a dozen of them, which include: taper, twist, noise, skew, etc. Modifiers are basically functions that can be applied to a 3d object to transform it in a certain way. They can be used separately, but when combined they become a very powerful tool. In this, they are much like filters in Photoshop.

C. Flash. Instead of explaining how modifiers work in Flash, here’s a short list of some of the possible uses: a sheet of paper, a ribbon, a waving flag, water, cloth, a tree or other plant, a butterfly, a birds wing… They could also be helpful in animating a human face, and in many other situations where animations exported from 3d editors might fall short.

Does it sound cooler now? It sounded to me when I had the idea a few days ago. As you can imagine I was not able to develop anything close to a full featured library in this short time. Nevertheless, I publish what I was able to come up so far, so that you can all see where I am heading. For the moment, here’s what’s in there:

- a framework for creating static and animated modifier stacks
- 3 basic modifiers: Noise, Bend and Perlin
- plug-ins for the most popular engines: Papervision3d, Away3d, Sandy3d and Alternativa3d
- a simple demo for each engine
- basic documentation not yet :)

Source files. The project is at Google Code. You can do a checkout from SVN or download a ZIP.

Demo. In the repository you can find 4 demo SWFs, one for each engine. It features a basic stack of 4 modifiers – Noise, Perlin and Bend x2. You can also compile the project yourself. Just follow the instructions I added in the document class code.

Notes.
1. There is no plug-in for FIVe3D – that is because this engine works in a quite different way and doesn’t use vertices which are fundamental to modifiers.
2. The Alternativa3d version works in a bit weird way. I think, it is because there’s something I don’t understand about this engine, but I will be figuring this out.

Papervision3D comes with a set of primitive 3d shapes - such as a plane, a cube and a sphere. It is possible to do quite a lot with those, but the real power lies in importing objects from 3d editors like Maya, 3dsmax or, in that case - Blender. In Papervision3D, the format of choice for importing meshes from 3d editors is Collada.

Some time ago I actually did export a Collada file from Blender and import it into Papervision3D. You can see the result in one of my early posts. Back then, it was like riding a bike, downhill, in a forest, blindfolded - you don't register much, and at the end you are just happy that you made it. This time I wanted to actually understand what is going on.

For my first experiment I decided to export only the geometry and not the texture. I wanted to see my bend modifier applied to such an object. The task turned out to be not difficult at all. The only thing I needed to understand was the way Collada files are represented in Papervision3D.

A Collada is basically an XML file (with a *.dae extension), so it is perfectly human readable. It contains a part that describes its contents. In my file it can be found somewhere towards the end, and it starts like this:

The first interesting point is that a Collada file represents a scene, not a single 3d object. In my case the scene has only one object, but it is still a scene. That is why Papervision3D will first create a DisplayObject3D that represents this scene, and only then it will add a child that represents the 3d object itself. So in the code, once the Collada is loaded, I can access the object "LadyDae" like that:

Note that the scene is named "COLLADA_Scene" not "Scene" as you could expect from the XML. It's because this name is hard coded and it will always be the same, no matter what the name is in your file. Also note that the attribute you need to refer too is the 'name' attribute, not 'id'.

Now, that the 'mesh' variable contains a reference to the object holding the geometry applying the Bend modifier is pretty simple:

So, I'd love to tell you stories on how, after a many sleepless nights, I finally made a breakthrough and now the Bend modifier works with Collada... but the fact is it always did. The thing I failed to grasp so far was the structure of the Collada object itself.

This unexpected success left me some time and energy to play a bit with another topic from my must-explore-soon list - ShadedMaterials. I did not do much. Basically I just followed some of Ralph Hauwerts old demos, but it resulted in some effects that are nice to look at.

Credits. The model of the girl is a very simplified version of the original made by Tiziana. The background tile comes, as usual, from SquidFingers.

Source. The source code is available here. In the example, I load a ZIP containing the Collada file. A class called KMZ is able to load and unpack it correctly, and it saves a lot of bandwidth. I got this tip on the Pv3d forum (thanks!)