Flash 10 3D vs. "The Old Fashioned Way"

Nov 08 2008 Published by under ActionScript, Flash

I’ve done tons of 3D in ActionScript over the years. I wrote 3 chapters about 3D in Making Things Move. I could code that kind of simple 3D in my sleep. When I say 3D, I’m not talking about the insane light map, bump map, texture map insanity that the likes of Andy Zupko and Ralph Hauwert get up to, but just scaling objects in a 3D space to give the illusion of depth.

So naturally, when Flash 10 came out with built in 3D, I was pretty excited. It offers just about the same level of stuff that I always do in code, but built in. Now instead of setting a focal length and making some new class to keep track of z, and calculating a scale value and a vanishing point, all that is done for me. Great!

But… maybe it’s not so great. I’ve found that a lot of stuff that I do with Flash 10 3D just doesn’t look as good as the stuff that I code by hand. The reason for this has to do with bitmaps. It seems that when you apply any 3D transformation to a display object, it turns it into a bitmap – same as applying filters. Unfortunately, this results in some pretty crappy results.

As an example, let’s make a bunch of circles and randomly place them in 3D space. We’ll use the same coordinates but do it once with Flash 10 3D, and once with hand-coded 3D. An interesting thing to note is that you can access perspectiveProjection.focalLength from the main container, and use that in your own 3D code with the exact formulas I gave in Making Things Move and get the exact same 3D projection. This really is a science!. Here’s the code I’m using:

[as]var h:Sprite = new Sprite();
addChild(h);
h.x = 400;
h.y = 200;

var h1:Sprite = new Sprite();
addChild(h1);
h1.x = 400;
h1.y = 600;

root.transform.perspectiveProjection.projectionCenter = new Point(400, 200);
var focalLength:Number = root.transform.perspectiveProjection.focalLength

for(var i:Number = 0; i < 100; i++)
{
var s:Sprite = new Sprite();
s.x = Math.random() * 2000 - 1000;
s.y = Math.random() * 400 - 200;
s.z = Math.random() * 8000
s.graphics.lineStyle(0);
s.graphics.drawCircle(0, 0, 50);
s.graphics.endFill();
h.addChild(s);

var s1:Sprite = new Sprite();
var scale:Number = focalLength / (focalLength + s.z);
s1.x = s.x * scale;
s1.y = s.y * scale;
s1.scaleX = s1.scaleY = scale;
s1.graphics.lineStyle(0);
s1.graphics.drawCircle(0, 0, 50);
s1.graphics.endFill();
h1.addChild(s1);
}[/as]

I'm adding two containers: h and h1. Setting the vanishing point of the first to the center of the h container. Then drawing 100 random circles in each one, at the same location for each. This gives you the following picture:

Note that the two pictures geometrically, are exact duplicates. But the top one, done with Flash 10 3D had some really HORRIBLE artifacting. This is due to the fact that the circles are no longer represented as vectors, but as poorly scaled bitmaps. We can zoom in on them a bit:

Or even a bit more:

to see the problem. Note that the bitmap is regenerated each time you scale. The small circles in the full size image don’t have nearly that resolution. If you control-scroll (on a Mac), or otherwise zoom your screen without using the Flash player’s zoom in feature, you’ll see it looks even crappier up close.

Contrast that with the handcoded version, which never stops being vector. Zoomed in all the way:

You can’t actually tell how zoomed in you are. It’s just vector circles.

Of course, the vector version looks a bit harsh as the far away circles are just as dark and crisp as the close up ones. But it’s easy enough to apply a bit of aerial perspective. The easiest way to do it is use the calculated scale value to adjust alpha – either the alpha of the sprite itself, or the alpha of the line drawing it.

Adding this one line between lines 29 and 30:

s1.alpha = scale;

gives us this:

That’s just a simple example. The best part about this handcoded 3D is that you can adjust the aerial perspective however you want. You can apply it directly as above, or just use that scale value in a more complex equation to change the dropoff. Or you can use it to apply a blur filter. Or change the color or width of the line you are drawing. In other words, you have complete control.

Another weird thing related to this Flash 10 3D rendering happened with these images at my other site, Art From Code:

These were all done with Flash 10 3D. All are done with an unbroken series of lines running left to right, and scaled back as a number of layers, using various sine wave expressions to affect the shape of the lines. But notice the holes. The tops of some of the curves got cut off. I left them that way, as it was an interesting effect, but it is really just an artifact, horrible enough to even be called a bug.

So, I’m not saying that Flash 10 3D is useless. It’s fast and easy, and the examples here involve mainly line drawing, where the effect is massively amplified. If you are drawing straight fills or bitmaps, the effects may be barely noticeable. And there may be some way of compensating for this that I am not aware of. I’ve messed with cacheAsBitmap and LineScaleMode, and some other stuff, none of which seems to make any difference.

So all I’m saying is, don’t throw out your old 3D code yet. Evaluate both methods and see which works best. I think it’s great to spike ideas using Flash 10 3D and then make it look better by converting it to handcoded 3D. And, maybe it’s something for Adobe to look at in Flash 11. :)

23 responses so far. Comments will be closed after post is one year old.

  • Yeah I saw those ugly artifacts in my tests too, seems like Flash transforms vectors in bitmaps and only then it scales them in the 3D render… Even if that’s the case, the bitmap scaling algorithm is not that good.

  • Thanks for pointing that out – I had no idea that positioning things in 3D would turn vectors into bitmaps, especially poorly scaled ones :(

  • [...] Keith Peters posted about how vectors degrade in Flash Player 10 when they are given a non-zero z value. Apparently vectors are turned into bitmaps and then scaled [...]

  • MrSteel says:

    it’s expected that vectors are transformed to bitmaps
    any vector 3d transformation of various shapes would lead regularly to lot of high CPU math

    the thing is that scaling of bitmaps and quality of produced bitmaps can sometimes be a lot better, at least as an option

    “So all I’m saying is, don’t throw out your old 3D code yet. Evaluate both methods and see which works best.”
    this is great point, Flash 10 3D is definitely for filled planes with images or colors

  • And it must be noted that flash continues to apply 3D transformation (and thus the poor quality bitmap representation) even after your vector drawing is taken back to the 2D world – I noticed that rotationY = 0 makes the same effect as described in this article.
    This is what I found – http://edzis.wordpress.com/2008/11/04/blur-on-rotationy-0-use-transformmatrix/

  • Matt Cooper says:

    Hi Keith,

    I’m pleased that someone has blogged about this. I had an interesting time two weeks ago, and lost much of my hair in clumps, trying to figure out what was going on and found very little information on the web about it.

    I just wanted to add that another interesting side effect of this is mouse responsiveness. I’m still trying to get my head around it as I’m not sure it’s consistent. Basically I have a bitmap sprite (parent1) to which I attach sprites that can be clicked. Tilting parent1 causes it’s children to be rendered as bitmaps with aliasing but they remain clickable. If I then wrap parent1 in another clip (parent2) and make both the parent1 and parent2 moveable within 3d, the children are rendered as before but lose their mouse responsiveness. I can only conclude that in the original setup the children are being rendered offscreen but are still “sprites” in parent1′s world. And it therefore makes sense that if parent2 becomes a 3d object then the whole of parent1 is rendered and reference to the childrens’ mouse events is lost. Bit of a gotcha. If the parent2 is reset, parent1 reverts to true sprite display and the children mouse events work again.

    Another interesting thing that I’ve noticed is with textfields attached to 3d planes. When their parent is tilted they become aliased and they remain this way even if the parent is reset. I cannot get the textfield back to true rendering.

    It would be nice is we had access to the bitmapping smoothing operation, perhaps through PerspectiveProjection. I appreciate that Adobe have always maintained that this was never going to be true 3d or a fully fledged engine but it is honestly not much use beyond rapid prototyping if the visual quality is going to suffer. But then as a community we’ve always found funky smoke and mirror techniques to get round things and I think there will be powerful uses for this, even with limitations.

    Keep up the good work and thanks

    Matt

  • daniel says:

    ha, I found the same thing. Isn’t it always the case that you see the previews for a new version of something or other and it gets to you and you see it’s not as peachy as you thought it would be.

    this 3d feature seems more like a hack to bring 3d to non actionscript3.0ers. I was pretty taken with the new features, but once I started playing around with them I got mostly annoyed. Definitely noticed the 3d when put on text. I was thinking that the in-flash 3d engine would be more like Mathieu Badimon’s FIVe3D rather then papervision or away3d. This was a letdown.

    I think I’ll put the rest of my ramblings with the not liking flash cs4 though…

  • I just think the algorithms and mathematics internally involved in all this must be so amazing. Cheers to all you people who make all these things happen!

  • [...] > Flash 10 3D vs. “The Old Fashioned Way” | BIT-101 Blog [...]

  • [...] the good old-fashioned 3D, always argued by Keith Peters (and learned from his great [...]

  • cnuuja says:

    Hi, I worked on this feature for FP10. To answer a few questions, address some misunderstandings:

    Yes, the DisplayObject is drawn into a bitmap, then a vector rectangle (1 quad, not 2 triangles) is created with the dimensions of that bitmap, using that bitmap as a fill. The quad edges are then transformed into 3d world space and projected into 2d stage/global space. The renderer can perspective correct sample that bitmap while doing the fill (this new functionality is also available in the graphics.drawTriangles api). The vector edges of the quad are anti-aliased, but the bitmap fill has to be non-linearly sampled and therefore can show aliasing. The sampling is smoothed, however, so often you won’t see it. The pathologically bad case for non-linear sampling and/or smoothing is a sharply defined thin line or curve (as in your examples). I suspect a filled circle would have looked much better.

    The feature is not designed for the type of 3d you seem to want to do. For line segments, the “old fashioned” way is definitely better. You can use the new apis to do it, however. You can move/rotate an empty Sprite using the 3d properties (or direct matrix3D manipulation), then use localToGlobal (or localToGlobal3D) to convert local space 2d (or 3d) positions into projected 2d screen positions. You can then feed the graphics api with those projected 2d global positions. Alternatively, you can do the matrix math yourself using Matrix3D.transformVectors()/Utils3D.projectVectors() to transform and project 3d positions into 2d screen positions suitable for the graphics api.

    The old fashioned way is not correct for curves, but at low fieldOfView settings often looks good enough (especially if no part of the curve gets closer to the camera than the focalLength. That’s when stretching/magnification happens). Its really the same problem as perspective correct bitmap filling: by default flash is going to linearly sample the curve between the end points. To be perspective correct, Flash would need to sample non-linearly, or rather change the sampling at each point as the 1/z value changes (non-linearly) between the two endpoints. Unfortunately, we did not add a new graphics api to draw curves in 3d. It seemed wrong to add it if we could not also support everything else in 3d (gradiant fills, filters, text, etc).

    An ideal solution would have been to draw DisplayObjects themselves in 3d, rather than drawing their cacheAsBitmap in 3d. Doing so would have made rendering much, much slower as curves, gradiant fills, filters, text, etc would all have to function in 1/interpolatedZ space instead of a linear sampling space. In some cases, such as device text or Shaders, this would have been impossible.

    to make something not be 3d anymore, set its .transform.matrix to a non-null value (or set .transform.matrix3D to null). Setting .rotationX = .rotationY = .z = 0 does not undo the 3d transform.

  • [...] = null. That way the component will no longer be rendered to a Bitmap. You can read more about that at Bit-101.com where Keith talks about the 3D capabilities of the new Flash 10 …. Be sure to read the comment by cnuuja – #11 -  who works for Adobe on the 3D features for the [...]

  • Jon says:

    the thing i want to know is, why all of a sudden have smoothing (FP10 “3d” layers), the one time its not useful too. i really hate all these decisions they make with the flash player. does anyone know how to *unsmooth* a plane?

  • [...] edges are then transformed into 3d world space and projected into 2d stage/global space.” (here, see comment [...]

  • Lou says:

    It seems that if you use .transform.matrix3D=null once you have rotated an object back to it’s original position the x and y values are reset to 0,0 a work around for it is to get the x and y values just before .transform.matrix3D=null then reset them after eg:-

    [code]
    var posX:int = mc.x;
    var posY:int = mc.y;
    mc.transform.matrix3D = null;
    mc.x = posX;
    mc.y = posY;
    [/code]

    I’m still trying to figure out a way to retain quality when somethings been rotated 180 degrees though.

  • sherrymerry says:

    hi all,

    has this problem have a solution it is really annoying..

    and in mac,i have this problem for a movieClip that have rotationX/Y/Z,
    which the rotationX/Y is based on the Xmouse/Ymouse.So when i open another program e.g photoshop/another firefox browser on top of it,and i clicked on the browser or the program,the rotationX/Y will go crazy by spinning very fast.

    can i know is this a bug for the flash player also?

  • sherrymerry says:

    sorry i rephrase my question

    have this problem of images/text blurred with rotationX/Y/Z of flash cs4 being solved until now?

    i have this problem in mac only, for a movieClip that have rotationX/Y/Z applied,
    which the rotationX/Y is based on the movement of the Xmouse/Ymouse.So when i open another program e.g photoshop/another firefox browser on top of it,and i clicked on the browser or the program,the rotationX/Y of the flash at the bottom will go crazy by spinning very fast.

    can i know is this a bug for the flash player also?

  • Cloaked Alien says:

    This explains a lot… Makes sense though.

    Anywho, I’m working on a project in which spots are positioned in 3d space using the .z-property for proper scaling/perspective. Obviously I’m now getting the seriously blurred results which is not ok.

    As I see it the only way around this is by doing the perspective projection myself, any hints on how to do this? I’ve got screencoords and .z which I want to project into screenspace and my 3d math skills aren’t up to par enough for me to construct a matrix for this.

  • michauPe says:

    Ha! Its not a bug, its a feature !

  • [...] a few limitations to these new 3D effects as Keith Peters has pointed out in his posts about the visual quality of 3D in Flash 10 and the effect this has on nested display objects with 3D transforms. Some of this, such as the [...]

  • Sir says:

    Adobe really dropped the ball by simply not allowing the programmer to specify whether to render a 3d object as vector if desired. I’m making a skiing game and the trees render fine, but the gates – because they are essentially lines with flags on them – render horribly and flicker. Because Flash 10 3D is rather straightforward and I need to use the parralax effects when the clip containing the scenery is moved, I would like to stick with it though so…

    I did figure out a workaround, although it’s probably not the most processor friendly method. If anyone has some insight on how to optimize, please let me know. What I’m doing is temporarily putting an object in 3d space to get the info, then using that to place and scale it in 2d space.

    // move object
    thisGate.myZ -= objectSpeed;

    // hack to use clean vector image instead of of distorted flickering bitmap
    // put object in 3d space
    thisGate.x = thisGate.myX;
    thisGate.y = thisGate.myY;
    thisGate.z = thisGate.myZ;
    thisGate.scaleX = thisGate.scaleY = 1;
    // get actual point on screen
    var myPoint:Point = new Point(0, 0);
    myPoint = thisGate.localToGlobal(myPoint);
    // get actual scale on screen
    // is there a localToGlobal way to get scale rather than doing this?
    var myScale:Number = thisGate.width/thisGate.realWidth;
    // put object back in 2d space
    thisGate.transform.matrix3D = null;
    // place and scale object based in info from 3d space
    thisGate.x = myPoint.x;
    thisGate.y = myPoint.y;
    thisGate.scaleX = thisGate.scaleY = myScale;

  • Sir says:

    Looking at what cnuuja said again, I guess I’m somewhat following the lines of what he suggested, but I’m now thinking that using empty sprites and mapping vector graphics to their positions might be better. However, I would need to figure out the scale via another method.

    Does anyone know the formula to figure out the 2d scale of an object based on its z position? Perhaps the moderator? :)

  • Sir says:

    I apologize for all the posts, but I found the answer at http://www.kirupa.com/developer/actionscript/3dwireframe.htm

    var scaleRatio = focalLength/(focalLength + pointIn3D.z);
    … assuming of course that focalLength here is indeed the same thing as root.transform.perspectiveProjection.focalLength

    If I can perfect this, maybe I’ll write a class and upload.