3D Flash – moving vs. redrawing

In the past (several years ago) I started tinkering around with making 3D type effects in Flash, and then started actually using 3D calculations to move or draw objects on the Flash canvas.

Old Methodology – Easier
The first way that I tried to make 3D effects in Flash was relatively easy. However, they were kind of “fake” 3D since they didn’t recalculate and redraw every object on every frame. Instead, the objects were previously made, and the position simply changed. Here are examples that I made long ago:

Spiky 3D ball-like object (summer 2004)

A ball circling around a rod (summer 2004)

The “Portfolio” section of my current web site (fall 2007)

The downside to the method I used to create the 3D examples above was that they used sine and cosine, which use a lot of the processor during computation even though the models themselves actually aren’t very complex. All that they do is keep track of one point for each object (the top-center point) and move the object based on where the calculations tell it to be. They use a fairly large amount of processing power for moving fewer than 20 points in 3D space.

New Methodology – “Real” 3D
During the past month, I wanted to make a more complex and more efficient 3D engine using Flash. I also wanted it to be “real” 3D, so that I could draw an object and actually rotate and redraw that object in all three dimensions, instead of just moving around pre-drawn objects. The following link shows what I have come up with so far. Note that you can drag the mouse to rotate the image, and use the scroll wheel to zoom in and out.

3D wire-frame model (winter 2007-08)

Note that the 3D model spells out my name, “MIKE”, but it can model anything you want, as long as you are willing to feed it the vertices of all the surfaces for the model. It is important to note that each surface of this model has four vertices, even if it is sharing an edge with another surface. That means that there are hundreds of vertices, and their positions are all being calculated every time the Flash movie refreshes. Despite having so many more vertices, this 3D model runs much faster because I use matrix transformations instead of using trigonometric functions (like sine and cosine.) Zooming is easy and fast too – you only need to multiply every coordinate by the same scalar value (e.g. multiplying by 0.7 will reduce the scene size to 70%). Another major difference between this latest example and the previous ones is that each of the surfaces are being redrawn on every frame (about 100 times per second) instead of just moving pre-drawn objects.

Next Step: Surface Filling and Layering Using Z-Buffers
What begins to be difficult is taking into consideration z-depth of the surfaces. With all of my older examples, there was always clearly a difference in z-depth between nearby objects. With the newest example, nearby surfaces can occupy the same points, but how do you determine which surfaces should be in front of other surfaces? Now take into account if two of the surfaces actually were to cross through each other. Then there would always be part of each that is in front of part of the other one. For this case, you can’t just draw one and then the other, you would have to split them up into smaller surfaces. This is where you have to start using z-buffers. I haven’t implemented this portion of the 3D modeling yet. It will take a lot of time and effort, so it will probably be a while before I can post any progress of this here. This is fun stuff, by my school homework takes priority over this.

It is hard to cover many of the details in a post that is just an overview, so if you have any questions or want a more detailed explanation about any part of this then feel free to email me.

In the meantime, check out Sandy – a free 3D engine for Flash that does all this for you and even allows you to specify alpha, lighting, and bitmap textures.

Leave a Reply

Your email address will not be published. Required fields are marked *