3D engines for Flash

I’ve been fol­low­ing from afar the pro­gresses in 3D engines for Flash for some years. Recently I wanted to dive in the Z dimen­sion, be it fake nev­er­the­less. So here’s an overview of the cur­rent situation.

The good

Per­for­mances

Until the likes of Paper­vi­sion, dynamic 3D ren­der­ing was rarely used in Flash web­sites. The lat­est Flash Play­ers brought some con­se­quent changes upon pro­cess­ing speed. Hence it allowed some 3D engines with rea­son­able per­for­mances to peek their nose in the community.

3D engines give an extra dimen­sion to cre­ativ­ity, though they aren’t fit for com­plex scenes yet. Even the Alter­na­tiva engine has its lim­its, those of the Flash Player. It’s been a few years since the com­mu­nity asked for hard­ware sup­port so that we can get rid of some slow per­for­mances. Well, with the Flash Player 10, you will be able to choose dif­fer­ent dis­play modes like nor­mal, direct and GPU. You have to be very care­ful if you decide to set the GPU mode.

These modes in gen­eral should be con­sid­ered still in beta, there may be a lot of bugs until pos­si­bly Flash Player 11 so use caution.

This quote is by Jody Brew­ster who gives some pre­cious Flash Player 10 GPU accel­er­a­tion tips on his blog.

Gimme the sources

Most of the 3D engines in Flash are free, both for per­sonal and com­mer­cial use. And most of them are open source (except Alter­na­tiva, to my knowledge).

The bad

Looks

3D engines also mean an extra dimen­sion of com­plex­ity, and increased risks to make bad visual designs. This can lead to an “UGH” fac­tor where the 3D looks either dull or slow or complicated.

It usu­ally holds true that the big­ger the scene, the slower and lag­gier. Same goes for details and the amount of objects on the scene. Your bitmaps may also look very jaggy or ali­aised so you will loose the “smooth” graph­ics fac­tor. You can always try to make up with nice 3D motions.

Do not expect your 3D to look as smooth as a 3D video ren­der from a soft­ware like 3DSMax. Depend­ing on the engine, you might as well endure back­face culling prob­lems, basi­cally mean­ing some poly­gons of your 3D object won’t show up when sup­posed to do so.

In the image above, you can see a part of msnbc Spec­tra. You can eas­ily dis­tin­guish that the text on the vio­let panel is weirdly dis­torted with the Paper­vi­sion engine. The “wow” effect is here but this visual bug makes it a lit­tle less impres­sive. FIVe3D would have been com­mand­able here as it dis­plays fonts using the vec­tor API of Flash. That “detail” aside, Spec­tra is still a very nice exam­ple of a good 3D user interface.

Update on 23 July 2008 (by Seb) :

The rea­son for that dis­tor­tion is that the Flash­Player can only per­form skew trans­for­ma­tions on bitmaps; in order to get any kind of 3D stretch we need to resort to using this hack.

Things are how­ever improved with Flash­Player ver­sion 10 — we now have the abil­ity to do proper 3D per­spec­tive stretch­ing on bitmaps, and so this hor­ri­ble dis­tor­tion should be a thing of the past.

Overkill

You have seen it com­ing, why not build 3D Flash ban­ners ? A 3D engine (in activ­ity) con­sumes a lot of CPU power. Think twice before going all out with a super-3d-banner-of-the-death which plays con­tin­u­ously heavy 3D stuff. Who said com­mon sense ?

Hack and slack

In the end, Flash is still not ready for 3D. The Z dimen­sion is now afford­able thanks to the devoted work of some flash­ers but their engines are built on a weak plat­form, that is the Flash Player. It still can­not han­dle bitmap pro­cess­ing quickly, which is the biggest bar­rier to 3D. Alex Cove (author of the 2D physics engine APE), asks “does it always have to be a hack ?” truth­fully. Is Adobe wait­ing for some mir­a­cles from the com­mu­nity to move on to 3D ? Flash Player 10 is a begin­ning to this but it doesn’t even include Z-sorting so you end up doing it manually…You end up tak­ing Away3D and wait­ing for the Flash Player 11 patiently.

Still, Adobe has been lis­ten­ing a tad bit to the community’s requests (busi­ness obliges), as Macro­me­dia did in the past. Changes like that take some time, espe­cially for the Flash Player which wasn’t meant for 3D in the first place.

3D real time engines

Sandy

Sam­ple : Telenor Body Lan­guage, Sandy demo

Orig­i­nally, the project had sev­eral mem­bers but it is bit of a run­down now, with only one mem­ber left, Thomas Pfeiffer.

Sandy is not to be over­looked how­ever. It’s the first open source 3D engine and it has some very pow­er­ful fea­tures with light rendering.

Paper­vi­sion

Sam­ples : Audi Rhythm of lines and msnbc Spec­tra

Paper­vi­sion rose with a bet­ter com­mu­ni­ca­tion and is backed by some noto­ri­ous Flash per­son­al­i­ties. All that Sandy didn’t have.

It’s by far the most famous of the 3D engines avail­able, and one of the most com­plete too. It is avail­able at ver­sion 1.5 on the blog’s down­load links. The next Paper­vi­sion 2, called Great­White, is in beta cur­rently and only avail­able on SVN repository.

Away3D

Sam­ple : Fifa Street 3

It is con­sid­ered as an exten­sion of Paper­vi­sion, though the two authors had to rewrite a lot of the base classes. The project is hosted on away3d.com.

Away3D still lacks doc­u­men­ta­tion a lot. From what Rob Bate­man said, this will be solved soon.

As announced in an arti­cle on Papervision’s blog, Away3D is planned to merge with Paper­vi­sion Great­White. Update on 12 July 2008 (thanks Seb) : Paper­vi­sion has by now inte­grated a part of Away3D’s fea­tures. Both projects are still on going.

WoWEngine

Sam­ple : tech­ni­cal demo

Jerôme Birem­baut devel­opped the WoWEngine and nicely made it avail­able to every­one on his blog.

This engine is very inter­est­ing because it mixes some bases of Sandy with an exten­sion Jerome wrote of the 2D physics engine APE. The result is a 3D engine with physics fea­tures like col­li­sions, cloth and rope sim­u­la­tions to name a few.

It is very likely you’ll use this engine if you want both 3D and physics inter­ac­tions within your application.

Alter­na­tiva

Sam­ple : 3 demos on their web­site.

This engine is a killer. It is devel­opped by a russ­ian team. They’re invited at the com­ing Adobe MAX at Milan, in decem­ber (2008), one extra rea­son to attend this huge event.

Alter­na­tiva has been pub­licly released but it is free for per­sonal use only. Licences must be pur­chased for com­mer­cial use. You should take a look at what this engine can do. One word for them : Отлично !

FIVe3D

Sam­ples : FIVe3D home­page itself which includes 5 samples

Math­ieu Badi­mon wrote a small 3D Engine as “an open source code for the con­cep­tion of inter­ac­tive vector-based 3D ani­ma­tions”. The FIVe3D home­page is a good imple­men­ta­tion of the engine.

This engine relies upon the Flash Player to han­dle vec­tors, rather than bitmaps with the afore­men­tionned engines.

One of its strengths, aside from being very light (10KB), comes from the way the engine han­dles fonts. With FIVe3D, you can use any font you want to any size with­out barely any ali­ais­ing or ugly text arti­facts you might see in Paper­vi­sion. A good choice for titles and head­ers. The lit­tle short­com­ing to this is that you have to use addi­tional font data (stored as an AS3 class). It is for­tu­nately gen­er­ated auto­mat­i­cally by the tool Math­ieu pro­vided on the FIVe3D web site but it still weighs around 50KB for sim­ple fonts.

Update on 23 July 2008 (thanks Seb, again) : attempt­ing to ren­der a lot of text with FIVe3D will result in a fram­er­ate drop due to the heavy cal­cu­la­tions that the vec­tors imply for the Flash Player.

What engine shall I pick for my project ?

You don’t nec­es­sar­ily have to choose only one 3D engine. You can eas­ily use mul­ti­ple engines, each for a dif­fer­ent use. This point was dis­cussed last month at the AUGG (Adobe User Group of Geneva) meet­ing about real time 3D engines.

So for instance you could make some intro with large titles with FIVe3D, then dis­play some sim­ple tex­tured objects with Paper­vi­sion and con­straint them phys­i­cally with WoWEngine. Even among the sam­ples listed above, there are cer­tainly some cases where sev­eral engines were used together.

Not to men­tion many projects don’t rely on sole 3D but also blend some videos of 3D ren­ders as you can see in the Fifa Street 3 sample.

Can I import 3D models ?

Yes you can. Sandy, Paper­vi­sion and Away3D can import Col­lada files to dis­play com­plex meshes (read less sim­ple than just a sphere or a few boxes).

Some 3D soft­wares can’t export do not have a built-in exporter for Col­lada files yet. If you want to export using this for­mat, you’ll cer­tainly find some free exporters since Col­lada is an open stan­dard based on XML.

Another pos­si­bil­ity is to use the AS3 Geom Class Exporter either for 3DSMax or Blender. It will gen­er­ate .as files and the advan­tage is that the engine won’t have to parse the file since it’s Action­Script already.

Isn’t Flash CS4 going to wipe out those engines ?

No it isn’t. If ever Adobe adds a fully fledged 3D plat­form within the Flash Player, the 3D engines of then will adapt and make use of its new ben­e­fits. Some engines like FIVe3D might be in direct chal­lenge with the next Flash CS4 fea­tures. How­ever I don’t think Flash CS4 will be released before late 2008 and it’s not even sure if the so-called “3D” fea­tures will be as easy to use for coders as what’s avail­able cur­rently through open source projects.

Is it worth it to go 3D finally ?

With­out a doubt, yes it is ! Just imag­ine : you can dynam­i­cally ren­der basic 3D. For instance, the amount of Cov­er­Flow com­po­nents for Flash/Flex has exploded thanks to those 3D engines listed above. A proof that sim­ple and effec­tive UIs are also rel­e­vant in 3D sometimes.

And it is not lim­ited to com­mer­cial enter­tain­ment web­sites at all. Embed­ded user inter­faces are yet another mar­ket you can tar­get. The InteliSea appli­ca­tion pre­sented last year at MAX 2007 includes some sim­ple 3D to dis­play the sea state for a boat. Another proof you can make “seri­ous” appli­ca­tions with 3D (and some­times it might be mandatory).

I will talk in a fur­ther arti­cle about GIS (Geo­graphic Infor­ma­tion Sys­tem) and 3D with Flex. It’ll be a nice follow-up.