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?
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).