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

I googled around a bit, but usually I found overly-technical explanations, or other, more specific Stackoverflow questions on how 3D computer graphics work. I'm sure I can find enough resources for this eventually, but I figured that it's good material for this site...

Lets say that I have a 3D space, with x, y and z coordinates. Then, I have a set of vectors (vertices in computer graphics, I suppose) in that space (they can be forming a cube, for example).

How do I go about transforming them for rendering on a 2D plane (screen)? I need to get x and y coordinates of 2D vectors, but, they need to be dependent on a specific point in space - the camera. When I move the camera, the x and y values should change.

I guess the process will go something like this:

1. Translate the 3D vectors according to the camera's x, y and z.
2. Rotate the 3D vectors according to the camera's theta and phi (I will need a lot of to polar coordinate system and from polar coordinate system conversions for this, but sin and cos aren't expensive, right?)
3. x = x/z, y = y/z, for transforming into 2D, I think, not sure about this part at all, I think I saw it somewhere.
4. Scale all vectors according to the camera's distance from the scene (or something else?)
5. Render.

I brainstormed these on the fly, there are probably a tonne of better solutions. Also, please try to keep the math simple, as I only know basic trig and calc up to the chain rule, I'm not sure what are people actually using for this. I heard something about "rotation matrices", what are they, exactly? (Well, I'm about to Google that now, but can't hurt me to get an answer here as well.) Also, what are the standard directions for xyz space? (Is z "up"?)

-
If you divide by $z$, then that means that the $z$-axis is pointing away from you (points on the horizon fall close to the center). Mike Abrash's "old" book: Zen of Graphics Programming is useful for learning about how all this was done in DOS-era (in the end he explains how the 3D engine of Doom was coded). Nowadays OpenGL is the rage (Windows gives a standard interface, and graphics card vendors can write there own drivers), and instead of rotation matrices they use quaternions (or so I heard). One aspect you didn't list is 3D-clipping. It is basic analytic geometry, but necessary here. – Jyrki Lahtonen Jul 5 '12 at 17:37
@JyrkiLahtonen, OK, noted, but clipping is just making stuff that is far off and stuff that is too close disappear, right? I can do that... – jcora Jul 5 '12 at 17:55
I'm sure you can. But you have to clip the stuff outside the so called view frustrum to get it right (the cone from the camera to the viewport extended to infinity). Also: you have to do it before you divide by $z$. Not try to figure it out afterwards as some idiot once tried umpteen years ago (whistles and exits back left). – Jyrki Lahtonen Jul 5 '12 at 18:06
Wait, but wouldn't the vectors outside of the frustrum just... Be outside? I mean, I haven't done this yet as I've been busy, so I'm not sure... – jcora Jul 5 '12 at 18:41
If you do polygon based graphics, then clipping helps, when parts of the polygon are outside of the view frustrum and parts are inside. IIRC at a corner it is even possible that parts of the polygon are inside even though all the vertices are outside. Maybe nowadays graphics is not polygon-based? I may be completely out of touch :-) – Jyrki Lahtonen Jul 5 '12 at 18:48

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 to avoided high mathematics for clear understanding. I believe rotating is next step after you understand all the points 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 botton 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 $S_2S_1 . S_3S_1 =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-Find $m$,$n$: $\cos u=\frac{S_2S_1 . A'S_1}{|S_2S_1||A'S_1|}=\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}}$ . If $\cos u <0$ then $A'$ is out of screen. we cannot draw in out 2D screen. If $\cos u >0$ then $m= \sqrt{(x'_a-x_1)^2+(y'_a-y_1)^2+(z'_a-z_1)^2} \cos u =\frac{S_2S_1 . A'S_1}{W}$

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

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

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=590k+400=590\frac{32}{37}+400=\frac{33680}{37} \approx 910,27$

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

8- $\cos u=\frac{S_2S_1 . A'S_1}{|S_2S_1||A'S_1|}=\frac{480.188,10+640.510,27 }{800. 602,558}\approx 0,8647$

$\sin u \approx 0,5022$

$0,8647.602,558=521.0319026$ ----->$m = 521$

$0,5022.602,558=302.6046276$ ----->$n= 303$

$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.

-
very nice explanation at the end – user79654 May 27 '13 at 7:43

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:

-
Please note that this is not a trivial topic. There are many surprising results to catch out newcomers; for example, when you project a 3D straight line onto a 2D screen from the perspective of a pinhole camera, the result is usually a 2D curve! – Matthew Slyman Jul 10 '12 at 15:49
The link is broken. (This information comes courtesy of @TemPora, who tried to communicate this through an edit.) – Potato Jun 27 '13 at 7:45