Calendar

May 2017
Mo Tu We Th Fr Sa Su
<< >>
1234567
891011121314
15161718192021
22232425262728
293031

Langs

Playing with 3D

Posted on Nov 16 2008

There are already several 3D Engines for Flash, including PaperVision3D, Away3D and Sandy. All these engines have started at first with ActionScript 2 as the main language, and have then evolved when Flash9 was released with AS3 language.

One of the biggest problem with 3D-in-Flash was perspective correction. This is because Flash is a 2D vector engine, which doesn't know about 3D. And when you need to display some triangles which are mapped with a bitmap textured, you need to deform your texture.

Flash allows bitmap deformations, but only affine ones (using a 2x3 Matrix). This is enough for translation, rotation and scaling, but cannot "bend" a bitmap to make it look like it's being put into perspective.

All the 3D Flash engines have then to dynamically create additional triangles, in order to split the rendering into several small triangles that are correcting the texture perspective. It works, but it requires a lot of CPU for creating the triangles, and in the end require more triangles to be drawn by Flash, which also uses CPU...

... that was until Flash Player 10 was released !

In case you missed it, the new Graphics.drawTriangles API allows you to draw textured triangles, using not only UV coordinates, but UVW coordinates (W being 1/Z).

With this tool in hands, the complexity of writing a Flash 3D engine greatly decreased, so I wanted to give it a try. Not that I want to compete with other 3D engines, but I like to discover things by myself, and writing it from scratch is the best way to learn.

Here's some small result :

[h3d_s1.swf]

Controls :

  • you can move the camera around using the mouse
  • you can zoom using the up/down arrows
  • hit W to change to Wire-Mode
  • hit P to change to Vertex-Color Material : in that mode, lights are not only impacting the illumination of the object, but also the color of each vertex.

A few notes for people interested in technical details :

  • the scene consists in ~2000 triangles, most of them used by the sphere
  • there are 2 Point-Lights and no directional lights, all calculated in realtime
  • default mode uses Gouraud shading. Flat shading is also supported
  • the VertexColor shading mode works together with the VColor material, which enables realtime illumination of the object
  • the cube uses a texture + a color material, the sphere and the other object are using a simple color material
  • since we need several passes for rendering complex materials, backface culling is performed before sending triangles to .drawTriangles
  • triangles are sorted in realtime using the Painter's algorithm
  • most of the time is spent in letting Flash draw triangles. Performances are actually a lot better on Firefox than on IE7 (not sure why)

The engine is still in progress consists in around 2000 lines of Haxe code, to be released as open source later. Using Haxe features such as FastList, "inline" methods and integer optimizations really helped to bring the speed it its best.

EDIT : the sources are available on http://code.google.com/p/haxe3d

13 comments
  • Flastar
    Nov 16, 2008 at 22:18

    I love haxe! The best of the best of the best!

  • Nov 17, 2008 at 15:51

    Hey Nicolas, pretty cool :)
    I'm eager to see it open-source!
    Just as a side note, sandy has a haxe version:
    http://www.flashsandy.org/haxe

  • Nov 17, 2008 at 17:28

    awesome! ;)

  • Obi
    Nov 17, 2008 at 20:49

    Looks nice ;-)
    Nicolas, what do you think about Alternativa3D ?

  • Nov 19, 2008 at 21:21

    Alternativa looks very nice, but is not open source as far as I know ;)

  • Nov 30, 2008 at 02:33

    And what about Sharikura 3D? I't not realeased yet, but what do you think about it?
    There are some demos: http://temp.roxik.com/

  • JLM
    Dec 03, 2008 at 18:52

    Recently been playing with sliced 3d (as2) outside of the above engines and one issue that it has made me very aware of is that flash is slow to render overlaping transparent areas, so for a sliced 3D object it is better to create using vectors than png's. As far as I am aware no current 3D engines have the ability to not render transparent triangles would the new flash 10 help with this, is it a concept worth further work, if it is I might see if the concept could be applied to the haxe sandy materials?

  • Dec 04, 2008 at 10:53

    Whether support of an isometric projection is planned?

  • Dec 07, 2008 at 12:29

    2Nicolas: Hi! Thanks for your words! :) We think about converting our engine to Haxe. The only problem is useful IDE. May be we should ask Powerflasher for Haxe support in the next version of FDT? ;)

    And also, it would be great to have a direct contact with you by e-mail. Ciao!

    2JLM: Alternativa3D has an ability to render transparent triangles because of its drawing system.

  • Dec 29, 2008 at 08:04

    A little bit late to comment, but here we go: Nicolas, are you using the Matrix3D/Vector3D classes or did you rewrote it? I'm really curious to know how fast are these classes and possibly how Vector/Matrix classes written in Haxe could perform (taking advantage of inline methods and things like that). Keep up the good work!

  • Dec 30, 2008 at 13:47

    I'm not using FP10 3D classes, because I think there are written in AS3 and don't offer any significant speedup. I'm using my own classes + inline methods which are really helpful.

  • cnuuja
    Jan 09, 2009 at 22:45

    The FP10 Matrix3D and Utils3D classes are written in C++, not AS3. The Vector3D class is written in AS3.

  • Andrew Tch
    Jul 31, 2009 at 23:14

    Hello,
    have you published any sources? We are currently evaluating 3d engines for flash for 3d mmorpg project, and are highly interested in native haxe 3d engine. I would be happy to recieve e-mail from you, if so, than I could tell about the project in detail.

Name : Email : Website : Message :