0

I am trying to understand 3d-transformation in html5, but can't understand how we get new (x1, y1) coordinates. For example, we have a plane on our screen with a point at coordinates (287, 431). We rotate the plane around X-axes at 60 deg. So we have:

1     0       0       0     287   287
0     0.5     -0.86   0  x  431 = 215.5
0     0.86    0.5     0     0     370.66
0     0       0       1     0     0

But how can I project this (x, y, z) to screen again?

user2664687
  • 13

1 Answers1

0

The new pixel coordinates will be: (287,215.5). These are the two first values in the resulting vector.

The third value (370.66) is the depth of the pixel. This means the distance of the pixel in an axis perpendicular to the screen. You must use it if you want to know which objects hide others (pixel with less depth will be visible) in case you have more objects in your scene (if not just ignore it).

Last value (0) can also be ignored (it is used to perform perspective calculations).

Jordi Cruzado
  • 321
  • Thank you for your answer. The problem is that browser renders this point at other location. I made small example on jsfiddle. Initial point (red square) has coordinates (287, 431). After click «3d» button the background rotates at 60 deg around X and I move red square at (287, 215.5) but it's other point on background. I can't understand what I am missing to get correct point. – user2664687 Oct 28 '13 at 21:51
  • I have modified jsfiddle a bit to see that right answer is a point (287, 384), but I can't understand how browser page renderer gets this point. – user2664687 Oct 28 '13 at 22:09
  • You have a problem with the origin of the rotation. If your origin is at the center of the view (your view is 658x656), the rotation axis is in y=656/2=328. You have to express your point coordinates in relation to this point before applying the rotation matrix. Thus, your point is not (287,431) but (287,431-328) = (287,103) related to the rotation axis. Apply rotation matrix to this point and the result is (287,51.5). The last step is to express this result in absolute coordinates again by adding the height of the rotation axis (328), (287,51.5+328)=(287,379.5) – Jordi Cruzado Oct 29 '13 at 07:03