2D and 3D Graphics with OpenGL Unit -2 21CST602

2D AND 3D GRAPHICS WITH OPENGL

Syllabus:
2D and 3D graphics with OpenGL: 2D Geometric Transformations: Basic 2D Geometric
Transformations, matrix representations and homogeneous coordinates, 2D Composite
transformations, other 2D transformations, raster methods for geometric transformations, OpenGL
raster transformations, OpenGL geometric transformations function,
3D Geometric Transformations: Translation, rotation, scaling, composite 3D transformations,
other 3D transformations, OpenGL geometric transformations functions
Resources:
1. Donald D Hearn, M Pauline Baker and Warren Carithers: Computer Graphics with OpenGL 4th Edition, Pearson, 2014

 Operations that are applied to the geometric description of an object to change its position,
orientation, or size are called geometric transformations.
 The basic geometric-transformation functions available are
1. Translation,
2. Rotation, and
3. Scaling.
 Other useful transformations are Reflection and Shearing.
 To introduce the general concepts associated with geometric transformations, we first consider
operations in two dimensions.
2-Dimensional Translation
- The transformation that changes the position from one point to other
along the straight line path is called Translation.
- To translate a two-dimensional position, we add translation
distances dx and dy to the original coordinates (x, y) to obtain the new
coordinate position (xn, yn) as shown in Figure below.
- From Figure we have,

𝒙𝒏 = 𝒙 + 𝒅𝒙
𝒚𝒏 = 𝒚 + 𝒅𝒚
The translation distance pair (dx, dy) is called a translation vector or shift vector.
We can express the above equations as a single matrix equation by using the following column
vectors to represent coordinate positions and the translation vector:

Thus the 2D transformation equation in the matrix form is given by:

1 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Example:
Consider a triangle with 3 vertices A(20,0), B(60,0), (40,100), being translated 100 units to the
right & 10 units up.. Find the new Vertices.
Solution:

dx= 100, dy= 10

To find Anew, Given A (20,0) To find Bnew Given B (60,0) To find Cnew, Given C(40,100)

Xn= x + dx = 20 + 100 = 120 Xn= x + dx = 60 + 100 = 160 Xn=x+dx

x+dx = 40+100 =140

Yn = y + dy =0 + 10 = 10 Yn = y + dy =0 + 10 = 10 Yn=y+dy
y+dy = 100+10 =110

Anew (120, 10) Bnew (160,10) Cnew (140,110)

Note:
1. Translation is a rigid body that moves objects without deformation.
2. Polygons are translated by adding translation distances for every vertex of the polygon.
3. Circles or ellipse are translated by adding the translation distance to the center.

2 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

2-Dimensional Rotation
 A 2D rotation is applied to an object by repositioning it along a circular path in the xy plane.
 Rotation can be generated by specifying the rotation angle ‘θ’. By default the equations we have
is for the rotation about an origin.
 Positive values of θ specify anticlockwise rotation.
 Negative values of θ specify clockwise rotation.
 Transformation equation for rotation of a point P with center of rotation is origin is as shown
in the figure.

-Here, ‘r’ is the distance of a point from the origin.

-angle ‘∅’ is the original angular position of the
Point P and ‘θ’ is the rotation angle.
- Using polar coordinate equations in terms of ‘θ’
and r we have ,

3 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Thus 2D rotation equation in the matrix form is given by:

Example:
Consider a triangle with 3 vertices A(0,0), B(60,0), (40,100), being translated 100 units to the
right & 10 units up. Find the new Vertices.
Solution:
Θ= - 45o
To find Anew, Given A (0,0) To find Bnew Given B (60,0) To find Cnew, Given C(40,100)
Xn= 0*cos(-45) -0*sin(-45)=0 Xn= 60*cos(-45) -0*sin(-45)=42 Xn=40*cos(-45)-100*sin(-45)=99
Yn = 0*sin(-45)+0*cos(-45)=0 Yn=60*sin(-45)+0*cos(-45)=-42 Yn=40*sin(-45)+100*cos(-45)=42
Anew (0,0) Bnew (42,-42) Cnew (99,42)

4 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

2-Dimensional Scaling
 A Scaling transformation is used to alter the size of an object.
 Scaling of a polygon is done by computing the product of (x, y) of each vertex with scaling
factors (Sx, Sy) to product the transformed co-ordinates (xn , yn).
 The equations are:

 The Transformation of in the matrix form is given by:

Note:
1. If (Sx, Sy) < 1, reduces the size of the object.
2. If (Sx, Sy) > 1, produce an enlargement.
3. If (Sx, Sy) = 1, No change in the size of the object.
4. If (Sx ≠ Sy), distort the picture.

Homogeneous co-ordinates & Matrix Representation of 2D Transformations:

 The matrix representation for translation, rotation & scaling respectively are:
1. Pn = P + T
2. Pn= R.P
3. Pn= S.P
 Here, translation is treated differently from scaling & rotation. We should treat all the
transformations in a consistant way.
 If the points are expressed in homogeneous coordinates, all the 3 transformations can be
treated multiplications.
 If points are expressed as homogeneous coordinates, we add 3rd coordinate to a point and
hence instead of being represented by a pair (x,y) each point is represented by a triplet
(x,y,w). For 2D w = 1, we have (x, y,1)
 Because points are now 3 element column vectors, transformation matrices which multiply a
point vector must be 3x3.

5 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

 In the 3x3 matrix form for homogeneous coordinates, the transformation equations are:

Other transformations are REFLECTION and SHEAR.

Reflection
 A reflection is a transformation that produces a minor image of an object relative to an axis of
reflection.
 Scaling transformation with negative scaling factors gives us reflection.

6 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Shear:
 A transformation that slants the shape of an object is called shear transformation.
 Two common shearing transformations are:
1. X-shear(Shifts X coordinate values)
2. Y-shear(Shifts Y coordinate values)
X-Shear

The equations are:

7 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Y-Shear

The equations are:

8 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Inverse Transformation:
It refers to the process of undoing the transformation that has been applied to an object or set of
vertices.
1. For translation,weobtain the inverse matrix by negating the translation distances. Thus, for
inverse translation we have, T (-dx, -dy)
2. An inverse rotation is accomplished by replacing the rotation angle by its negative. Thus, for
inverse rotation we have, R(-ϴ)
3. An inverse scaling transformation is accomplished by replacing the scaling parameters with
𝟏 𝟏
their reciprocals. Thus, for inverse scaling we have, S ,
𝑺𝒙 𝑺𝒚
Composition (Concatenation) of 2D transformation:
 The basic purpose of composing transformation is to gain efficiency by applying a single
composed transformation to a point, rather than applying a series of transformations, one
after the other.
 Thus, if we want to apply two transformations to point position P, the transformed location
would be calculated as
Pn= M2 ·M1 · P
= M· P
 The coordinate position is transformed using the composite matrix M, rather than applying
the individual transformations M1 and then M2.

Case 1: Rotation about arbitrary point
We know that how to do rotation only about the origin. To rotate an object about an arbitrary
point (xr, yr) we have to carry out the following 3 steps
1. Translate such that (xr, yr) is at origin. i. e, T (-xr,- yr)
2. Rotate i.e, R(ϴ)
3. Apply inverse translations such that (xr, yr), is shifted to its from origin to its original
position i.e, T(xr, yr).
Therefore the net transformation matrix is:
T(xr, yr)* R(ϴ) * T (-xr,- yr)

Case 2: Scaling about an arbitrary point.

We know that how to scale relative only about the origin. To scale an object about an arbitrary
point (xf, yf) we have to carry out the following 3 steps:
1. Translate such that (xf, yf) is at origin. i. e, T(-xf, -yf)
2. Apply scaling. i. e, S(Sx, Sy)
3. Apply inverse translations such that (xr, yr) is shifted from origin to the original position
i.e, T(xf, yf).

9 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Therefore the net transformation matrix is:

T(xf, yf)* S(Sx, Sy) * T (-xf,- yf)

Composite Two-Dimensional Translations

(Prove that 2 successive translations are additive.)
Let two successive translation vectors (dx1,dy1) and (dx2,dy2) are applied to a 2D coordinate
position P as shown in figure:

From Figure,
P’= T(dx1,dy1) • P(1)
P”= T(dx2,dy2) · P’(2)
Put (1) in (2), we get,
P”= T(dx2,dy2) ·T(dx1,dy1) · P

which demonstrates that two successive translations are additive.

10 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Composite Two-Dimensional
Dimensional Rotations
(Prove that 2 successive rotations are additive.)
Let two successive rotations are applied to a point P as shown in figure:

From Figure,
P’= R(ϴ1) · P(1)
P”= R(ϴ2) · P’(2)
Put (1) in (2), we get,
P”= R(ϴ2) ·R(ϴ1) · P

11 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Composite Two-Dimensional
Dimensional Scalings
(Prove that 2 successive scalings are multiplicative)

12 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Find the net transformation matrix for window to viewport transformation

shown below:

1. Translate such that (xmin, ymin) is at origin. i. e, T(-xmin, -ymin)

2. Apply scaling. i. e, S(Sx, Sy) ,where
𝒖𝒎𝒂𝒙 𝒖𝒎𝒊𝒏 𝒗𝒎𝒂𝒙 𝒗𝒎𝒊𝒏
𝑺𝒙 = and 𝑺𝒚 =
𝒙𝒎𝒂𝒙 𝒙𝒎𝒊𝒏 𝒚𝒎𝒂𝒙 𝒚𝒎𝒊𝒏
3. Translations to the position (umin,vmin) i.e, T(umin,vmin).

Therefore, the net transformation matrix M is given by:

𝒖𝒎𝒂𝒙 𝒖𝒎𝒊𝒏 𝒗𝒎𝒂𝒙 𝒗𝒎𝒊𝒏

M= T(umin,vmin)* S , * T(-xmin, -ymin)
𝒙𝒎𝒂𝒙 𝒙𝒎𝒊𝒏 𝒚𝒎𝒂𝒙 𝒚𝒎𝒊𝒏

13 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

3D Transformation and its Homogeneous matrix representation:

14 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

15 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Composition (Concatenation
oncatenation) of 3D transformation:

Case-3: Rotation about an arbitrary axis:

When an object is to be rotated about an axis that is not parallel to one of the co-ordinate
co axis
(About which the rotation has to take place). We have to perform some additional transformations.
The sequence is given below:
Step 1: Translate the object so that rotation axis specified passes through the co co-ordinate
origin.[T(-P)]
Step 2: Rotate the object that ax
axis of rotation aligns with the specified coordinate
ordinate axis (eg:
(e z-axis)
a. Perform rotation about x to bring in x-z plane i.e, [Rx (ϴx)].
b. Perform rotation about y to bring into the Z plane i.e, [Ry (ϴy)].

16 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Step 3: Rotate about the specified axis. [Rz(ϴz)]

Step 4: Inverse rotation about y-axis and then about x-axis and bring back to original orientation
[Ry (-ϴy). Rx (-ϴx)].
Step 5: Inverse translation to move to original position.[T(P)]
Finally we have,

N= T (-P)*Ry (-ϴy) *Rx(-ϴx) *Rz(ϴz) *Ry(ϴy) *Rx(ϴx) *T(p)

Case 4: Scaling about an arbitrary point.

We know that how to scale relative only about the origin. To scale an object about an arbitrary
point (xf, yf) we have to carry out the following 3 steps:
1. Translate such that point P is at origin. i. e, T(-P)
2. Apply scaling. i. e, S(Sx, Sy)
3. Apply inverse translations such that point P is shifted from origin to the original position i.e,
T(P).
Therefore the net transformation matrix is:

N= T(P)* S(Sx, Sy) * T (-P)

OpenGL Transformation Matrices

-In Open GL, several matrices are part of the state.
-The matrix state is manipulated by a common set of functions, & we use the function
glMatrixMode to select the matrix to which the operations apply.
-In OpenGL, the model-view matrix normally is an affine-transformation matrix & has only 12
degree of freedom.
The Current Transformation Matrix :-
-The generalization common to most graphics systems is the current transformation matrix,
(CTM). It is the matrix that is applied to any vertex that is defined subsequent to it's setting. If we
change the CTM, we change the state of the system.
- The CTM is part of the pipeline; thus if p is a vertex specified in the application, then the pipeline
produces Cp.
-The CTM is a 4x4 matrix; it can be altered a set of functions provided by the by graphics package.
-Let C denote the CTM. Initially, it is Set to the 4X4 identity matrix. We write this as
CI
-The functions that alter C are of 2 forms:
(a) Load it with some matrix
(b) Pre-multiplication (or) post-multiplication by a matrix
- OpenGL uses only post-multiplication.
- We can write 3 transformation operations in post-multiplication form as
1. CCT //Translation
2. CCR //Rotation
3. CCS //Scaling
and in Load Form as

17 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

1. CT //Translation
2. CR //Rotation
3. CS //Scaling
Most systems allow us to load the CTM with an arbitrary matrix M,
CM //M is Transformation Matrix
(or) to post-multiply by an arbitrary Matrix M
CCM //M is Transformation Matrix

Rotation, Translation, and Scaling:

-In openGL, the matrix that is applied to all primitives is the product of the model-view matrix (GL-
MODELVIEW) & the projection matrix (GL_PROJECTION).
- We can manipulate each individually by selecting the desired matrix by
glMatrixMode(GL-MODELVIEW)
glMatrixMode(GL-PROJECTION)

-We can load a matrix with a function

glLoadMatrixf(M)-The matrix M is a one dimension array of 16 elements which are the
components of the desired 4×4 matrix stored by columns.

-We can load an Identity matrix with the function

glLoadIdentity()

-We Can alter the CTM selected matrix with the Function
glMultMatrixf(m)
m is one dimension array of 16 elements

-Rotation, translation & scaling are provided through the following 3 functions
glRotatef(angle, Vx, Vy, Vz)
-angle in degrees.
- (Vx, Vy, VZ) define axis of rotation

glTranslatef (dx, dy, dz)

- (dx, dy, dz), components of displacement vector

glScalef (Sx, Sy, Sz)

--(Sx, Sy, Sz) Specifies the scale factor.
-Each has a double (d) and a float (f) format

18 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Other Functions
 glPushMatrix();
– Save the state.
– Push a copy of the CTM onto the stack.
– The CTM itself is unchanged.
 glPopMatrix();
– Restore the state, as it was at the last Push.
– Overwrite the CTM with the matrix at the top of the stack.
 glLoadIdentity();
– Overwrite the CTM with the identity matrix.

19 Dept. of CSE, Dr. AIT, Bangalore

2D and 3D Graphics with OpenGL Unit -2 21CST602

Questions on Unit-2

1. Explain rotation in 2D.Show that two successive rotations are additive.

2. Briefly explain the 3 basic transformations in 3D. Obtain the homogeneous coordinate
matrix for the same.
3. Explain rotation, translation and scaling with respect to 2D.
4. Consider on object ABC with co-ordinates A (1,1) ,B (10,1) ,C (5,5) Rotate the object by 90
Degree in counter clockwise direction and give co-ordinates of transformed object.
5. Apply following transformations on polygon A(10,10) ,B(10,40),C(30,10), D(20,50)and
E(30,40).
a. Translation 10, 20 units along X&Y directions.
b. Rotate 45 degrees about the origin.
c. Scale with scaling factor(2,2)
6. Explain window, view port and window - to - view port transformation.
7. Obtain the matrix representation for rotation of a object about an arbitrary axis.
8. Design a transformation matrix for window to viewport transformation.
9. With the help of a suitable diagram explain basic 3D Geometric transformation techniques
and give the transformation matrix.
10. Design transformation matrix to rotate an 3D object about an axis that is parallel to one of
the co-ordinate axis.
11. What is concatination of Transformations? Explain rotation about a fixed point.
12. All proofs
13. Examples
14. Homogeneous Transformations.
15. Explain reflection with transformation matrix.
16. Define and represent the following 2-D transformations in homogenous coordinate system.
a. Translation
b. Rotation
c. Scaling
d. Reflection
17. Explain the basic transformations in 3D and represent them in matrix form.
18. What is the need of homogeneous coordinates? Give 2-dimension homogeneous coordinate
matrix for translation, rotation and scaling.
19. Obtain a matrix representation for rotation of a object about a specified pivot point in 2-
dimension.
20. Explain OpenGL geometric transformation functions.
21. Explain translation, rotation and scaling of 2D transformation with suitable diagrams,
equations and matrix.
22. Explain any two of the 3D geometrical transformation.

20 Dept. of CSE, Dr. AIT, Bangalore