HOW TO DRAW AN OBJECT IN 3D ?

This document presents a method to display objects in 3 dimensions. There are of course different ways to do that. The method presented here is certainly not the most efficient, but it appears to be quite easy to understand. We consider here that the 3D objects are simply formed of segments, the faces will be transparent. So this document is about representing the objects as "wireframed". This way of displaying objects in 3D is illustrated by the applet written in Java, for which the source code is available.

A 3D object is composed with points P_i of coordinates (x_i;y_i;z_i) in the reference (A;x;y;z) that we will call the "absolute" reference. The coordinates of A are (x_a;y_a;z_a).

The points can be linked to form edges and describe the form of the object. We note L_ij the line that links the point P_i to the point P_j.

The points could be grouped to form faces with a color or a texture in order to give a more realistic aspect.

Here we limit ourselves to a "wireframed" representation. Hence, an object O = (P;L) is composed with a set of points P and a set of lines L.

To display an object on a computer screen, we can use the following technique. We represent the computer screen as a reference (B;u;v;w). The point B of coordinates (x_b;y_b;z_b) is the center of the screen; the vector u represents the horizontal direction of the screen, from the left to the right; the vector v represents the vertical direction of the screen, from the top to the bottom; and the vector w represents the direction of the glance of the observer, from the eye to the object.

The observer is located in front of the screen. We consider that the eyes, represented by the point C of coordinates (x_c;y_c;z_c), are just in front of the center B of the screen. Hence, the point B is on the axis (C;w) at a distance d from the screen.

The observation of an objet on the screen can be schematized by the following figure where beams of light are traced going from points of the object to the eye of the observer.

Here is the technique to represent the object. The points P_i of the object are projected on the screen to form the points P'_i. To do so, we determine the segments [P_iC] that start from the points P_i and arrive to the point C, the eye. Then, we just need to calculate the intersections P'_i of the segments with the screen. Once the points are projected, we just have to draw the edges that form the object: for each line L_ij, we must draw a line L'_ij that links the point P'_i to the point P'_j.

We choose here to decompose the projection of the points of the object on the screen in two steps. The first stage consists in changing the reference of the points of the object. From the absolute reference (A;x;y;z), the points are expressed in the reference (B;u;v;w) of the screen. This step is detailed in the section "Reference Change". Then, the computing of the projection is performed (very simple once the reference is changed). This step is detailed in the section "Projection on the Screen".

Once we are able to display a 3D object, it can be interesting to see it under different angles. For that, the section "Movements in the 3D Scene" proposes different kinds of movement in the 3D space such as turn, move forward, go up...

We consider a point P_i of coordinates (x_i,y_i,z_i) in the reference (A;x;y;z) and we try to determine its coordinates (u_i;v_i;w_i) in the reference (B;u;v;w).

In the reference (A;x;y;z), we see that the vector AP_i has the coordinates (x_i;y_i;z_i) and the vector AB has the coordinates (x_b;y_b;z_b). In the reference (B;u;v;w), the vector BP_i has the coordinates (u_i,v_i,w_i). From the equality AP_i = AB + BP_i and the previous observations, we deduce:

x_i x + y_i y + z_i z  =  (x_b x + y_b y + z_b z) + (u_i u + v_i v + w_i w)
(x_i - x_b) x + (y_i - y_b) y + (z_i - z_b) z  =  u_i u + v_i v + w_i w

By considering that the vectors u, v and w have respectively the coordinates (x_u;y_u;z_u), (x_v;y_v;z_v) and (x_w;y_w;z_w), we deduce the following system of equations.

x_i - x_b = x_uu_i + x_vv_i + x_ww_i
y_i - y_b = y_uu_i + y_vv_i + y_ww_i
z_i - z_b = z_uu_i + z_vv_i + z_ww_i

After resolution, we obtain:

u_i = [(x_i - x_b) da₁ + (y_i - y_b) da₂ + (z_i - z_b) da₃] / [x_uda₁ + y_uda₂ + z_uda₃]
v_i = [(x_i - x_b) db₁ + (y_i - y_b) db₂ + (z_i - z_b) db₃] / [x_vdb₁ + y_vdb₂ + z_vdb₃]
w_i = [(x_i - x_b) dc₁ + (y_i - y_b) dc₂ + (z_i - z_b) dc₃] / [x_wdc₁ + y_wdc₂ + z_wdc₃]

with:

da1 = yvzw - zvyw da2 = zvxw - xvzw da3 = xvyw - yvxw

db1 = ywzu - zwyu db2 = zwxu - xwzu db3 = xwyu - ywxu

dc1 = yuzv - zuyv dc2 = zuxv - xuzv dc3 = xuyv - yuxv

To calculate the coordinates (u_i,v_i,w_i) of the points P_i of a 3D object in the screen reference, we just need to apply the previous formulas.

We consider a point P_i of the 3D object for which we know the coordinates (u_i,v_i,w_i) in the screen reference. We try now to calculate the coordinates (u'_i,v'_i,w'_i) of the projection P'_i of P_i on the screen. We can already say that w'_i = 0, because P'_i is on the plane of the screen.

Now we must find the intersection of the straight line (P_iC) with the plane of the screen (B;u;v). From the figure, we can say:

||P1'_iB|| / ||P1_iP3_i|| = ||P2'_iB|| / ||P2_iP3_i|| = ||BC|| / ||P3_iC||

||x|| means the length of the segment x. We note r the ratio ||BC|| / ||P3_iC||. We deduce:

r = d / (w_i + d)

From the figure, we can say:

||P1'_iB|| = v'_i
||P2'_iB|| = u'_i
||P1_iP3_i|| = v_i
||P2_iP3_i|| = u_i

Which means that u'_i = u_ir and v'_i = v_ir. To resume, the coordinates of P'_i are (u_ir;v_ir;0).

To draw the 3D object, we must draw the edges of the object one after the other. We consider one of these lines L_ij from the point P_i to the point P_j. Three cases can appear.

In this case, we only need to draw a line on the screen from the projection P'_i of P_i to the projection P'_j of P_j.

In this case, no part of the line is supposed to be seen by the observer, so we do not draw any line.

In this case, one of the points is in front of the screen, we suppose P_i, and the other one is behind the screen, we suppose P_j. To draw the part of the line that the observer is supposed to see, we must determine the intersection P''_j of the straight line (P_iP_j) with the screen. Then, we just have to draw the line (P'_iP''_j).

To calculate the coordinates (u''_i;v''_i;w''_i) of P''_j, we use the same technique as with the projection. We determine the ratio r = w_i / (w_i - w_j) that allows us to calculate the coordinates:

u''_j = u_i + (u_j - u_i) r
v''_j = v_j + (v_j - v_i) r
w''_j = 0

Now that we are able to project a 3D object on the computer screen, it can be interesting to move in the 3D scene in order to see the object under different angles. Of course, when we "move", that is in fact the screen that changes its position and/or its orientation with regard to the object. Here is the list of the few movements proposed here (sorted from the simplest to the most complicated).

• Translations of the screen (right / left, up / down, forward / backward).

• Rotations of the screen around its central point (right / left, up / down, inclination right / left).

• Rotations around a point of the scene (right / left, up / down).

These translations consist in moving the screen along one of the three directions u, v or w of a given distance k.

To move the screen to the right, we must translate its center B along u in the positive direction.

B ← B + k u

⇔

xb ← xb + kxu yb ← yb + kyu zb ← zb + kzu

To move the screen to the left, we must translate its center B along u in the negative direction.

B ← B - k u

To move the screen up, we must translate its center B along v in the negative direction.

B ← B - k v

To move the screen down, we must translate its center B along v in the positive direction.

B ← B + k v

To move the screen forward, we must translate its center B along w in the positive direction.

B ← B + k w

To move the screen backward, we must translate its center B along w in the negative direction.

B ← B - k w

These rotations consist in turning the screen around one of the three axis (B;u), (B;v) or (B;w) of a given angle k.

To turn the screen on the right, we must perform a positive rotation around the axis (B;v). For that, we only have to consider the plane (B,u,w) and to modify the coordinates of the vectors u and w in order that they perform the rotation.

From the figure, this rotation is expressed:

u ← u cos(k) - w sin(k)		⇔		xu ← xu cos(k) - xw sin(k) yu ← yu cos(k) - yw sin(k) zu ← zu cos(k) - zw sin(k)
w ← w cos(k) + u sin(k)		⇔		xw ← xw cos(k) + xu sin(k) yw ← yw cos(k) + yu sin(k) zw ← zw cos(k) + zu sin(k)

However, u and v must still with the length 1. Because of the rounding during the computing, their length will decrease progressively, rotation after rotation. To avoid that, we must adjust to 1 the length of the vectors (i.e. normalize the vectors). Very simply, we calculate the length d of the vector (for instance v).

d = √(x_v² + y_v² + z_v²)

Then, we normalize the vector.

v ← v / d

⇔

xv ← xv / d yv ← yv / d zv ← zv / d

Remark: Due to the normalization, the rotation can be done more easily with the help of the tangent.

From the figure, the rotation can finally be expressed:

u' ← u - w tan(k)		⇔		xu' ← xu - xw tan(k) yu' ← yu - yw tan(k) zu' ← zu - zw tan(k)
w' ← w + u tan(k)		⇔		xw' ← xw + xu tan(k) yw' ← yw + yu tan(k) zw' ← zw + zu tan(k)
u ← u' / ||u'||
w ← w' / ||w'||

To turn the screen on the left, we must perform a negative rotation around the axis (B;v).

u' ← u + w tan(k)
w' ← w - u tan(k)
u ← u' / ||u'||
w ← w' / ||w'||

To turn the screen up, we must perform a positive rotation around the axis (B;u).

w' ← w - v tan(k)
v' ← v + w tan(k)
w ← w' / ||w'||
v ← v' / ||v'||

To turn the screen down, we must perform a negative rotation around the axis (B;u).

w' ← w + v tan(k)
v' ← v - w tan(k)
w ← w' / ||w'||
v ← v' / ||v'||

To incline the screen on the right, we must perform a positive rotation around the axis (B;w).

v' ← v - u tan(k)
u' ← u + v tan(k)
v ← v' / ||v'||
u ← u' / ||u'||

To incline the screen on the left, we must perform a negative rotation around the axis (B;w).

v' ← v + u tan(k)
u' ← u - v tan(k)
v ← v' / ||v'||
u ← u' / ||u'||

These rotations consist in turning of an angle k in one of the three planes (B;u;w), (B;v;w) and (B;v;u) around a given point D. The rotation is such as the location on the screen of the point D has not changed. That comes to turn around an object while always looking at the same point (here it is D). Hence, if we choose D as the center of a 3D object, we have the illusion that this is the object that turns on itself and not the observer that moves.

To turn on the right around the point D, we first need to perform a positive rotation of angle k of the center B around the projection D' of the point D on the plane (B;u;w).

Then, we just have to perform a left rotation of the screen of the same angle k (we will use the "rotation left" seen previously).

First, the coordinates (u_d;v_d;w_d) of the point D are calculated in the reference (B;u;v;w) (with the formula presented in the section on the reference change). Hence, the coordinates of the projection D' of the point D on the plane (B;u;w) are (u_d;0;w_d). The distance d₁ = ||BD'|| is also calculated. It will intervene later in order to guarantee that the distance ||BD'|| stills unchanged once the rotation is terminated.

The central rotation begins with a rotation of the point B around D' in the plane (B;u;w) by using the technique of the tangent seen before.

From the figure, the point B is translated along a vector perpendicular to BD' for which the coordinates in the plane (B;u;w) are (w_d;-u_d). To respect the rotation angle k, B is translated the following way.

B ← B + u w_d tan(k) - v u_d tan(k)

Then, the segment [BD'] is brought back to its old length (i.e. d₁). To do so, we calculate d₂, the new distance of [BD'], and we determine the ratio r = (d₂ - d₁) / d₂. We just need then to translate B of the vector r BD'. To simplify the computation, the new coordinates of D' in the reference (B;u;v;w) can be calculated. Hence, the translation is expressed:

B ← B + r BD'  ⇔  B ← B + u r u_d + w r w_d

Then, we must turn the screen to put it back in the good direction. To do so, we only have to apply the operation "rotation left" seen previously with the angle k.

To turn on the left around the point D, we first need to perform a negative rotation of angle k of the center B around the projection D' of the point D on the plane (B;u;w). Then, we just have to perform a right rotation of the screen of the same angle k (we will use the "rotation right" seen previously).

To turn up around the point D, we first need to perform a negative rotation of angle k of the center B around the projection D' of the point D on the plane (B;v;w). Then, we just have to perform a down rotation of the screen of the same angle k (we will use the "rotation down" seen previously).

To turn down around the point D, we first need to perform a positive rotation of angle k of the center B around the projection D' of the point D on the plane (B;v;w). Then, we just have to perform an up rotation of the screen of the same angle k (we will use the "rotation up" seen previously).