Eureka 3D

The penny has dropped on how to create a 3D object in Flash; something that has evaded my understanding for too long. I’m going to attempt to explain it here, to give other people a shot at understanding it, and to help me nail it once and for all!

Virtual 3D to Actual 2D

To present a 3D object in Flash, we have to convert a hypothetical three dimensional location (x, y, z) into an actual two dimensional location on the screen (x, y). To do this we have to use a formula which scales the x and y coordinates of an object relative to a centre point.

Let’s use an analogy to describe this formula, as I find that’s the easiest way to learn (and to teach).

We are Flash

Consider for a moment that our field of vision represents a 2D coordinate system with the origin (0,0) set at whatever we’re focusing on. Anything to the left of that focus point is in the negative x region, anything above is in the negative y region, anything to the right is positive x and anything below is positive y.

House in the country

Imagine walking down a drive to a house in the country. A chimney at the top left corner of the house starts off near the centre of our vision because the house is quite far away, but gradually moves upwards and toward the left of our vision as we move closer. Likewise a pond on the right hand side of the house starts off fairly close to our central point of focus, and gradually moves further right and down, until we’ve walked past it.

The x and y values associated with the chimney and the pond are being scaled in relation to our centre point of focus (the front door); anything in a negative region will become more negative, and vice versa.

This scaling is achieved by using a combination of the Z value (how close we are to the house) and our field of view.

There is no Field of View in Flash!?

In mapping 3D to a 2D screen and giving the effect of perspective, we scale the amount of impact the Z position of the object has on its x and y coordinates. We do it using the field of view value as a modifier because it’s our real-world field of view that determines the amount of perspective distortion that we see with our eyes.

However, there is no such thing as field of view in Flash, so we set up an artificial field of view value which can be adjusted to achieve the right balance of perspective distortion for the 3D scene.

If the field of view is really small (such as 1), a Z value of 100 would have a great impact on the scale of the x and y values, creating massive visual distortion. Conversely, setting an extremely high field of view will diminish the significant effect of scaling that the Z value has on the x and y, creating a flattened image with next to no perspective at all.

————————————————————————————————–

This is most easily understood by thinking that the field of view diminishes the significance of the Z value; the higher the field of view, the less impact the Z value has in scaling the x and y values.

————————————————————————————————–

A standard value for a natural looking scene is around 300 using the formula described below.

2D to 3D Formula

scaleRatio = fieldOfView/(fieldOfView + Z);

This is the formula, but let’s break it down so that we understand it

//=====[ with a low field of view ]======//
scaleRatio = 10/(10+100)

scaleRatio = 0.09, creating massive distortion when applied to x and y

//=====[ with a high field of view ]=====//
scaleRatio = 10000/(10000+100)

scaleRatio = 0.9, which is very close to 1, creating minor distortion

————————————————————————————————–

Code:

// a natural-ish value for fieldOfView, play around with it
var fieldOfView = 300;

// calculate scaleRatio using a stored Z value for an object
var scaleRatio= fieldOfView/(fieldOfView + zPos3D);

// apply the scaling on the x and y in relation to the centrePoint
var xPos2D = (centrePointX + xPos3D) * scaleRatio;
var yPos2D = (centrePointY + yPos3D) * scaleRatio;

// position the object in 2D space
mc.x = xPos2D;
mc.y = yPos2D;

————————————————————————————————–

Of course, you still have to move these 3D coordinate values around, updating the 2D values on each frame, but this represents the building blocks of rendering 3D in Flash!

Woohoo… Thanks to Seb, Alan and Kirupa.com 😀