When we first talked about the project, the idea was to use either Flash or Processing, but I though that it’s a good occasion to try Unity3D (of course… :) To achieve the desired visual effect I needed a shader system that’s fast, flexible that and works with 3D. Unity’s ShaderLab seemed like a good option.

The material on the shape is transparent and is composed of a blurred version of an image applied as regular texture and the image itself applied as reflection. The images change over time, and are animated by scrolling UVs.

All the data for the installation is loaded dynamically, the application itself is just composed of some scripts that make it run, so the file is only 55KB! It’s controlled by an external configuration file that allows to define the source images and sounds. There are also quite a few other settings to tweak they way it works, ex. how transparent or how reflective the material should be.

One particular challenge was to make the shape react to the sound. To make this happen I needed to read the spectrum and Unity3D doesn’t offer access to sound data on the code level. One possible solution was to write a plugin that does that, the downside however is that it wouldn’t run in the web player.

I solved the problem by pre-processing the sound in a small Flash app. It dumps the spectrum data to a text file which is then loaded to Unity3D. When the application plays the sound file, it uses this data to check the values of the spectrum at any position in time. Simple, but does the job.

The installation is part of a project called Tango and Hawaii created by Anrick and Luciano. Be sure to check the live demo. It was originally presented at the Magdalena Festival in Maribor, Slovenia.

It was a new experience for me to work on an art piece was. It was very inspiring to see what Anrick and Luciano did with a tool I helped them to create. Thank you guys!

I’m happy to announce that I will be speaking at FITC San Francisco in August. I have been speaking at FITC events twice this year, and both times it was a fantastic experience. I’m looking forward for this one, and what really thrills me about it, is the amazing speaker lineup!

There are of course all the usual suspects like Joa, Ralph, Andre, Mario and Seb plus many more great speakers form the community – you don’t want to miss any of them. Here’s a few that particularly caught my attention:

Eugene Zatepyakin The Actionscript/Alchemy mage from Russia. You may know Eugene from his work on ASSURF which is this amazing image recognition library. I had the pleasure to meet Eugene in Antwerp last year and I can assure you that you won’t regret attending his presentation.

Theo Watson At FITC Amsterdam 2009 Theo was speaking as a last minute replacement for another presenter who could not make it. It was a lucky coincidence for me, because I really loved what he was showing! Theo is a digital artist working with openFrameworks. In San Francisco he will be taking part in a panel together with Jer Thorp and Ben Fry, the creator of Processing. I’m sure it will be a very interesting discussion. Theo will also be giving a presentation on interactive storytelling toghether with Emily Gobeille.

Yoko Nakamura Yoko was doing kick-ass Flash stuff on Yugop while I was still learning how to use gotoAndPlay()! I can’t wait to see the legend live.

And there’s me. I feel almost insignificant in face of such great talents, but I will do my best to deliver a great presentation. I was speaking in Amsterdam and Toronto and I was happy to see a full house both times for which I only partly credit my amazing speaking talent… :) It’s rather that Unity3D is such a hot topic right now. In San Francisco I will be giving a new, updated presentation entitled “What can you do with Unity3d?”. I hope to see you there!

But wait, there’s more… so take a look at the complete speakers list. If you live in California (or close to) this is an event not to miss. The super early bird tickets are only available until today (Friday, May 28th) so go grab them before it’s too late!

When building a dynamic application, every now and then you might need to load some 3d models at runtime. Either because there's a database with models you want to use or just because you want someone to update the models without rebuilding the project. I actually had this situation a few weeks ago. Surprisingly, this option does not come with Unity out of the box.

Asset bundles and resource folders

But first thing first. I said there's no ready-to-use way to load 3d models at runtime, but it's not 100% true. In fact, there are two options: asset bundles and resource folders. These methods are discussed in depth here.

They can both be useful in some cases, but they both have one fundamental drawback: in order to create them, someone needs to open the project in Unity, import the 3d models, create the bundles or resource folders and then export the whole thing again. To create an AssetBundle you need to run a script in the editor, while the Resource Folders... honestly, I failed to even make them work!

In brief, it's all too complicated for what I was looking for.

A straightforward solution

What I needed and wanted was easy and simple: to load a 3d object (geometry + some materials and textures) at runtime, using just a URL as parameter. The only solution seemed to write my own importer.

Basically, I had the choice between Collada and Wavefornt OBJ. I would choose OBJ any time of the day because it's a simple, concise plain-text format, while Collada is bloated and is XML-based.

It's not that I hate XML (although I'm not a big fan either) but in order to parse XML you need to include a pretty weighty DLL in your *.unity3d file, around 850Kb, which in this case (and in many others) defeats the purpose. Still, it's good to know that it possible, and there are situations when it's ok to use it. If you want to learn more about Unity3D and XML there's a awesome article on this topic by Paul Tondeur.

It turned out that while it's not rocket science to write an OBJ importer, it's not exactly banal either. I spent a few days coding it so I thought I'll share this with everyone - maybe someone will make good use of it.

Here's a package with the source code (v1.1), along with a simple scene demonstrating how it works. In fact it couldn't be simpler. All you have to do is to create an instance of the OBJ class and start a coroutine to load the contents, like this:

Supported features

• Vertex, normals and UV data
• Multiple objects per file
• Vertex groups and multiple materials per object
• MTL files, diffuse and specular materials
• Basic textures

And it's all at a cost of ~12Kb extra added to your final file!

Testing and the universality of OBJ format

In the 3D world the OBJ format is nearly universal - I think that every 3D editor in existence is able to export to this format. This also means that Wavefront files come in many different flavors.

I tested the code against models created with Blender and against common sense assumptions on how an OBJ file can be constructed. If it doesn't work with files exported from your editor send me the OBJ file, and if possible I'll update the code. It's released under the MIT license so feel free to use it in your projects, commercial or not.

That's it! I hope you'll find it useful!

Unity3D can work with meshes created in external 3D editors, but geometry can also be created with code. And not only geometry, but materials and textures as well. To test all these options I created a simple cityscape. I got inspired by this set of awesome pictures and also by a project called Pixel City by Shamus Young.

Creating meshes

All information about the geometry of an object is stored in the Mesh object inside the MeshFilter component. A mesh is composed of an array of vertices grouped into triangles and with UV information added to it. It's a pretty common way to store information on 3d geometry, similar to what you can find in Actionscript - Graphics.drawTriangles expects arguments in the same data format. Many file formats out there store meshes that way too, ex. Wavefront OBJ (which makes writing importers/exporters relatively easy by the way).

Creating a mesh with code means populating the arrays of vertices, triangles and UVs. While it is pretty straightforward, even building a simple cube can be tricky and the code quickly becomes a unmanageable list of numbers. In the source code, the buildings are generated in the BuildingBuilder.cs file, so you can see it for yourselves.

Creating textures

We've already seen that any bitmap you import into a Unity3D project is represented by the class Texture2D. Of course, bitmaps don't have to be imported - they can be created from scratch. The constructor of the Texture2D class take a few arguments, including the width and height of the image.

Once a new texture is created all it's pixels are empty (i.e. black and transparent). Their values can be changed either on a pixel-per-pixel basis using the SetPixel method or by copying portions of other bitmaps using SetPixels.

In the above example I have 6 predefined textures with different types of windows, so I don't create those from scratch. However I use a procedural texture for the illumination maps. I generate a 64x64 bitmap where the value of each pixel determines the brightness of a single window (i.e. how much light it emits). It's pretty basic: after the Texture2D is created I just run through all it's pixels and assign a random value to it's alpha component.

Creating materials

There are 6 different textures representing a different type of window each and one illumination map. How to put these together? That's what materials are used for. As with any other element, materials are represented by the Material object in scripts, and they can be created with code. The constructor takes only one argument: a shader.

Shaders are one of the most crucial elements of Unity3D (and any other 3D rendering engine for that matter). They describe how a 3D geometry will be rendered, what colors and/or textures will be used and how it will interact with light. For the buildings I use a shader called Self-Illuminated Diffuse. It's one of Unity3D built-in shaders.

Shaders usually need some parameters to work with - like colors or textures. A material is essentially a shader and a number of objects that define it's parameters. Self-Illuminated shaders expect one texture for the color and the other that determines the amount of light emitted by this texture. It's great for creating objects that emit light like bulbs, neon signs or... windows in a night scenery (it's important to understand however that the object emits light but this light doesn't illuminate any other objects around it).

I use the window image as the color texture, and the procedural image with random alpha values as the illumination map texture. The trick is that I set the scale of the color texture to 64. This way the window is repeated 64x64 times on the material and each pixel of the procedural illumination map (scaled 1:1) corresponds to one single window. I also set the filtering mode of the illumination map texture to Point, so that it doesn't get blurred when seen form a bigger distance.

A word on optimization

The generated buildings have different width, height and depth. A natural solution to apply textures on all of them was to create a material that repeats the windows the appropriate amount of times for each building. Ex. a 4 story building with 3 windows in a row would have a material where the x-scale of the texture is set to 3 and y-scale to 4. The emission map scale needs to be divided by 64 in this case, giving values of 3/64 and 4/64 respectively.

While this seems quite ok, it poses an optimization problem. Unity3D is much more effective when there's a lower amount of meshes composed of large amount of vertices, rather that the other way around - lots of meshes with few vertices. One building has 20 vertices and I create 2500 separate meshes! It's far from optimal, and you can really feel the framerate going down because of that. Fortunately there is a built-in script called CombineChildren that automatically combines all the buildings into one huge mesh making everything work much faster and smoother. But (of course) there is a trick!

Unity3D will combine objects only if they share the same, exact material. The scale of a texture on a material is unique, so if there are two materials that are identical and the only difference is the scale of the texture, we still need 2 different materials. In the above scenario almost each building uses a different material, unless it has exactly the same number of stories and the same number of windows in a row. I had to come up with a way to use only one material, and to deal with texture coordinates in a different way.

The answer is to use UVs instead of the texture scaling. So I started by creating only one material, which contains 64x64 windows. If a building is ex. 20 stories high and has 6 windows in a row, this means that the wall of the building needs to be mapped to the texture with this coordinates [0, 0, 6/64, 20/64]. Remember that UV values are normalized, i.e have values between 0 and 1, 0 pointing to the left/top pixel of the texture, and 1 to the right/bottom.

This way I can reuse the same material on every building regardless of it's size. It works even on buildings that are higher that 64 stories, because UV values are repeated - ex. an UV value of 1.2 is the same as 0.2. Perfect!

One little problem still persist though. Since each building uses the same material it also has the same pattern of lit and unlit windows. It doesn't look nice. Fortunately there was an easy solution for this: to offset the UVs of each building by a random value multiplied by 1/64. That way each building is mapped to a different area of the of the material and things look more natural.

Effects

To make the cityscape more interesting I added a Glow image effect to the camera. It adds a subtle glow around lit areas of the scene - in this case the windows, giving it a slightly blurry look.

Source

You can grab the package with the source code here.

Recently I had the privilege to write an article for .NET magazine. It's an introductory tutorial to Unity3D in which you'll see how to build a car simulation in a simple desert scenery.

Those of you who had attended my sessions at FITC Amsterdam and at the March LFPUG meeting have already seen me building it live. The nice thing about Unity3D IDE and its drag & drop abilities is that you can actually create a car simulation in 10 minutes. But don't be fooled, because tweaking it afterward takes ages - as with everything else. Anyway, now you can see and try it yourself. I hope you'll like it!

The tutorial will lead you through different features of Unity3D like the terrain editor, 3D assets import, built-in scripts, projected shadows and particle system. It is available in the UK and elsewhere in Europe from March 30th (issue 201). It will be published in the US and Canada too, but a month later (also please note that .NET Magazine is called Practical Web Design on the other side of the Atlantic).

To make the tutorial as enjoyable as possible I put in all my modeling skills to create a nice car - a classic U.S. Army Jeep Willys. I also added a few simple scenery models like a hut and a dried tree trunk that can be used as obstacles. You can see a demo based on those models here.

Here's a little piece I made after the image decomposer. This time I wanted to load videos instead of images. I had the idea to project them on a big screen so that the user can actually feel like he is in a movie theater. I started to play with it, I modeled a cinema interior, setup the lightning and I thought it's pretty neat.

You can walk around the theater with cursor keys and space to jump over the seats. If you go into the corridor in the back the movie will pause (wouldn't it be nice if that happened in real life too?). Use the left mouse button to toggle a flashlight.

Unity3D currently supports videos in Ogg Theora format only. Although it's free, it is not very popular on the net. It's mainly used by Wikipedia and Archive.org for the video content.

The demo works the same way as the image decomposer, which means you can append a URL to any valid Ogg video on the web and you should be able to watch it. To start, here are a few interesting movies I found:

Sita Sings The Blues, an animated film produced and directed by Nina Paley. More info...

Big Bucks Bunny, a short computer animated film by the Blender Institute. More info...

The Blob trailer, 1958 movie with Steve McQueen. Back then it was scary, today it's funny.

The Adventures of Flash Gordon, 1955. Probably a very bad movie.

Dynamic loading of videos in Unity is easy and it's well documented. The code is almost exactly that same as with images. I won't publish the sources this time because there is very little code in it, on the other hand there are over 50MB of textures in a pretty big mess.

If you find (or create) an Ogg encoded video worth watching post a link in the comments.
Have fun!

Just as I was thinking about an interesting demo to play with drawing functions in Unity3D, Mrdoob published his Harmony drawing tool made with HTML5/Canvas. It looks really cool, so I though how about doing this in 3D? I only had to figure out how to draw lines.

I did some research and below I present 3 different solutions. You can grab the source of the examples discussed below here.

Drawing lines with Line Renderer [demo]

When it comes to lines, the first thing you'll bump into in the Unity3D API is the Line Renderer component. As the name suggests, it is used to draw lines so it seems the right tool for the job. Lines in this case are defined by 2 or more points (segments), a material and a width.

It has an important limitation: the line must be continuous. So if you need two lines, you need two renderers. The other problem is that the Line Renderer acts very strangely when new points are added dynamically. The width of the line does not seem to render correctly. It's either buggy or just wasn't designed for such use. Because of these limitations I had to create a separate Line Renderer for each tiny bit of line I'm drawing.

It was easy to implement, but not very fast since I end up spawning lots of GameObjects each with a LineRenderer attached. It seems to be the only option if you don't have Unity3D Pro though.

Drawing lines as a mesh using Graphics [demo]

The Graphics class allows to draw a mesh directly without the overhead of creating game objects and components to hold it. It runs much faster than Line Renderer, but you need to create the lines yourself. This is a bit more difficult but also gives you total control of the lines - their color, material, width and orientation.

Since meshes are composed of surfaces rather than lines or points, in 3D space a line is best rendered as a very thin quad. A quad is described with 4 vertices, and usually you'll only have the start and end points and a width. Based on this data you can compute a line like this:

First, you get the normal of the plane on which both start and end vectors lie. This will be the plane on which the line-quad will located. The cross product of the normal and of the difference between end and start vectors gives you the side vector (the "thin" side of the quad). You need to normalize it to make it a unit vector. Finally calculate all 4 points of the rectangle by adding the side vector multiplied by half width to both start and end points in both directions. In the source code all this happens in MakeQuad and AddLine methods, so take a look in there.

It wasn't easy to implement, but once I was there it runs pretty fast.

Direct drawing with GL [demo]

No fast is fast enough! Instead of leaving this topic and live happily with the Graphics solution, I kept searching for something even better. And I found the GL class. GL is used to "issue rendering commands similar to OpenGL's immediate mode". This sounds like fast, doesn't it? It is!

Being much easier to implement that the Graphics solution it is a clear winner for me, the only drawback being that you don't have much control over the appearance of the lines. You can't set a width and perspective does not apply (i.e. lines that are far behind look exactly the same as those that are close to the camera).

Conclusion

For massive & dynamic line drawing LineRenderer is not the best solution, but it is the only one available in Unity free version. It can surely be useful to draw limited amounts of static lines and this is probably what it was made for. If you do have Unity3D Pro, the solution with Graphics is reasonable and very flexible but if it is performance you're after choose GL.

I believe however, that Unity3D is much more that a game development platform, and all those kind of projects could be tackled with Unity3D as well. In some cases the result would be pretty awesome and way beyond anything we can currently dream of with Flash and Actionscript - and this kind of opportunity is what I am looking for. (In some other cases it could end up with a disaster, similar to what happens when sites that clearly require HTML are done with Flash. We will see those too, simply because errare humanum est).

Technology adoption is not as fast as we could wish. I'm sure that eventually Unity3D will become the standard for 3D applications on the web, but we're not there yet. So far it has been very successful with games for the iPhone and it starts to emerge as the tool of choice for online games. The advertising business will follow and adopt it as well. We can expect top interactive agencies and production companies to start releasing Unity3D productions soon. I hope this will happen within this or the next year. Chances are that such projects are already in the making.

The reason why this will happen is that Unity3D is versatile. It is marketed as a "game development tool", but it has numerous features that allow much more that that. It allows to integrate diversified content (2D, 3D, video, sound), has a great animation tool and a powerful scripting API to create any kind of complex logic.

As I got back from FITC Amsterdam loaded with new energy and inspiration, I decided to take a deeper look at Unity3D scripting and go at least a bit beyond the basics and beyond the "building a 3rd person shooter" scenario. As a long time Flash developer there are some problem/questions that are typical to Actionscript technology and I decided to check how similar problems can be solved with Unity3D. Here are the first few questions that came to my mind, pretty basic actually:

1. How to dynamically load an image into Unity3D and do something with it?
2. How to load a video?
3. How to draw lines, points and shapes at runtime?
4. How to generate content with code?

The questions order starts with those that have been easiest to answer. I have some more questions lined up, so this post might get updated. Anyway, in the coming days (or weeks rather) I'll be posting the solutions. I made some experiments, I have some code to share and some tips that I found on the way. See you soon!

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 Miami and the Florida Keys.

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!

Ringo from FlashBookmarks asked me if there were modifiers similar to AS3Dmod in Unity. I searched for something similar some time ago, but didn't find anything interesting.

However, when I was starting C# scripting, I ported two of the modifiers from AS3Dmod - Bend and Twist. So I thought to share them with everyone. Don't expect much, it's not the full library, just two classes. If I have some free time, I'll look into how to implement stacking, since for the moment you cannot apply two modifiers to the same object (the second one won't have any effect).

To play around with them grab this package and import it into Unity. Keep in mind that the modifiers work at runtime, so you won't see any effects in the editor until you run the game. If you want to animate them, just add another script that will have a reference to the modifier instance and change it's properties at each Update() call.

If you are interested in this kind of "bricolage" with 3D geometry, I recommend to take a look at the Procedural Examples project provided by Unity. You will find there some highly interesting samples like dynamic extrudes or perlin noise. It's a great starting point to explore runtime geometry transformation.

Of course, take a look into the sources of the modifiers too! You'll see how simple it is to access the geometry at runtime and do some modifications. Basically it goes like this:

Things worth notice: In Unity a vertex is just an instance of Vector3 - there isn't any special class for this, as in Flash-based 3D engines.

You can see a bit of the casting-drama I need to do (lines 1-2) to get to the object holding the actual geometry information (Mesh). That's a bit annoying in C#, with JS that code would be more readable. Anyway, it's better to make that only once, in Start() and not at every Update().

To get correct lightning effects on the materials, do not forget to call mesh.RecalculateNormals() after you've modified the positions of the vertices.

If you want to modify your mesh continuously (i.e. to animate it) it's necessary to keep the original array of vertices, because the code above overwrites the original positions. Take a look at the source code in the package to see how I did it.

That's all for now, hope you enjoy it!

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 ;)

I like books. A book is always a good thing, no matter how abundant online resources are. It's always at hand, with all the information brought together in one place, not scattered across different sites or even worst, across different forum threads.

When I learned a couple of months ago that Will Goldstone was writing a book on Unity3D, I was pleasantly surprised. A bit later Packt, the publisher of the book, contacted me asking for a review.

In the meantime the book hit the shelves, and there was some buzz on Twitter, so there's a good chance you've already heard about it. If you are still wondering whether you should buy it, keep reading.

Great for beginners

The book is written in the form of one big tutorial. The author leads us through different parts of the Unity3D IDE in the course of creating a simple game. The word "simple" is key here. Before I had the chance to read the book I went through the Unity3D official tutorial which has a similar structure. It presents us with a very cool 3D artwork and a pretty complex game to build. Compared to that, what we will create with the book is pretty basic. However, in this case: simpler means better.

After completing the official tutorial I felt I merely scratched the surface, and many parts of it were too complex to follow. The book doesn't leave you with this feeling. You'll be guided in creating a game but you will do it from scratch and all the steps are explained in depth.

Scripting

I assume most readers of this blog are familiar with programming. In this case you may find the code presented in the book somewhat rudimentary. One way of making it more fun is to translate the code from JavaScript into C# on the way. I did that, and I think it's much more beneficial than just copy-pasting. At least you will read it that way.

Furthermore, Actionscript 3 programmers can find that some examples are bending the rules of strict OOP. Again, for a seasoned AS3 developer, restructuring the code in those places can be another good exercise.

The book covers obviously more than just scripting. Among other topics, I particularly enjoyed the chapters on particle systems and on 2D GUI (as you will find out, 2D GUI is the weird part of Unity)

Other ressources

An indispensable companion of the book is the Unity scripting reference. The docs are solid and in most cases you'll find what you're looking for. Not always however, and if you feel you need more info I recommend to search the forums. I am not a fan of forums overall, but I must admit that the Unity3D forum is a pretty good resource.

A remark on the Unity3D documentation

A bit off-topic, but I will take the occasion to rant about the Unity3D scripting documentation. Not about the content, but about the form.

In the Unity3D docs the list of classes is sometimes placed on the left column, sometimes in the middle. Sometimes they are listed in alphabetical order, sometimes presented in an inheritance structure. Every property and method is presented on a separate page, which is a big waste of space given the fact that most of them have max 2-3 lines of description. It leads to constant back/forward clicking when exploring the API. And it might get even worse when Unity will introduce namespace support.

It would be cool if the docs followed the good old Java standard, where the list of classes is always in the same place, always accessible and in alphabetical order. The properties and methods are listed in one big table, which is also much easier to browse.

OK, enough complaining, now back to the book...

Conclusion

If you want to get into Unity, it's probably a good idea to buy this book. You'll get yourself a decent introduction to the main aspects of the software. Remember that you won't learn any advanced stuff like stucturing code in large projects, writing custom shaders or making advanced physics simulations. The important thing is that the book explains all the basics leaving you well prepared to explore the rest. I enjoyed reading it and I learned quite a lot!

UPDATE Nov 2009 There is a better quality video posted by John from Flash On The Beach. It is available here: http://vimeo.com/7292505.

As I promised during my "3 minutes" in Brighton, I publish all the sources of my presentation. I added some comments in the code and removed the part with the slides.

Here's also the demo and a video of the mini-session. The demo is pretty rudimentary - I made so because I wanted to keep things simple during the presentation. I hope that it will be a solid base for someone who wish to create a full featured bowling game in Flash.

There were a few other implementations of a bowling game in JigLibFlash and Papervision3D. Initially, guys a Blitz Agency published a few interesting experiments with JigLibFlash, including a simple bowling simulation. Devon O. Wolfgang has written a great tutorial about building such a game on Tech Labs - be sure to check it out. I found it only after the presentation and since the tutorial explains a lot of things in details I felt like I was reinventing the wheel here. But hopefully there are still a couple of things I can add.

Thanks to the new plugin API we developped some time ago, setting up a scene with JigLib and an 3D engine has got a bit less complicated. However, tweaking the engine can be a hell. Here's a few things I found out:

1. Simulation speed

When you create the physics engine instance, the default speed of the simulation is 1. This is very slow and unrealistic. It will look much more natural if the speed is increased. Beware however - at higher speeds the collision detection system can be very inaccurate and result in objects running through each other without any collision being detected. I don't think there is a single setting that works fine in every situation, but for this case 9 worked fine for the regular speed simulation, and 2 for the "slow speed". You should always try different settings.

2. Mass

Each rigid body has a mass property. It's easy to forget about it since it has a default value and it never complains if you don't change it. However, setting the masses right is crucial for a realistic simulation. In real world object have different masses, and so they should in a simulation. This is particularly important for a bowling game, where the ball is pretty heavy and the bins are not (I guess... has anyone ever had a bowling pin in his hands?) The trick is that the masses are relative to each other, so the more different objects you have the more you need to tweak the masses to get the results right. Also remember the effect of any forces applied to an object is related to it's mass.

3. Physics material

Each rigid body has a property called material which is an instance of the MaterialProperties class. It has two properties: friction and restitution. I found out that playing with this values has a quite big impact on the simulation. Ex. setting a high value of the restitution results in the object becoming bouncy - I used this for the ball in my older ping-pong example. In the bowling demo I used lower friction on the ball to make it slide more - just as a real bowling ball does.

4. Object rotation

Once a DisplayObject is wrapped into a physics rigid body you can't rely on it's rotationX, rotationY and rotationZ propeties anymore - because they are not being set. The physics engine sets the transformation matrix directly on the DisplayObject, so if you need to check it's rotation you need to extract it from the matrix. Fortunately, there's an easy way to do this:

5. Object activity

As a result of multiple forces being applied to an object and multiple collisions sometimes the objects are left in a state where the shake a bit endlessly. This can also happen when the objects are initially positioned. Calling the RigidBody.setInactive() will fix that. And you can call more than once.

Important conclusion: tweak, tweak, tweak...

It is generally agreed that hardcoded ("magic") numbers are not a good coding practice. However in 3D animations, and especially with physics the important thing is not the beauty of the code, but the what you see at the end. If you browse the source code from this demo you will notice that I not only hardcoded a lot of values, I even left ugly lines like that:

In fact this is what I like the most in doing all those demos and experiments - the moment when code stops being just a list of instructions for the machine and becomes an art of making things look good by adding little tweaks here and there. If you tend to write very clean code and use all possible standards and conventions, from time to time make it ugly... you'll see how good it feels :)

I hope that this few tips will help you with your next JigLib project!

Last but not least, I'd like to say thanks to everyone who woke up early to see the Elevator Pitch session. It was a great experience being there and talking to you. The Brighton Dome packed with people can be intimidating and 3 minutes is not much time, so there was no place for mistakes. Fortunately, the FOTB technical crew made it all seamless. Great job guys!

Finally, I would like to give a special thanks to John Davey for inviting me to Flash On The Beach and for making this great conference happen!

Hope to see you next year!

I extremely happy to announce that I will speak at this year's Flash on the Beach in Brighton. It starts two weeks from now and if you haven't already got a ticket it might be too late, because they're all sold out (sorry).

It will be my first appearance on such major Flash event. I am taking part in the Elevator Pitch session, which features 20 speakers (!) in 1 hour - 3 minutes each. So it won't be a long presentation, but be sure - it will be intense. I will show a new 3D Flash experiment made especially for FOTB. The session takes place on the second day of the conference, Tuesday 22nd at 9AM in the Brighton Dome. Hope to see you there!

On a related note: if you live in Antwerp, on September 16th I will be also speaking at an event organized by my friends at Mr. Henry. I'll present some of my new and older experiments and talk about 3D in Flash in general. You can find more info about this here.

Unity3D offers a choice between 3 different programming languages: JavaScript, C# and Boo. Each of them has its pros and cons, but for me C# almost immediately came out as a clear winner. That is because it is fully object oriented and it's syntax is similar to Java and Actionscript 3, both of which I am experienced with. However, before I started to play with Unity3D, I never wrote a single line in C#, so I had to learn it from scratch.

As you probably know C# was originally developed by Microsoft and is widely used in the .NET framework as well as in Silverlight development. It is important to understand however that learning C# for Unity3D is not the same thing as learning the .NET platform. In fact you don't have to know anything about .NET to use C# with Unity3D.

While I use all kinds of online documentation, a book is often the best companion, so I thought buying a good C# book would be in order. It turns out that the small O'Reilly C# Pocket Guide is exactly what one needs. It is absolutely unnecessary to buy a 500 page C# bible, as most of the stuff in those books is related to .NET and is not applicable to Unity3D at all.

Of course the book alone is not enough. You also need the Unity3D scripting reference. All the examples in the docs are given in Javascript only. But don't worry, they are easy to translate once you get used to.

C# is a very elegant and powerful language. It's dot-syntax is based on Java, so if you come from a Java background you'll quickly feel comfortable with it. There are a few differences though. The most striking difference is the convention to start property and method names with an uppercase letter. I guess it comes from Visual Basic. I am not a fan of this convention, but it's better to use it and have a consistent code rather than fight it.

The list of all C# features is so long, that it makes AS3 look poor in comparison. C# is really like Actionscript on steroids. I suppose the next version of Actionscript will have at least some of those implemented, so it's good to know about them. Here's a list of my favorites.

Operator overloading

This is the coolest one by far! It allows to define custom actions for common operators like +, -, * or /. The best illustration of this feature comes with vector addition. In Actionscript, to get a sum of 2 vectors you need to write something like this:

This is not very nice, and becomes almost unreadable if more than two vectors are added. In C#, thanks to the overloaded + operator it looks like this:

This is much more readable and elegant, isn't it? It goes without saying that the 3D vector implementation in Unity3D has all the operators overloaded. In case you want to do it yourself however, the implementation of operator overloading is very simple and in the above case could look something like this:

There are some simple rules: the operator function must always be static and must return an object of type it is defined for. However it can take any type of parameters. This allows to define operator overloading for adding or multiplying vectors but also for multiplying vector by a scalar or multiplying vectors by matrices. In fact this can be achieved thanks to another C# feature - method overloading.

Method overloading

Method overloading allows to define multiple methods with the same name provided that they take different parameters. It works with regular methods and with constructors as well. If there a multiple ways to create an object you can define multiple constructors to satisfy each case. As mentioned above it works with operators too.

A good example of method overloading in Unity3D API is the 'Transform.Rotate()' method. It has has been overloaded 3 times with different ways to specify a rotation:

You can either pass a vector of angle values, three floats - one for each axis, or a single angle combined with a rotation axis. This is only logical to call it 'Rotate' every time because this is what the method does at the end.

Actionscript has default parameter values, which in some cases can simulate method overloading but they are not quite as flexible as that.

Getter/setter syntax

C# has a very concise way of declaring parameters. While in Actionscript it takes two functions - one for 'get' and one for 'set', in C# it can look like this:

In this case the compiler automatically adds a private member for this property and there isn't anything else you need to do. Of course such a parameter is not very practical, so here's a more complex code, involving a public getter and private setter:

You will also notice that neither the 'function' nor the 'var' keywords do not exist in C#. In that C# closely follows Java. This is good because both these keywords are completely redundant and do not add any information to the code.

Among other interesting features I recommend to explore indexers, generic types, structures and enumerators all of which are covered in depth in the pocket guide mentioned above but also in the many online C# tutorials.

Editing C#

There are multiple editors that support C#. Microsoft offers a great and free editor called Visual C# Express Edition which features code completion, but is Windows only (obviously). For a Mac there's Mono Develop which looks very powerful, but is not very stable yet. Unfortunately the C# plugin for Eclipse is completely unstable for the moment, and I wouldn't recommend it. On the other hand, it is still in alpha so let's give it some time. Of course there's always TextMate.

Last but not least there's Unitron - the Unity3D default editor. It is not very popular among developers, and I saw people complaining about it being too basic. I don't share this opinion. While it ain't no FDT, it's pretty solid, very stable and has basic auto-completion. The trick is auto-completion is turned off by default (why?). To turn it on go to 'Preferences' and you'll find it at the bottom of the 'General' section. With that, I'm sure that Unitron is enough to get started.

Most of us know JavaScript from the browser environment. JavaScript is often the first programming language people ever used. If this is the case, you may be tempted to just use JS with Unity3D right away and not bother learning anything new. After all, as far as Unity3D is concerned, anything that can be done with C# can also be done with JavaScript.

However in the long term, C# offers better control over the code, full OOP support, strong typing and a lot satisfaction of mastering a robust programming language, so the extra effort is worth it. Plus, for a seasoned AS3 developer, mastering C# is a matter of a couple of weeks anyway, so go ahead and try it out!

UPDATE March 2010. Here's a new post about C# and Unity3D:
Loading and manipulating images in Unity3D
(more coming)

On June 9th the Polish Adobe User Group organized a Flash Camp in Warsaw. It was the first meeting of this kind in Poland. I had the privilege to be one of the speakers. It was a one day event featuring 6 sessions all related to Flash & Flex. It aroused great interest in the local Flash Community and more than 300 people attended

We kicked off in the morning with a very comprehensive presentation by Serge Jespers on the Flash Platform. Serge went through a lot of interesting projects including some of the best Augmented Reality examples. He also showcased his favorite AIR applications. Apparently AIR is not used only for Twitter clients! But seriously, I neglected this technology so far, but I promised myself to fix this in the near future. I'm looking for some ideas for a simple AIR app now... a Collada viewer maybe?

Next, the Platform Evangelist from Poland, Piotr Walczyszyn gave us an insightful presentation on Flash Catalyst and the new Flash Builder. I use FDT to do all my Flash stuff for some time now, so all the things he presented were totally new to me. I must say I was surprised how fast and efficient the new workflow is. Things like working directly with PSD files in Catalyst look great (how many hours have I spent "cutting" PSD files and importing them into Flash!) He build a complete application connected to a database without writing a single line of code! It was amazing... and a bit frightening too ;)

Wojtek Ptak made a great presentation about building large scale RIA's. Usually this kind of applications are not my primary interest but Wojtek showed us some really inspiring stuff and it was a pleasure to listen to him speaking.

Unfortunately I could not attend the other sessions, because I was rehearsing my own. It was my first public presentation, so I was pretty excited but also a bit nervous, especially that I did not expect such a huge crowd.

During my session, I focused on 3D in Flash (of course!). By showing some new and old demos I tried to explain the fundamental concepts of 3D graphics and how they are implemented in Actionscript. After my session I had a few minutes to answer some questions. Most of them were about Papervision3D, and the nature of those questions clearly showed that they were coming from very experienced developers. I did my best to answer all of them.

Overall it was a great experience, and I'd like to thank the organizers for inviting me. I like the idea of public speaking. It's a great way to share some thoughts and knowledge, but also, most importantly, to meet interesting people. I feel it nicely complements my blogging experience, so from now on I'll be looking for more speaking opportunities.

How I learned to stop worrying about plugin penetration and love Unity3D

I started this blog almost 2 years ago with an idea to explore the world of 3D in Flash and learn new stuff on the way. I quickly fell in love with Papervision3D. It offered a whole new world of possibilities for someone like me - bored with buttons & dropdowns and not particularly interested in building Flex-type applications.

Unfortunately the performance limitations of Flash Player prevented me from going far beyond the demos I posted on this blog. Creating a solid piece of 3D in Flash, with a decent frame rate is either impossible or requires an insane amount of code optimization. It often means resorting to low level programming. I think it is dangerous, because it's easy to loose track of the overall picture then. I feel that this is what happened to me the last few months.

I sure heard about Unity3D before, but, as it often happens, I did not have time to take a closer look. I applied for the Unity 2.5 beta test program back in February. I was accepted and got a 30-day copy of the software. What happened next? I opened it only once before the trial expired.

It's just hard to move to another software/platform when you are so completely immersed in Flash. Unity3D ended on my perpetual to-do list alongside with so many other things. I am sure many of you feel the same way.

A new toy

Recently I bought a Macbook Pro. My first Mac ever! A friend suggested that I move all my projects and workspace to the Mac immediately to make the transition fast. Unfortunately I had some difficult and urgent projects to finish, and ultimately I decided to stick with Flash on the PC for a while.

I had to do something with the Mac then... and that's where Unity3D comes in. Additionally, this time I decided to buy a license, thinking that spending those 150 EUR extra will make me even more motivated.

After just a few hours I was amazed. And I mean AMAZED! You can check the Tropical Paradise demo if you haven't seen it yet, download the trial copy and start exploring the 3D Game Tutorial to see what I mean.

It's not only how fast the 3D rendering is. Unity3D has a very intuitive interface organized around a simple and clear concept. I can literally see myself doing 3D games in a matter of weeks from now. Doesn't take long to realize the sad truth that Flash is far behind in almost every aspect.

The myth of high penetration

I do not want to do a list of pros and cons or some Flash vs. Unity3D comparison here. For a person who wants to do 3D for the web Unity3D is the winner by knockout and it makes no sense to elaborate on the subject.

However, there is one common argument against Unity3D. It's the low penetration rate of the web plugin. While Flash Player is at 98%, Unity3D is probably at < 1%. Aye! That sounds bad, doesn't it? I thought so too, but I made some thinking and researched a bit. Now please consider these points:

• Unity3D plugin is only ~4MB and it's installation is seamless. In most cases, it doesn't even require browser restart. Thanks to this it has a high successful-install rate, which means it's share of the market will be quickly growing. You can read a whole article on this topic here.
• Content created with Unity3D can be visually and interactively much superior to anything you can do with Flash. This will convince people that the little extra effort required to install the plugin is worth it.
• Most important argument: people access content from different devices. There are mobile phones, consoles, multi-touch interfaces etc. PC is no longer the king. Unity3D can be published for two of the most successful platforms out there: iPhone and Wii. "Web penetration" has no practical meaning in this case.

So, if you think Unity3D is not worth looking at because of the low penetration of the web plugin, think again!

This blog note may seem emotional. It is! I feel I have discovered the perfect technology, that I have been looking for and I just wanted to share. Now I need to master Unity3D as quickly as possible. On my way I will certainly discover it's flaws... it must have some. Maybe later I will find a more objective way to compare Flash and Unity.

Flash is much more than 3D and there are multiple directions it is evolving in. I am not predicting "the end of Flash" or anything like that - it would be ridiculous. Unity3D on the other hand, with all it's coolness is still the new kid on the block. It might be a huge success but it might as well share the fate of Wild Tangent and Shockwave players (I hope not!).

One thing is sure: if you are into 3D, you can't miss it!

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!

Augmented Reality (AR) generated so much buzz in the community in the last few weeks that I had to give it a try!

I suppose most of you know what AR is, however just in case you don't, here's some basic facts from an Actionscript developer perspective: augmented reality uses pattern recognition to render 3D graphics on top of a video display. A pattern, also called marker, is a rectangular shape that you need to print and position in front of your camera. The stream from the camera is analyzed and the marker is used to determine the coordinate system of the world captured by the camera. This coordinate system is passed to a 3D engine which renders objects on top of the video image. Pretty simple, huh?

As far as Flash is concerned, the API for augmented reality is called FLARToolkit, which is an AS3 port of library written in Java and C done by Saqoosha. If you want to know more about this project, here's a great intro to the subject written by Mikko Haapoja.

In most of the cool AR projects I have seen so far [1] [2] the user is supposed to hold the marker and move it around in front of the camera and the 3d object follows the marker. I had a slightly different idea: why not just leave the marker and the camera in one place and use your keyboard to move around the 3d objects?

Some time ago I posted a demo featuring a Mustang that you could drive around a desert scenery. I thought it would be cool if I could now drive it around my bedroom floor. I was very surprised how easy it was to integrate my model with FLARToolkit and Papervision3D. All I had to do was to scale and rotate the model a bit and that's it!

The above video shows a recording of the experiment. If you have a webcam you can try it yourself. To do this, follow this instructions:

1. Print the marker (You can alternatively display it on your iPhone)
2. Click on this link, and choose "Allow" from the security dialog
3. Point your webcam so that the marker is fully visible
4. When the car is loaded (~250kb) it will appear on top of it
5. Use cursor keys to drive the car and CTRL key to apply hand brake
6. Have fun!

If you want to dig further here's the source code. The whole magic is in the FlarMustang.as class. The rest of the classes are an adaptation from the FLARToolkit basic example and some classes I used for the Mustang demo.

Unrelated note. In case you are reading this post in your RSS reader, you might not have noticed that I redesigned the blog. It's good to change from time to time! Among other stuff, there's a new list of previous 3D experiments and new links in the blogroll, so take a look.

Demos: [ 1 ] [ 2 ] [ 3 ] [ 4 ]      Flash Player 10 required (obviously)

Flash Player 10 has been around for a few months now. As most of you know, it brings some native 3D support. It's not as robust as Papervision3D or Away3D, and in fact was not designed to compete with those engines. Rather than that, it contains classes that perform 3D calculations and allows basic 3D manipulation of display objects.

The last months I focused on catching up with 3D math. I ordered a book called "3D Math Primer", which explains in detail all the vector and matrix operations involved in 3D graphics. Even though the examples are in C++ I recommend this book to anyone doing 3D in Flash. The authors made a great effort to explain the subject with clarity. It worked pretty well for me and I understand the math behind 3D much better now.

Both Papervision3D and Away3D were created so that we don't have to deal directly with 3D calculations. If you are working on a project that involves non-trivial 3D and has a deadline, it's better to choose one of those engines instead of "pure Flash Player 10".

However, if you just want to do some casual experiments and learn something on the way, FP10 is great. It offers a small number of tools, focused around Vector3D and a Matrix3D classes. These classes offer low level functionality, so to use them one needs to understand what's going on under the hood. This is a great way to learn!

Then I had this idea to port AS3Dmod to Flash Player 10 and try to run the modifiers on objects created using FP10 3D classes. It turns out it was not so difficult. Instead of rendering textured 3D objects I just render a single pixel for each vertex. Thanks to this I get a relatively good performance even with as much as 8000 vertices. I found that a modifier applied to such a large amount of vertices, gives interesting visual effects. I even wrote a very simple Wavefront OBJ importer, and I could import the 3d pants model from one of my previous posts to render them in Flash Player 10.

All my previous demos with AS3Dmod involved pretty small amount of vertices - most often no more than 500-600. At this level the performance of the modifiers was not a problem. But with 8000 vertices the modifiers start to have an big impact on the frame rate. A Perlin modifier alone takes 4-5 FPS, which is quite a lot and it got me worried. I believe code optimizations are in order. An interesting solution could be to implement the modifiers as a Pixel Bender kernels. Anyway, I need to do some more research...

In the AS3Dmod SVN you'll find the FP10 branch. The main difference between this version and the trunk is that it uses FP10 built-in Vector3D and Matrix3D classes as well as Vectors instead of Arrays. The sources for all experiments mentioned above, including a simple AS3Dmod plugin for FP10, are available here.

Take a test drive with a powerful Mustang GT in a desert scenery! This demo features a car model imported from Maya into Papervision3D. It uses some home-made physics to simulate the car movement and a couple of new AS3Dmod features to manage the model (more below).

I created this demo together with Krister Karlsson. Krister is a 3d artist working with Maya and founder of Modesty - a Stockholm based creative agency. The (super)low poly Mustang used here is based on a concept model made by Krister that was later used to create an actual car! You can read more about this project here.

Working with this demo has been an occasion for me to explore all the spectrum of Flash 3D related development, like importing and managing a complex model, adding interaction and scripting car physics. All this with a reasonable performance in mind, of course.

There is quite a lot of source code involved in this demo. I won't be publishing it all as parts of it are rather messy. Instead I'll focus on some particular problems I've encountered and solutions to them.

Pivots. I can't tell if this is a problem of the Maya Collada Exporter or if we have been doing something wrong, but the fact remains that moving the pivot point of an object in Maya is not reflected in Papervision3D. Instead, all pivot points default to the center of the whole object when the DAE file is imported.

To fix it, I had the idea to move the pivot point in Actionscript. Unfortunately, there isn't an easy way to do that in Papervision3D. This problem is generally solved by putting the DisplayObject3D inside another and move it in relation to its parent. But when all the objects are part of a structured DAE it becomes quite painful and requires additional steps. So instead, I wrote a modifier that takes care of that. It's called Pivot, and this is the way it works:

This piece of code will move the pivot point -200 units on all 3 axes. In case of this cube it will end up in the lower left corner. It does it without creating any additional display objects, but rather by offsetting all the objects vertices.

Please note that I collapse the stack after applying the pivot. Otherwise the pivot would be moved at every call to stack.apply(), which is not what we are looking here for.

The problem with the Mustang model was that all 4 wheels were rotating around the center of the car rather then around individual centers of each object. I needed to move the pivot point to the center of each wheel. I thought that moving the pivot to the geometrical center of the object is a typical thing to do, so I create a shortcut method for it:

Calling this function automatically sets the pivot point in the geometrical center of the mesh. At this point I thought I was done with the wheels, but there was one more problem...

Roll & steer. I think anyone who ever created an interactive 3d car model must have faced this one. A wheel rolls around the Z axis and the steering goes along it's Y axis. So, the first think that came to my mind when I started to code it was:

While this code seems perfectly logical, when put in action things go wrong and the wheel starts to act like if the car had undergone a severe crash.

The reason for this is that once the wheel rotates along the Y axis (turns), the Z axis is no longer the right axis for roll. The correct axis would be the Z axis rotated 30 degrees on the XZ plane.

Again, a solution would be to enclose the wheel into a parent DisplayObject3D and then use the parent to steer and the child to roll. However, since I had already an elegant solution for the pivot I didn't want to clutter my model with an additional set of elements for this one either.

There comes the Wheel modifier. Apply it to an object - typically of a cylindrical shape - and use its speed and turn properties to manipulate the wheel.

Internally the modifier applies some math to rotate the roll axis according the the current turn value so that everything looks fine and you don't need to worry about it ;) Read the documentation of this class for more information.

All this new features are available in the latest SVN revision of AS3Dmod. So, go ahead and grab it later. But first, enjoy your ride!

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!

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!

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.