I am proud to announce my latest project. It’s a 3D racing game done in Flash with Away3D. I worked on this project together with Calisto Labs and our client was Snowball Media. My task was to create the 3D game part. It was great fun to work on this project. The team at Calisto Labs did a awesome job and everything went smoothly!

The project required to use my Actionscript and 3D modeling skills together on a scale like I never did before. I spent a lot of time with Blender and Unity in the last months, and without this experience I feel the project would be beyond my abilities. Also, having a direct comparison between Flash and Unity allowed be to see things in a larger perspective.

Flash vs. Unity… again

I built the game with Away3D FP10. I must say that Flash 3D has gone a long way since I first started to play with it, and Away3D is a very solid engine. The 2K polygon limitation is a thing of the past, and the correct perspective projection in FP10 makes everything look so much better. The team also added some other crucial features to create 3D environments – ex. frustum clipping.

Before starting this project I was working on a Unity3D racing demo, so I managed to get quite a few ideas on how to build such a thing. However, when I moved back to Flash, I was a bit desperate because I realized how much stuff I got used to in Unity is just not there in Flash. A built-in physics engine would be the most important one.

Home-made physics and collision detection

For physics in Flash I was tempted do use JigLib at first. But soon I found out that JigLib is way too complex, creating a realistic car behavior would be very difficult and it would probably eat too many CPU cycles. I estimated that Away3D will take around 90-95% of available processing power, so there’s no space for any other complex piece of code to run in the same time. I always think that when it comes to 3D in Flash performance is quality, and there is no excuse for poor performance, even if you want something to look “realistic”. So I ended building something very very simple.

Once I got the car driving around, I needed to add some collision detection. In Unity you quickly get used to the fact that any 3d object is a collider which makes collision detection a no-brainer – just implement a listener method and get a call whenever your object collides with another one. And if you need to add realistic collision response, you just make the object a rigid body and there you go! (Ok, you may need to adjust some settings, but still it’s pretty straightforward).

In Flash it seemed like a much more complex task. I was thinking in the lines of creating a system based on the geometry of the track. I started to study curve equations just to realize I wouldn’t make it even if I had a year to complete the project! Then I remembered, that a good way to test collision with complex shapes is a bitmap.

The way it works is that it takes the car’s position and checks against a map of the track that has different colors for different areas – ex. red for the road, green for the sideways and so on… Since it samples only a few pixels per frame and all it does is check their RGB values, it’s lighting fast. Truly, Flash is the art of minimal!

Scenery

The most fun part was to create the scenery. I’ve never tried to import such a large 3D scene into Flash so I wasn’t even sure if Away3D would handle it. It turns out it did handle it pretty well. Instead of using Collada I went with Wavefront (OBJ) format for the meshes as I feel it gave me more flexibility. OBJ is a simple format which makes it a bit easier to see what’s going on while Collada is bloated and overly complex for my taste. I used Blender to model the track and the few objects that you can see around it – lampposts, houses and the tunnel.

Lightning

Lightning is very important in low poly scenes, because it adds a lot of detail and atmosphere to the scenery, without adding any polygons. Even thought the scenery is simple, I ended up having more that 60 lamps. Of course all those lights needs to be baked on the textures, there’s no way to run them in real-time. Blender has a very good texture baking tool and all this works fine for static objects. But what about objects that move, like the car?

For lightning the car, I reused the concept from collision testing. But instead of a collision map I made another one – a light map. Basically it’s a bitmap with white areas where the scenery is lit and dark ones where it’s not. By sampling a single pixel on every frame I can see if the car is passing through a lit area. Then, all I have to do is to apply a color transform on the car texture to make it brighter. Again – a minimal solution, but it works!

Now that you know all about it, go ahead and try it out!

JigLibFlash is a new library for 3D physics simulation in Flash. It is ported from a C++ open source engine. It’s been around for a few months now, and if you haven’t heard about it, you need to catch up!

I believe physics simulation is the next step in the Flash 3D world, so I got very excited when Ringo from FlashBookmarks invited me join the JigLibFlash team a couple of months ago. One little problem: I am perfectly lame when it comes to physics… In this situation, the only logical thing to do was to join the team and learn all the stuff I need to know about it in the meantime. Sounds like a challenge!

Now I slowly fill my knowledge gap. However, I also managed to do some actual work on the library. Together with Reyco we remodeled the API. We started by making it more Flash developer friendly, less C-style and more AS-style. All the methods start with a lowercase letter now, and instead of having to set the position and rotation using vectors and matrices, the new API offers simple getter/setters for properties like x/y/z and rotationX/Y/Z just like in Papervision3D or in the new Flash Player 10 API.

Last but not least, we also created a plugin system to easily integrate JigLibFlash with the popular 3D engines like Papervision3D or Away3D. Now there are specialized classes to interact with those two engines and it should be pretty easy to create a plugin for another engine if one needs. If you worked with AS3Dmod you should notice that the concept is similar to the plugin architecture in there. Update: I just saw in the sources that someone already created a plugin for Sandy3D.

To learn more about these changes you can refer to the tutorial I wrote which is posted on the projects wiki page. Reyco also wrote a great article about this on his blog.

The demo above is my first little experiment with JigLibFlash and Papervision3D. My idea was to integrate a Collada object with the physics system and to add some interactivity to it. I extended the Mouse constraint class created by Reyco to control the racket. I encountered some problems with stabilizing it in the long run. After having bounced the ball a few times the racket starts to rotate as if the constraints were broken… well, I still need to do some research on that.

Source code. You can browse the sources for the demo here.

Links. Some links to get you started with JigLibFlash:

• Official blog, Google code
• Wiki tutorial on new API and Reyco’s article
• Really cool demo by Andy Zupko

PDFBook3D is a Flash application that allows to transform a PDF document into a 3D model, that later can be viewed pretty much like a real book. The product was just released by Powerflasher, and I was involved in creating the front-end 3d Flash part of it.

This application belongs to the family of flipbook engines. I am sure you have seen the classic 2D version of a flipbook at least once. It is widely popular around the web! PDFBook3D replaces this classic piece with a more accurate and realistic 3D version of the effect created with AS3Dmod bend modifier. The bend modifier allows to create paper simulation in Flash, which is something I already posted about back in November.

The application has a rich set of configurable properties, including dimensions of the book (for non typical page sizes) and a number of quality settings to get a decent framerate on slower machines as well. The Powerflasher team created an admin interface to generate 3d books on the fly. You can see it in action here. The product functionality also includes links editor and video embedding. If you are interested in more information please refer to the Powerflasher Solutions site.

PDFBook3D is also my first commercial project made using Away3D. There are a few features in Away3D that made me choose it, but mostly it was the curiosity to try "the other" engine. I must admit Away3D turned out to be pretty cool!

It is most famous for its advanced features like normal maps, path extrudes and bones animation. However, this project does not rely on those advanced functionalities. Most of what I used in here is pretty basic, but still I was able to find some cool stuff.

One very useful feature is being able to assign back material to planes. It might not seem like a huge thing, but since it is used to create the flipping page, it helped me a lot. Actually any mesh in Away3D can have a back material assigned to its faces using the back property of the class:

Notice, that it is not the same thing as having a double sided material - that is, the same material used for both sides of a face. In this case - one material is used for one side, and a completely different one for the other. This is why it was perfect for creating a page of a book.

Another cool feature of Away3D is triangle caching - it is a built in functionality, that doesn't require any extra coding and it can give a significant performance boost. Thanks to triangle caching, whenever the page flip animation is on, the rest of the book that does not move at this moment is not re-rendered at each frame. A similar optimization can be achieved in Papervision3D using render layers, but it's not as easy to use.

Last but not least, I'd like to thank Fabrice Closier from the Away3D team for support and feedback during the project!

An Actionscript-based 3D bone system is something I wanted to do for a long time, but I couldn't figure out how to approach this problem for several months. A few days ago, I finally made a breakthrough. Here's a first demo I quickly put together: a 3D walk cycle.

So far the only way to have a walking character in Flash 3D was to create an animation sequence in a 3D editor and export it as an animated DAE and/or use Cast3D. For sure, this method allows to achieve awesome results, but it is not nearly as flexible as being able to control the animation directly from Actionscript.

So, how does the above demo work? First of all I created a model of pants in Blender. This is the 4th model I ever did with Blender so it not perfect, but is good enough for the job. The important part is that both legs and the waist form a single mesh.

After I imported the model into Papervision3D I applied several Break modifiers to the model. The Break modifier is a new class I wrote for AS3Dmod and is of key importance for this demo. In brief, it allows to apply rotation only to a group of vertices while leaving the rest untouched. The resulting deformation makes the mesh look like it was broken, hence the name.

I created a modifier stack and added 4 Break modifiers to the pants. One for each tight, and one for each knee. The angle for each of them can be modified separately, which allows dynamic animation.

You probably wonder how I did indicate which vertices belong to which part of the mesh (waist, thigh, calf) and how I even know where those parts start or end on the code level. That is crucial in creating an armature and it is also the tricky part. Most of the 3D IDEs, like 3Dsmax or Blender have some kind of visual interface that allows the user to select vertices and attach them to a bone. In AS everything is code, so this is a challenge. I must confess that for this demo I hardcoded some values and did some assumptions to make it work, but I think there is a way to make this task relatively easy or at least possible to apprehend.

In the long run, it would be cool if bones could be exported from 3D IDEs and exposed as objects in Actionscript. As far as I know, there isn't anything like this available for the moment. Away3D supports collada bone animation but, despite its promising name, it serves a different purpose (correct me if I am wrong.)

Let's go back to the demo. Once I had the Break modifiers in place and applied to the correct areas of the mesh, the rest was rather easy. To create a proper walk cycle, I just took Keith Peters' book "Making Things Move", Chapter 13 on Forward Kinematics, and I adapted the code from the examples.

In case you don't know that book, I would strongly recommend getting it. It contains all the essential stuff you need to know, if you want to call yourself a serious AS3 developer. I never leave home without it! There is also a sequel, with stuff for Flash Player 10.

This walk cycle is only a first step to create a bone system in AS, but I wanted to share it with you without spending another few months making it fully featured. Break modifier is available in the latest AS3Dmod SVN repository. I should warn you however that this is a very early version, not really usable for the moment.

Of course, updates are coming so stay tuned!

I did some research in the blogs and on Twitter, and often when someone mentioned AS3Dmod, the recurring theme was the lack of documentation. Yeah... but creating proper documentation is such a difficult task!

First of all, it's hard to find enough free time. Then, even if you find some, most of us, including me, will always find it more fun to write code instead. Eventually, I profited of the calmer period in the last 3 weeks and made some progress with that. The result is the AS3Dmod tutorial.

In the tutorial you will find answers to the following topics:

• how to integrate AS3Dmod with the Flash 3d engines
• how the modifier stack works
• how to create and apply modifiers
• how to animate the modifier properties
• how to use the collapse feature

Beside the tutorial there are API Docs available for some time now.

Another thing are simple interactive demos for each modifier. So far I created it for one: Skew. You can view it here. The demo allows to see all the properties and features of the modifier in action, instead of explaining it in writing. If this concept gets some positive feedback, I'll try to do more of those.

Hope you will find all this useful, and remember that feedback is very welcome (and much needed). And of course Happy New Year everyone!

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!

Since I released the bend modifier a lot of people have been asking how to bend an object not only along one of its axes, but along any angle. That was clearly a feature missing, but I also didn't have a clue ho to do that. Now, a after a good few days of struggle, and with a little help from my friends - here it is.

The Bend class now takes 3 arguments in the constructor, the third being the angle at which the bend is executed. Please mind, that this argument expects an angle in radians. In the code it looks like this:

Of course, there is also a getter/setter for the angle, which allows to change the value dynamically, and to use libraries such as Tweener to animate it.

The Bend modifier is now part of the AS3Dmod library. Since AS3Dmod is cross-engine, the above demo was done with Away3D, but of course, the same functionality can be used with other engines, including Papervision3D.

For those of you who remember the initial bending demo, I used a 100$ bill as a graphic element then. I thought it would fun to be consistent and to stay in the American theme. Therefore, this time you can play with the Declaration of Independence. Fans of "National Treasure" should be delighted.

As usual the sources are available and you can get them here. I hope you like the demo and that you will find the code useful. To compile it you need the latest versions of AS3Dmod, Away3D and Tweener libraries.

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.

A couple of weeks ago the Away3D team announced the release of version 2.0. The news was accompanied with a stunning demo called Green Planet. I was impressed, so I downloaded the source and started to play with it.

From the start I was interested in checking some light and shading possibilities that Away3D offers. I was not disappointed. It turns out that Away3D has some really nice features and they are easy to use. Not everything is well documented, so I had to opt for a trial-and-error technique, but it is ok, as it was released just a few days ago one cannot expect a full documentation. Click on the image above to see a demo I created. Below I share some hopefully useful tips.

For the light source I use the PointLight3D. It takes as initObject argument where you need to pass its x, y and z coordinates, but also some settings for the light itself. We have a brightness parameter, which is pretty self explanatory, and three others: ambient, diffuse and specular. Now, if you don't have a clue what these are, as it was the case with me, start by reading this. The exact values that those settings can take is not quite clear, but I tried different options and ended up with something like this:

If you want your bitmap material to react to the light, a basic BitmapMaterial won't do the job. I experimented many materials available in the package and found out that WhiteShadingBitmapMaterial works pretty well. It is straightforward in setup as it just takes a bitmapData as argument. In my code it looks like this:

The sun does not need to react to any light, for it is light itself. It also does not need any bitmap texture either, so I just use a basic ColorMaterial. But the sun needs to have a glow. And for that I found one super cool feature in Away3D, and it is called ownCanvas. It is a boolean value, and by setting it to true (default is false) you can assign filters to 3d objects exactly the same way you would assign them to regular sprites. Here's how it looks in the code:

A final tip, and this one I found on the Away3D discussion group, is to set the stage.quality to LOW. There is no visible difference in rendering quality, but a huge one in performance. And remember, that you can always check the performance by selecting 'Away3D project stats' option from the right-click menu.

UPDATE May 19th 2008. Source code. I was asked to post the source code of some other examples on the blog and I did it. Later on I thought there is no reason to leave this one behind. So, before anyone asks: the classes are commited to my Google Code account, and there is also a ZIP with the code and the assets here.