Search code examples
matrix3dthree.jsprojection-matrix

How to set a projection matrix on Three.js which does this kind of mapping?


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

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.