Question

How to make a projection matrix on Three.js which does the mapping from 3d points to screen coordinates described by the rule below?

screen_x = x - z*0.5
screen_y = y - z*0.5
depth = z
Was it helpful?

Solution

The projection matrix represents the following equations:

xx xy xz xt    <- x' = (xx*x + xy*y + xz*z + xt) / (wx*x + wy*y + wz*z + 1)
yx yy yz yt       y' = (yx*x + yy*y + yz*z + yt) / (wx*x + wy*y + wz*z + 1)
zx zy zz zt       z' = (zx*x + zy*y + zz*z + zt) / (wx*x + wy*y + wz*z + 1)
wx wy wz  1   

From that all the other elements will be zero, but

screen_x = x-z*0.5 : xx=1,       xz=-0.5
screen_y = y-z*0.5 :       yy=1, xz=-0.5
depth  z'= z       :             zz=1      (and ww=1)

EDIT This not the general projection matrix, but only applicable to this particular problem.

The general [symmetric] projection matrix is of form

 a  0  0  d 
 0  b  0  e  
 0  0  c  f 
 0  0  1  0, 

from which it follows that x and y will be divided by wx*z == z.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top