5/02/2011

Perspective Projection for RotationX/Y/Z

The rotationX/Y/Z properties provide a great way of producing some neat 3D effects in Flash. The key to getting it to produce the results you want is knowing how to use PerspectiveProjection.

If you placed a row of boxes across the screen and give all of them a rotationY of 90, you might have expected to not see anything on screen because all the boxes would be perpendicular to the screen. Instead, this is what you get:
It seems like the boxes have different rotationYs depending on their location on screen. This is because when Flash performs a perspective transformation on a display object, it does this according to the object's perspective projection. By default, this projection has a field of view of 55 degrees and a projection center (vanishing point) at the center of the stage. To modify an display object's projection, we can use the PerspectiveProjection class.

The PerspectiveProjection class has 3 public properties that you can modify:

  • projectionCenter - a Point that determines the vanishing point. It is at the center of the stage by default. For objects to have the same rotation results, set the projectionCenter relative to the object. (all objects have their own perspective projection where the projection center is dependent on location of the object)

  • fieldOfView - an angle between 0 and 180. This value determines the strength of the perspective transformation and distortion.

  • focalLength - z distance between viewpoint and display object. This is calculated automatically so you generally don't need to mess with it.

usage: import flash.geom.PerspectiveProjection; import flash.geom.Point; var pp:PerspectiveProjection=new PerspectiveProjection(); pp.fieldOfView=90; pp.projectionCenter=new Point(0,0); displayobject.transform.perspectiveProjection=pp;
Here's a tool to explore the effects of PerspectiveProjection. Click on the stage to move the projectionCenter (vanishing point) around. Use the sliders to apply 3D rotations to the boxes. Field of View can also be altered with the slider. Tick the check box to apply the same projection to all the boxes. Untick it to apply individual projections with the vanishing point at the location of each box.
p.s. Depth ordering was ordered via distance from vanishing point. Boxes closer to the point are above boxes further away.

Had quite some fun with the above app that I also made it into an interesting animation.

11 comments:

  1. Nice tool. You think you can post the source?

    Also, even for examples, maybe pick a color palette that doesn't make ones eyes bleed and beg for mercy.

    ReplyDelete
  2. LMFAO - "Also, even for examples, maybe pick a color palette that doesn't make ones eyes bleed and beg for mercy."

    ReplyDelete
  3. Thank you so much for this !

    ReplyDelete
  4. simple but perfekt example. thanks again

    ReplyDelete
  5. The explore tool doesn't work anymore ?

    ReplyDelete
  6. works now
    sorry guys, my file host is down... gimme a bit to get them back

    ReplyDelete
  7. you are an alien! an incredible smart alien!

    ReplyDelete
  8. Thanks dude. taht weas my quickfix for today !

    ReplyDelete
  9. Thank you kindly Sir.

    ReplyDelete