23 January 2010

Quick Note on Local to Global in Papervision3D

Normally, if you want to get the scene coordinates of a child 3D object, use these properties:

  1. var x: Number = child.sceneX;
  2. var y: Number = child.sceneY;
  3. var z: Number = child.sceneZ;

However, if you want to get the screen coordinates of a local point other than the object’s original position (for e.g. side of a plane, some random points on a surface of a sphere…), then you have to deal with Matrix3D transform.

Don’t worry, you don’t need to understand what Matrix3D is because I don’t either :). Let’s use what people have concluded here:

If local to global is:

child.transform.calculateMultiply(parent.world, child.transform);

then global to local is:

child.transform.calculateMultiply(Matrix3D.inverse(parent.world), child.transform);

There are 2 things to note with above conclusion:

  • I have to invert method’s arguments (from what’s originally stated in the post) to get the correct conversion. I’m using PV3D 2.1
  • I haven’t tried the global to local method, hence I don’t guarantee it works. The global to local transform works correctly.

So here’s how I convert any local positions to global:

  1. var matrix: Matrix3D = Matrix3D.IDENTITY; //a recommended way to create new Matrix3D
  2. matrix.n14 = localX;
  3. matrix.n24 = localY;
  4. matrix.n34 = localZ;
  5. matrix.calculateMultiply(child.parent.world, matrix); //child must be a DisplayObject3D
  6. var scenePos: Number3D = new Number3D(matrix.n14, matrix.n24, matrix.n34);

If you want to convert the rotation as well, use Matrix3D.copy() to copy all transformation info from the child object. And then after calculateMultiply(), apply the matrix to your scene object with DisplayObject3D.copyTransform().

[Vietnamese Tag – Chuyển đổi tọa độ local sang global trong Papervision3D]

16 January 2010

3D Paper Flip Effect – First Attempt

Recently, a challenge have been raised to me if I can make a similar page flip effect like the one at this page. The difference from other page flip libraries is that the page turning effect looks more 3D-like and realistic.

At first glance, the effect might look difficult to replicate. But then I realized that it may be even easier to implement from the traditional page flip effect which requires a lot of overly complicated math. Thanks to 3D engines and modifier libraries at my disposal, I’m hoping to be able to create a 3D paper and manipulate it into a page turning animation.

So if I want to bend or fold something in Flash 3D, the first thing came to my mind is using AS3DMod. However, when I look into it, the modifiers are so limited in terms of controlling interactions. For example, the Perlin modifier can makes the plane wavy like cloth or paper but there no way you can control it since Perlin noise is randomly generated. With Bend modifier, I can bend it only at one section. I can add more modifiers to bend at multiple sections but it is still too difficult to simulate the paper physically.

Here my attemp with AS3Dmod and Papervision3D (click to open the Flash demo):
The demo preview

So I decided to quit AS3DMod although I still thought that I might be missing something. (Somebody please prove I’m wrong with AS3DMod).

My only hope now is to access the vertices of the 3DPlane and control them with a physics simulator. Fortunately in the Flipper3Maker mentioned above, the paper is not bent from any direction; the bend lines are in parallel. So I’ve come up with the following demo:

demo preview

I used a simple 2D chain simulator which I got from here (was AS2) and then apply the transform on the rows of vertices on the 3D plane. The achievement here is that I can interact with the “paper” although it doesn’t look like a page turning effect yet.

My next step is to find the right simulator for this page turning effect and I’m about to begin with Box2D.

You can find the source code of above demos here.

[Vietnamese Tag – Hiệu Ứng Lật Trang 3D – Cố Gắng Đầu Tiên]