2D Perspective xform using CSS 3D matrix?

[SporkInTucson]

Hi,

I have used Mathematica to determine a 3x3 perspective transformation from one 2D image to another. Let's say that Mathematica gave me the following 3x3 matrix:

a b c
d e f
g h 1

Now, moving outside of Mathematica, I'm trying to use that perspective xform it gave me in CSS on a webpage. There are two general matrix xform choices in CSS3: 2D "matrix" and 3D "matrix3d". The former, "matrix", is 3x3 but doesn't allow specification of the third row -- it's fixed to "0 0 1":

p q r
s t u
0 0 1

If I'm not mistaken, this is the form of an affine xform, but I'm trying to do a perspective transform which isn't affine. So, I thought I could use the more general "matrix3D", which allows all 16 elements to be specified:

k l m n
o p q r
s t u v
w x y z

I am hoping that I can provide values that would accomplish the original transformation but leave z ordinates unaffected. Off the top of my head, as a wild guess, I thought it might be:

a b 0 c
d e 0 f
0 0 1 0
g h 0 1

where a,b,c,d,e,f,g,h are the values from the original 3x3 xform Mathematica gave me.

I'm neither a physicist nor a mathematician, but thought this might be a good place to ask. Even though I'm ultimately trying to do a perspective xform on a web page using CSS, it seems like a generic sort of linear algebra question... Any help or pointers will be greatly appreciated.

 

[Stephen Tashi]

Hi,

I have used Mathematica to determine a 3x3 perspective transformation from one 2D image to another.

What is your definition of a perspective transformation from 2D to 2D? The use of "perspective" is most often applied to a projection of a 3D object on a 2D "screen".

I gather your definition of "affine transformation" does not include all the "perspective transformations" as a subset. Is that correct?

Also, what is "CSS"?

 

[SporkInTucson]

I've attached "before" and "after" images to illustrate the image transformation.

I am currently using Mathematica's FindGeometricTransform function to get the 3x3 matrix and then I'm using Mathematica's ImagePerspectiveTransformation to transform "before" into "after". The transformation compensates for the fact that the camera is placed out of the line of fire, from which perspective the target is no longer circular. After the transformation, the target is once again circular.

CSS is a styling language for the web. The most recent version introduces 2D and 3D transformation of items on pages. I want to place the "before" image on a web page then set the image's transform attribute to either a CSS matrix(...) or matrix3d(...) construct. I want to use the 3x3 matrix Mathematica gave me, but matrix(...) only allows one to specify the first two rows, which is why I'm looking at matrix3d(...).

If you're interested in the CSS details, this page is probably as good at explaining it as any other. But my question is really about how to extend this sort of 2D 3x3 transformation matrix into a 3D 4x4 transformation matrix that leaves z unchanged.

I.e. if

a b c
d e f
g h 1

transforms (x,y) to (X,Y), what's the 4x4 matrix that would transform (x,y,z) to (X,Y,z)?

 

[chiro]

Hey SporkInTucson and welcome to the forums.

Are you trying to transform a plane from one orientation to another? Do you want to use the same projection for both objects.

It seems to me that from the images you are taking a quadrilateral (which can be defined using two triangles since every triangle defined a unique plane) and then you are translating the two triangles using a transform.

If that is all you are doing (transforming the two triangles by using translations, rotations, and scaling matrices), then you need to basically concatenate a few matrix transforms together to get your final position and then apply a standard projection.

I'm not completely sure about what you want to do though, so I based this response on your images that you have attached.

In terms of deriving the transformation matrices in the above context, you need to understand arbitrary rotations and translations. For translations, this won't be much of an issue (as will scaling), but for rotations, especially ones that are not axis aligned, this will be a slight issue.

The rotation matrix you should use should be based on rotation about a specified axis. Here is something for you to read:

http://en.wikipedia.org/wiki/Rotation_matrix#Rotation_matrix_from_axis_and_angle

Once you have these down, the next part is choosing the right concatenation of the matrices. The order is important because rotating and then translating is completely different to translating and then rotating.

 

[SporkInTucson]

Seems like the CSS details have prevented me from posting my question clearly. I've figured it all out, as of this morning, but wanted to post a follow up to close out the thread.

CSS constrains the type of 3x3 xform matrices that can be applied in 2D. Specifically, it allows 3x3 xform matrices with only six specifiable elements (a,b,c,d,e,f):

a b c 
d e f 
0 0 1

On the other hand, CSS does not constrain the type of 4x4 transformations that can be applied in 3D. It allows all sixteen elements to be specified in:

a b c d
e f g h
i j k l
m n o p

My question was about how to use the more flexible 3D transformation to accomplish 2D transformations on a 2D plane in 3D. Since all the z ordinates in my problem are 0, one can assume that the plane is z=0, but I don't think that matters.

The answer to my question was that a 2D 3x3 xform can be expressed as a 3D 4x4 transform.

a b c
d e f
g h i

becomes

a b 0 c
d e 0 f
0 0 1 0
g h 0 i

So, I've managed to get my web browser to perform a perspective transformation on the "before" image using CSS's 3D transformation facility.