Everyday Flash

The conference season is upon us!

Following my last year short presentation at Flash On The Beach and at the Warsaw Flash Camp, this year I will continue my adventure with public speaking. In the next months I will be having my sessions at 3 highly interesting events.

1. FITC Amsterdam, February 22nd-23rd

FITC Amsterdam is only a few weeks away. I’ve been to FITC last year and I really enjoyed the conference (and the parties too). I am thrilled to be back this year as a speaker. If you want to catch my session it’s on Monday (Feb 22nd) at 12:30. If you are interested in Unity and in 3D in general you should definitely attend! For more information, here’s a detailed session description. I hope to see you there!

FITC it’s of course much more than my presentation. There are 2 days packed with interesting sessions, so be sure to checkout the schedule to see what’s interesting for you. There is also a party every evening – a great opportunity to do some networking and to have a few beers and some other stuff (remember, we’re in Amsterdam!). So grab your tickets before they’re all gone!

2. London LFPUG Meeting, March 25th

If you can’t attend FITC and you miss my session in Amsterdam, don’t panic! You can catch me again next month in London. On March 25th I will speak at the next in the series of LFPUG meetings.

It will be a evening packed with realtime 3D, as I will be speaking together with Rob Bateman from the Away3D team. Here’s some detailed info about the event. The event is free, all you need to do is register, so if you are in London don’t miss it!

3. FITC Toronto, April 25th-27th

Finally in April I’ll be making the move over the Atlantic all the way to Canada for FITC Toronto, where I will also be talking about Unity. There is no schedule yet, but it’s should be coming soon. However, the tickets are already on sale. If you hurry you might even get a early bird price!

This is very exciting for me for several reasons. First, it’s a major conference with 3 days of sessions, workshops and even a recruiting event. It’s not to be missed not only if you live in Toronto, but for anyone in the region. And I’ve heard people come for FITC from all over Canada and US.

Second of all it’s my first time I will attend a conference in North America. I looking forward to meet a lot of people whom so far I knew only from blogs and twitter. So if you are around don’t hesitate to get in touch!

Finally, it will be my first visit to Toronto and I heard a lot of good stuff about the city. We also plan a short family vacation afterwards to visit Montreal and Quebec.

Next?

I’m currently entirely focused on those upcoming events, preparing all the materials and the presentation. However, I hope for more opportunities in the future. If you happen to organize a Flash and/or Unity event and you are looking for speakers be sure to let me know!

I don’t have any further plans at this moment, except that I will also attend OFFF in Paris in June (as guest, not as speaker).

Photo credits [1] [2] [3]

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!

There’s something you’ll quickly realize when you start playing with Unity. It’s the fact that you won’t go far without some basic knowledge of a 3D editor. I’ve been using Blender for my Flash 3D experiments, but I can’t honestly say I knew anything about it. I was able to model some very basic shapes, and whenever I needed something more complex I’d ask someone who’s more experienced or just find a free model on the Internet. With Unity it just doesn’t make sense. You won’t be able to understand half of the functionality if you don’t have a 3D editor to work with. By the way, I’m not the only one who noticed this.

As a logical consequence, I decided to take a step back and learn Blender. I don’t want to go into details on the choice of software. If you prefer Maya or Cinema4D, fine. I grew to like Blender, but I know it makes a horrible first impression. The thing about Blender is that it’s free, and that’s a huge advantage for beginners.

After some time of modeling, texturing and setting up lights and I started to really love that. I felt like I was taken 10 years back, at the time when I was discovering Flash, HTML, building my first “home page”. I’m sure you all know the great feeling when you start to understand something new and your skills grow every day. There’s nothing like it! (Ok, there are other things better than that, but let’s stay within our geeky subject).

At first I wanted to get just enough skills to continue with Unity3D development. But soon I realized that this might be what I’d like to do for a living. Wait, what? Can you imagine? I’m in my thirties. I’m doing pretty well in flash development business. Is there anything more stupid that dropping all this and becoming a 3D designer? And how many years I would need to become any good at this? Or maybe it’s just a matter of a couple months to master the tool and I’ll be all set? But maybe I don’t have what it takes to be a 3D designer. However a fundamental thing I believe in, is that there’s no such thing as innate talent and all you need is enough persistence…

I’ve been struggling with those questions for a while, and I don’t have any answers yet. In the meantime I ordered some books, found some tutorials and kept learning to keep all the options open. I still have a long way to go, but I can already see some results.

As my modeling skills grow, I feel much more confident as a 3D developer because I can understand where the assets come from, how they are built, how visual effects are achieved. Those things were like a black box to me before. Now I can even build some 3D stuff myself. It’s so much worth the effort even if I’ll never work as full time 3D designer.

The two Unity examples above are my first, modest 3D modeling experiences. One is a mini game. It features a scenery that I populated with a few models including my first car model. Apart from modeling the scenery elements I used that as a testing ground for many Unity features like the terrain engine, line and trail renderers, rigid body physics, car simulation, particle systems and of course scripting. The end result is a bit random, but I don’t remember having that much fun for a long time!

The second is a small interior scene (really small!). I couldn’t grasp how lightmaps work in Unity until one morning I woke up and I just knew (yeah, that’s how it happens sometimes!). During the day, I quickly threw up this demo to test if my understanding was correct. I think it was, even though in the end the shadows came out too subtle. Anyway, I’m doing more experiments on that subject now and maybe I’ll write a separate post on how to work with lightmaps in Blender & Unity.

That’s it for now! I’ll see where it takes me, but you should expect more 3D modeling related posts on this blog from now on. Also, I’m not giving up on coding… yet ;)

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!

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!