CODEWITHSUNDEEP
matrix3dthree.jsprojection-matrix
MaiaVictor
MaiaVictor

Reputation: 52957

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

Upvotes: 1

Views: 848

Answers (1)

Aki Suihkonen
Aki Suihkonen

Reputation: 20017

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.

Upvotes: 1

Related Questions