Everyday Flash

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.