How to transform a set of 3D vectors into a 2D plane, from a view point of another 3D vector?

enter image description here

It can be many way to transfer 3d world to 2d plane . I think the basic one is planar projection what I showed in the picture. I made steps for beginners and avoided high mathematics for clear understanding. I believe that rotating is next step after you understand all the points how to transfer one point from 3D into 2D .

I would like to offer which mathematics in this conversion. As you can see in the figure you want to find m and n values for screen as integer.

1- Define left top point of screen in the plane. $S_1 (x_1, y_1 , z_1)$

2- Define right top point of screen in the plane. $S_2 (x_2, y_2 , z_2)$ . , The width of screen must satisfy $W=\sqrt{(x_2-x_1)^2+(y_2-y_1)^2+(z_2-z_1)^2}$.you can select $z_1=z_2$ for straight view thus $W$ can be $\sqrt{(x_2-x_1)^2+(y_2-y_1)^2}$.

3- Define left bottom point of screen in the plane. $S_3 (x_3, y_3 , z_3)$. The height of screen must satisfy $H=\sqrt{(x_3-x_1)^2+(y_3-y_1)^2+(z_3-z_1)^2}$ and also we know that screen rectangle. it must satisfy $\vec{S_1S_2} . \vec{S_1S_3} =0 $ ----> $(x_2-x_1)(x_3-x_1)+(y_2-y_1)(y_3-y_1)+(z_2-z_1)(z_3-z_1)=0 $ Note: If we want straight view, we can select that $x_1=x_3$ and $y_1=y_3$ thus $H$ will be $z_1-z_3$

4- Find the middle point of screen $ M (x_0,y_0,z_0)= (\frac{x_2+x_3}{2}, \frac{y_2+y_3}{2},\frac{z_2+z_3}{2})$

5- Define how far camera will be from screen. $(h)$

6-Find camera point: $C(x_c,y_c,z_c)$ you need to find plane equation : $ax+by+cz=1$ three point is enough to define a plane. Thus

-Put Point $S_1$: $a x_1+by_1+cz_1=1$

-Put Point $S_2$: $a x_2+by_2+cz_3=1$

-Put Point $M$: $a x_0+by_0+cz_0=1$

Solve $a,b,c$ and find normalization vector that right angle to the plane $N= (a_n, b_n ,c_n)= ( \frac{a}{ \sqrt{a^2+b^2+c^2}}, \frac{b}{\sqrt{a^2+b^2+c^2}}, \frac{c}{\sqrt{a^2+b^2+c^2}})$

$C(x_c,y_c,z_c) = (x_0+ha_n,y_0+hb_n,z_0+hc_n)$

7-Find $A'$ that projection of point $A$ on the screen plane.

-Define line between point $C(x_c,y_c,z_c)$ and point $A(x_a,y_a,z_a)$ :

$\frac{x-x_a}{x_c-x_a}=\frac{y-y_a}{y_c-y_a}=\frac{z-z_a}{z_c-z_a}=k$

and put $x$,$y$,$z$ into the plane equation ($ax+by+cz=1$) and get an equation depends on $k$ and then solve $k$.You can get $A'(x'_a,y'_a,z'_a)$ from $\frac{x-x_a}{x_c-x_a}=\frac{y-y_a}{y_c-y_a}=\frac{z-z_a}{z_c-z_a}=k$ after solving $k$.

8-To find screen angles:

$\cos u=\frac{\vec{S_1S_2} . \vec{S_1A'}}{|\vec{S_1S_2}||\vec{S_1A'}|}=\frac{(x_2-x_1)(x'_a-x_1)+(y_2-y_1)(y'_a-y_1)+(z_2-z_1)(z'_a-z_1)}{W\sqrt{(x'_a-x_1)^2+(y'_a-y_1)^2+(z'_a-z_1)^2}}$ .

$\cos v=\frac{\vec{S_1S_3} . \vec{S_1A'}}{|\vec{S_1S_3}||\vec{S_1A'}|}=\frac{(x_3-x_1)(x'_a-x_1)+(y_3-y_1)(y'_a-y_1)+(z_3-z_1)(z'_a-z_1)}{H\sqrt{(x'_a-x_1)^2+(y'_a-y_1)^2+(z'_a-z_1)^2}}$ .

9-Decision if it is in screen or not: If $\cos u >0 $ and $\cos v >0 $ then $A'$ is in screen. Otherwise , the point $A'$ is out of screen and we cannot draw $A'$ in 2D screen.

10- Find $m$,$n$, If $\cos u >0 $ and $\cos v >0 $

$m= \sqrt{(x'_a-x_1)^2+(y'_a-y_1)^2+(z'_a-z_1)^2} \cos u $

$n= \sqrt{(x'_a-x_1)^2+(y'_a-y_1)^2+(z'_a-z_1)^2} \sin u $

We need integers if so we must ignore after point for $m$ and $n$ to get integer values.

Be sure that if $m>W$ and $n>H$ then we cannot draw the point in screen.

Example:

1: $S_1 (400, 400 ,400)$

2: if our screen width:800 pixel $S_2 (880, 1040 , 400)$ $z_1=z_2$ for straight view thus $W=\sqrt{(880-400)^2+(1040-400)^2}=800$

3: $S_3 (400, 400 ,-200)$ thus $H=600$

4: $M (x_0,y_0,z_0)=(640,720,100)$

5: Define how far camera will be from screen. I selected $h=50$ . if h is smaller more area can be seen in screen. It can be changed in software as parameter to get the best view for the screen.

6:Find camera point: $C(x_c,y_c,z_c)$ you need to find plane equation : $ax+by+cz=1$

$400a+400b+400c=1$

$880a+1040b+400c=1$

$640a+720b+100c=1$

here solution that wolfram helped:

$a=\frac{1}{100}$

$b=-\frac{3}{400}$

$c=0$

Thus the plane equation of the screen is $\frac{1}{100}x-\frac{3}{400}y=1$

$4x-3y=400$

$N= (a_n, b_n ,c_n)= (\frac{4}{5},-\frac{3}{5},0)$

$C(x_c,y_c,z_c)=(640+50.\frac{4}{5},720- 50\frac{3}{5},100 )=(680,690,100)$

7-Find $A'$ that projection of point $A$ on the screen plane. $A$ given $(0,400,400)$

$\frac{x}{680}=\frac{y-400}{690-400}=\frac{z-400}{100-400}=k$

$4x-3y=400$

$4(680k)-3(290k+400)=400$

$k=\frac{32}{37}$

$x=680k=680\frac{32}{37}=\frac{21760}{37}= \approx 588,10$

$y=290k+400=290\frac{32}{37}+400=\frac{24080}{37} \approx 650,81$

$z=-300k+400=-300\frac{32}{37}+400=\frac{5200}{37} \approx 140,54$

8- $ \cos u=\frac{\vec{S_1S_2} . \vec{S_1A'}}{|\vec{S_1S_2}||\vec{S_1A'}|}=\frac{480.188,10+640.250,81 }{800. 406,948}\approx 0,77038$

$\cos v=\frac{\vec{S_1S_3} . \vec{S_1A'}}{|\vec{S_1S_3}||\vec{S_1A'}|}=\frac{(-259,46).(-600) }{600. 406,948}\approx 0,6375$

9- $\cos u >0 $ and $\cos v >0 $ , thus The point is in screen side. $ \cos u\approx 0,77038$ $\sin u \approx 0,63758 $

10- $0,77038.406,948=313,50$ ----->$ m = 314$

$0,63758.406,948=259.46$ ----->$ n= 259$

$m<800$ and $ n<600$ , Thus we can draw the point in the screen. $m$ and $n$ are selected integer because we needed to find pixel values of the screen.

The example is to demostrate only one point transfer from 3D to 2D. I hope It will give you a start point to use 3d analytic geometry tools for your purpose.


I attended Professor Neil Dodgson's undergraduate lecture series at Cambridge University where he outlined a series of matrix manipulations that in combination, give the result you are asking for. From his 1998 lecture notes: enter image description here enter image description here enter image description here enter image description here