Module - 2

2D AND 3D GRAPHICS WITH OPENGL

3D GEOMETRIC TRANSFOMATIONS
Topics Covered :
Basic 2D Geometric Transformations:
• Basic 2D Geometric Transformations
• Matrix Representations and homogeneous coordinates
• OpenGL raster transformations
• Transformation between 2D coordinate systems
• OpenGL geometric transformations functions.
3D Geometric Transformations:
• 3D translation
• Rotation
• Scaling
• OpenGL geometric transformations functions.
 2 Dimensional Geometric Transformations
• An architect, for example, creates a layout by arranging the orientation and size
of the component parts of a design, and a computer animator develops a video
sequence by moving the “camera” position or the objects in a scene along
specified paths.
• Operations that are applied to the geometric description of an object to change
its position, orientation, or size are called “Geometric transformations”.
• Sometimes geometric transformations are also referred to as “modeling
transformations”.
Basic Two-Dimensional Geometric Transformations
• The geometric-transformation functions that are available in all
graphics packages are those for translation, rotation, and scaling.
 Two-Dimensional Translation
• We perform a translation on a single coordinate point by adding offsets to
its coordinates so as to generate a new coordinate position.
• We are moving the original point position along a straight-line path
to its new location.

• To translate a two-dimensional position, we add translation distances tx and ty

to the original coordinates (x, y) to obtain the new coordinate position (x’, y’)
as shown in Figure
To translate a two-dimensional position, we add translation distances tx
and ty to the original coordinates (x, y) to obtain the new coordinate
position (x , y ) as shown in Figure.

The translation distance pair (tx, ty) is called a translation vector or shift
vector.
We can express Equation 1 as a single matrix equation by using the
following column vectors to represent coordinate positions and the
translation vector:

This allows us to write the two-dimensional translation equations in the

matrix form
• Translation is a rigid-body coordinates. Figure 2 illustrates the
transformation that moves objects application of a specified translation
without deformation. That is, every vector to move an object from one
point on the object is translated by position to another.
the same amount.
• A straight-line segment is translated
by applying Equation 3 to each of the
two line endpoints and redrawing the
line between the new endpoint
positions.
• A polygon is translated similarly. We
add a translation vector to the
coordinate position of each vertex
and then regenerate the polygon
using the new set of vertex
Two-Dimensional Rotation
• We generate a rotation transformation of an object by specifying a rotation

axis and a rotation angle.

• A two-dimensional rotation of an object is obtained by repositioning the
object along a circular path in the xy plane.
• In this case, we are rotating the object about a rotation axis that is

perpendicular to the xy plane (parallel to the coordinate z axis).

• Parameters for the two-dimensional rotation are the rotation angle θ and a

position (xr, yr), called the rotation point (or pivot point), about which the
object is to be rotated.
• A positive value for the angle θ is the rotation angle.
defines a counterclockwise •we can express the transformed
rotation about the pivot point, as coordinates in terms of angles θ and φ
in above Figure , and a negative as
value rotates objects in the
clockwise direction. • The original coordinates of the point
• The angular and coordinate in polar coordinates are
relationships of the original and
transformed point positions are
shown in Figure
•In this figure, r is the constant
distance of the point from the origin,
angle φ is the original angular position
of the point from the horizontal, and θ
• Substituting expressions of x and y in the equations of x’ and y’ we
get

• We can write the rotation equations in the matrix form

• Where the rotation matrix is,

• Rotation of a point about an arbitrary pivot position is illustrated in
Figure

• The transformation equations for rotation of a point about any specified

rotation position (xr, yr):
 Two-Dimensional Scaling
• To alter the size of an object, we apply a scaling transformation.
• A simple two-dimensional scaling operation is performed by multiplying
object positions (x, y) by scaling factors sx and sy to produce the
transformed coordinates (x’, y’):

• The basic two-dimensional scaling equations can also be written in the

following matrix form

or
 same value, a uniform scaling is
produced, which maintains relative
object proportions.
• Where S is the 2 × 2 scaling
matrix • Unequal values for sx and sy result in
a differential scaling that is often
 Any positive values can be assigned
used in design applications.
to the scaling factors sx and sy.
 Values less than 1 reduce the size of

objects
 Values greater than 1 produce

enlargements.
 Specifying a value of 1 for both s
x
and sy leaves the size of objects
unchanged.
• When sx and sy are assigned the
 In some systems, negative values can also be specified for the
scaling parameters. This not only resizes an object, it reflects it
about one or more of the coordinate axes.
 Figure illustrates scaling of a line by assigning the value 0.5 to both sx
and sy
Matrix Representations and Homogeneous Coordinates
• Each of the three basic two-dimensional transformations (translation,
rotation, and scaling) can be expressed in the general matrix form
• With coordinate positions P and P’ represented as column vectors.
• Matrix M1 is a 2 × 2 array containing multiplicative factors, and M2 is
a two-element column matrix containing translational terms.
• For translation, M1 is the identity matrix.
• For rotation or scaling, M2 contains the translational terms associated
with the pivot point or scaling fixed point.

PI =M1.P+M2
Homogeneous Coordinates

• Multiplicative and translational terms for a two-dimensional

geometric transformation can be combined into a single matrix if we
expand the representations to 3 × 3 matrices
• We can use the third column of a transformation matrix for the
translation terms, and all transformation equations can be expressed
as matrix multiplications.
• We also need to expand the matrix representation for a two-
dimensional coordinate position to a three-element column matrix
• A standard technique for accomplishing this is to expand each two
dimensional coordinate-position representation (x, y) to a three-element
representation (Xh and Yh, h), called homogeneous coordinates, where the
homogeneous parameter h is a nonzero value such that

• general two-dimensional homogeneous coordinate representation could

also be written as (h·x, h·y, h).
• A convenient choice is simply to set h = 1. Each two-dimensional position is
then represented with homogeneous coordinates (x, y, 1).
• The term homogeneous coordinates is used in mathematics to refer to the
effect of this representation on Cartesian equations.
Two-Dimensional Translation Matrix
• The homogeneous-coordinate for translation is given by

• This translation operation can be written in the abbreviated form

with T(Tx and Ty) as the 3 × 3 translation matrix

Two-Dimensional Rotation Matrix
• Two-dimensional rotation transformation equations about the
coordinate origin can be expressed in the matrix form

The rotation transformation operator R(θ ) is the 3 × 3 matrix with

rotation parameter θ.
Two-Dimensional Scaling Matrix
• A scaling transformation relative to the coordinate origin can now be
expressed as the matrix multiplication

• The scaling operator S(Sx,Sy) is the 3 × 3 matrix with parameters Sx and Sy

OPENGL RASTER TRANSFORMATIONS
• A translation of a rectangular array of pixel-color values from one buffer area
to another can be accomplished in OpenGL as the following copy operation:
glCopyPixels (xmin, ymin, width, height, GL_COLOR);
• The first four parameters in this function give the location and dimensions of
the pixel block; and the OpenGL symbolic constant GL_COLOR specifies that
it is color values are to be copied.
• A block of RGB color values in a buffer can be saved in an array with the
function
glReadPixels (xmin, ymin, width, height, GL_RGB, GL_UNSIGNED_BYTE, colorArray);
• If color-table indices are stored at the pixel positions, we replace the
constant GL_RGB with GL_COLOR_INDEX.
• To rotate the color values, we rearrange the rows and columns of the color
array, as described in the previous section. Then we put the rotated array
back in the buffer with
glDrawPixels (width, height, GL_RGB, GL_UNSIGNED_BYTE, colorArray);
• A two-dimensional scaling transformation can be performed as a raster
operation in OpenGL by specifying scaling factors and then invoking either
glCopyPixels or glDrawPixels.
• For the raster operations, we set the scaling factors with
glPixelZoom (sx, sy);
• We can also combine raster transformations with logical operations to
produce various effects with the exclusive or operator
 TRANSFORMATIONS BETWEEN
TWO-DIMENSIONAL COORDINATE SYSTEMS
• Computer-graphics applications involve coordinate transformations from one
reference frame to another during various stages of scene processing.
• The viewing routines transform object descriptions from world coordinates to device
coordinates.
• For modeling and design applications, individual objects are typically defined in their
own local Cartesian references. These local-coordinate descriptions must then be
transformed into positions and orientations within the overall scene coordinate
system.
• A facility-management program for office layouts, for instance, has individual
coordinate descriptions for chairs and tables and other furniture that can be placed
into a floor plan, with multiple copies of the chairs and other items in different
positions.
To transform object descriptions from xy coordinates
to xy coordinates, we set up a transformation that
superimposes the xy axes onto the xy axes. This is Figure 30 shows a Cartesian x y system specified with
done in two steps: coordinate origin (x0, y0) and orientation angle θ in a
1. Translate so that the origin (x0, y0) of the xy Cartesian xy reference frame.
system is moved to the origin
(0, 0) of the xy system.
2. Rotate the x axis onto the x axis.
 FUNCTIONS FOR TWO-DIMENSIONAL
OPENGL GEOMETRIC
TRANSFORMATIONS
• In the core library of OpenGL, a separate function is available for each of the basic
geometric transformations. Because OpenGL is designed as a three-dimensional
graphics application programming interface (API), all transformations are specified in
three dimensions.
• To perform a translation, we invoke the translation routine and set the components for
the three-dimensional translation vector.
• In the rotation function, we specify the angle and the orientation for a rotation axis that
intersects the coordinate origin.
• In scaling function is used to set the three coordinate scaling factors relative to the
coordinate origin.
Basic OpenGL Geometric Transformations
• A 4× 4 translation matrix is constructed with the following routine:
glTranslate* (tx, ty, tz);
• Translation parameters tx, ty, and tz can be assigned any real-number values, and the single suffix code to be affixed to
this function is either f (float) or d (double).
• For two-dimensional applications, we set tz = 0.0; and a two-dimensional position is represented as a four-element
column matrix with the z component equal to 0.0. The translation matrix generated by this function is used to
transform positions of objects defined after this function is invoked.
• For example, we translate subsequently defined coordinate positions 25 units in the x direction and −10 units in the y
direction with the statement
glTranslatef (25.0, -10.0, 0.0);
Similarly, a 4 × 4 rotation matrix is generated with
glRotate* (theta, vx, vy, vz);
where the vector v = (vx, vy, vz) can have any floating-point values for its components.
• This vector defines the orientation for a rotation axis that passes through the coordinate origin. If v is not specified as a
unit vector, then it is normalized automatically before the elements of the rotation matrix are computed.
• The suffix code can be either f or d, and parameter theta is to be assigned a rotation angle in degrees, which the
routine converts to radians for the trigonometric calculations.
• The rotation specified here will be applied to positions defined after this function call.
• Rotation in two-dimensional systems is rotation about the z axis, specified as a unit
vector with x and y components of zero, and a z component of 1.0.
• For example, the statement
glRotatef (90.0, 0.0, 0.0, 1.0);
sets up the matrix for a 90◦ rotation about the z axis.
• We obtain a 4 × 4 scaling matrix with respect to the coordinate origin with the following
routine:
glScale* (sx, sy, sz);
• The suffix code is again either f or d, and the scaling parameters can be assigned any real-
number values.
• Scaling in a two-dimensional system involves changes in the x and y dimensions, so a
typical two-dimensional scaling operation has a z scaling factor of 1.0 (which causes no
change in the z coordinate of positions). Because the scaling parameters can be any real-
number value, this function will also generate reflections when negative values are
assigned to the scaling parameters.
• For example, the following statement produces a matrix that scales by a factor of 2 in the
x direction, scales by a factor of 3 in the y direction, and reflects with respect to the x axis:
glScalef (2.0, -3.0, 1.0);
• A zero value for any scaling parameter can cause a processing error because an inverse
matrix cannot be calculated.
OpenGL Matrix Operations:
• The glMatrixMode routine is used to set the projection mode, which designates the
matrix that is to be used for the projection transformation. This transformation
determines how a scene is to be projected onto the screen.
• Similarly, the matrix is referred to as the modelview matrix, and it is used to store and
combine the geometric transformations.
• It is also used to combine the geometric transformations with the transformation to a
viewing-coordinate system.
• We specify the modelview mode with the statement
glMatrixMode (GL_MODELVIEW);
which designates the 4×4 modelview matrix as the current matrix.
• glMatrix-Mode to change to the modelview matrix before applying geometric
transformations.
• Two other modes that we can set with the glMatrixMode function are the texture mode
and the color mode.
• The texture matrix is used for mapping texture patterns to surfaces, and the color matrix
is used to convert from one color model to another.
• The default argument for the glMatrixMode function is GL MODELVIEW.
• Once we are in the modelview mode (or any other mode), a call to a transformation
routine generates a matrix that is multiplied by the current matrix for that mode.
• In addition, we can assign values to the elements of the current matrix, and there are two
functions in the OpenGL library for this purpose.
• With the following function, we assign the identity matrix to the current matrix:
glLoadIdentity ( );
• Alternatively, we can assign other values to the elements of the current matrix using
glLoadMatrix* (elements16);
• A single-subscripted, 16-element array of floating-point values is specified with parameter
elements16, and a suffix code of either f or d is used to designate the data type.
• The elements in this array must be specified in column-major order. That is, we first list
the four elements in the first column, and then we list the four elements in the second
column, the third column, and finally the fourth column.
• To illustrate this ordering, we initialize the modelview matrix with the following code:

glMatrixMode (GL_MODELVIEW);
GLfloat elems [16];
GLint k;
for (k = 0; k < 16; k++)
elems [k] = float (k);
glLoadMatrixf (elems);
which produces the matrix

We can also concatenate a specified matrix with the current matrix as follows:
glMultMatrix* (otherElements16);
• Again, the suffix code is either f or d, and parameter otherElements16 is a 16-element,
single-subscripted array that lists the elements of some other matrix in column-major
order.
• The current matrix is postmultiplied by the matrix specified in glMultMatrix, and this
product replaces the current matrix.
• Thus, assuming that the current matrix is the modelview matrix, which we designate as
M, then the updated modelview matrix is computed as
M = M·M’
where M represents the matrix whose elements are specified by parameter other
Elements16 in the preceding glMultMatrix statement.
The glMultMatrix function can also be used to set up any transformation sequence with
individually defined matrices.
For example,
glMatrixMode (GL_MODELVIEW);
glLoadIdentity ( ); // Set current matrix to the identity.
glMultMatrixf (elemsM2); // Postmultiply identity with matrix M2.
glMultMatrixf (elemsM1); // Postmultiply M2 with matrix M1.
produces the following current modelview matrix:
M = M2 ·M1
It is also important to keep in mind that OpenGL stores matrices in column major order.
Suppose if we consider row matrix mode , the error may occur.
 3-D Geometric Transformations
• 3-D Geometric Transformations
• 3-D Translation
• Rotation
• Scaling
• OpenGL Geometric Transformations
Three-Dimensional Geometric Transformations

• Methods for geometric transformations in three dimensions are extended

from two dimensional methods by including considerations for the z
coordinate.
• A three-dimensional position, expressed in homogeneous coordinates, is
represented as a four-element column vector
Three-Dimensional Translation
• A position P = (x, y, z) in three-dimensional space is translated to a location P’= (x’,
y’, z’) by adding translation distances tx, ty, and tz to the Cartesian coordinates of P:

• We can express these three-dimensional translation operations in matrix form

or

• Moving a coordinate position with translation vector T = (tx , ty , tz ) .

Shifting the position of a three-dimensional object using translation vector T.

An inverse of a three-dimensional translation matrix is obtained by negating

the translation distances tx, ty, and tz
Three-Dimensional Rotation
• By convention, positive rotation angles produce counterclockwise rotations
about a coordinate axis.
• Positive rotations about a coordinate axis are counterclockwise, when
looking along the positive half of the axis toward the origin.
Three-Dimensional Coordinate-Axis Rotations Along z axis:

In homogeneous-coordinate form, the three-dimensional z-axis rotation

equations are
Transformation equations for rotations about the other two coordinate axes
can be obtained with a cyclic permutation of the coordinate parameters x, y,
and z:
x → y→ z→ x
Along x axis

Along y axis

An inverse three-dimensional rotation matrix is obtained in the same by

replacing θ with −θ.
General Three-Dimensional Rotations
A rotation matrix for any axis that does not coincide with a coordinate axis can
be set up as a composite transformation involving combinations of
translations and the coordinate axis rotations the following transformation
sequence is used:
1. Translate the object so that the rotation axis coincides with the parallel
coordinate axis.
2. Perform the specified rotation about that axis.
3. Translate the object so that the rotation axis is moved back to its original
position.

• A coordinate position P is transformed with the sequence shown in this

figure as

Where the composite rotation matrix for the transformation is

When an object is to be rotated about an axis that is not parallel to one of the
coordinate axes, we must perform some additional transformations we can
accomplish the required rotation in five steps:

1. Translate the object so that the rotation axis passes through the
coordinate origin.
2. Rotate the object so that the axis of rotation coincides with one of the
coordinate axes.
3. Perform the specified rotation about the selected coordinate axis.
4. Apply inverse rotations to bring the rotation axis back to its original
orientation.
5. Apply the inverse translation to bring the rotation axis back to its original
spatial position.
Components of the rotation-axis vector are then computed as
V=P2−P1
= (x2 − x1, y2 − y1, z2 − z1)
The unit rotation-axis vector u is

Where the components a, b, and c are the direction cosines for the rotation
axis
The first step in the rotation sequence vector cross product can be used to
is to set up the translation matrix that calculate the sine term.
repositions the rotation axis so that it• Rotation of u around the x axis into
passes through the coordinate origin. the x z plane is accomplished by
Translation matrix is given by rotating u’ (the projection of u in the
y z plane) through angle α onto the z
axis.

• Because rotation calculations involve

sine and cosine functions, we can use
standard vector operations to obtain
elements of the two rotation
matrices.
• A vector dot product can be used to
determine the cosine term, and a
If we represent the projection of u in the yz plane as the vector u’= (0, b, c),
then the cosine of the rotation angle α can be determined from the dot
product of u’ and the unit
vector uz along the z axis:

where d is the magnitude of u’

The coordinate-independent form of this cross-product is

and the Cartesian form for the cross-product gives us

Equating the above two equations

Or

We have determined the values for cos α and sin α in terms of the components of
vector u, the matrix elements for rotation of this vector about the x axis and into the
xz plane

Rotation of unit vector u” (vector u after rotation into the x z plane) about the y axis.
Positive rotation angle β aligns u” with vector uz .
We can determine the cosine of rotation angle β from the dot product of unit
vectors u’’ and uz. Thus,

Comparing the coordinate-independent form of the cross-product

with the Cartesian form

we find that

The transformation matrix for rotation of u” about the y axis is

The specified rotation angle θ can now be applied as a rotation about the z
axis as follows:

The transformation matrix for rotation about an arbitrary axis can then be
expressed as the composition of these seven individual transformations:
The composite matrix for any sequence of three-dimensional rotations is of
the form

The upper-left 3 × 3 submatrix of this matrix is orthogonal

Assuming that the rotation axis is not parallel to any coordinate axis, we could
form the following set of local unit vectors
If we express the elements of the unit local vectors for the rotation axis as

Then the required composite matrix, which is equal to the product

Ry(β) · Rx(α), is
Quaternion Methods for Three-Dimensional Rotations
One way to characterize a quaternion is as an ordered pair, consisting of a scalar part and a
vector part:
q = (s, v)
A rotation about any axis passing through the coordinate origin is accomplished by first
setting up a unit quaternion with the scalar and vector parts as follows:

where u is a unit vector along the selected rotation axis and θ is the specified rotation angle
about this axis (Figure 16). Any point position P that is to be rotated by this quaternion can
be represented in quaternion notation as:
Contd.,
with the coordinates of the point as the vector part p = (x, y, z). The rotation of the point is
then carried out with the quaternion operation

where q−1 = (s, −v) is the inverse of the unit quaternion q with the scalar and vector parts
given in Equations 34. This transformation produces the following new quaternion:

The second term in this ordered pair is the rotated point position p, which is evaluated
with vector dot and cross-products as:

Values for parameters s and v are obtained from the expressions in 34.
Three-Dimensional Scaling
The matrix expression for the three-dimensional scaling transformation of a
position P = (x, y, z) is given by

The three-dimensional scaling transformation for a point position can be

represented as

where scaling parameters sx, sy, and sz are assigned any positive values.
Explicit expressions for the scaling transformation relative to the origin are
Because some graphics packages demonstrated
provide only a routine that scales
relative to the coordinate origin, we
can always construct a scaling
transformation with respect to any
selected fixed position (xf , yf , zf )
using the following transformation
sequence:
1. Translate the fixed point to the
origin.
2. Apply the scaling transformation
relative to the coordinate origin
3. Translate the fixed point back to its
original position.
• This sequence of transformations is
OPENGL FOR THREE-DIMENSIONAL GEOMETRIC TRANSFORMATIONS
OpenGL Matrix Stacks
glMatrixMode:
• used to select the modelview composite transformation matrix as the target
of subsequent OpenGL transformation calls
• four modes: modelview, projection, texture, and color
• the top matrix on each stack is called the “current matrix”.
• for that mode. the modelview matrix stack is the 4 × 4 composite matrix that
combines the viewing transformations and the various geometric
transformations that we want to apply to a scene.
• OpenGL supports a modelview stack depth of at least 32,
• We can determine the number of positions available in the modelview stack for a
particular implementation of OpenGL with
glGetIntegerv (GL_MAX_MODELVIEW_STACK_DEPTH, stackSize);
which returns a single integer value to array stackSize. The other three matrix modes have a
minimum stack depth of 2, and we can determine the maximum available depth of each for
a particular implementation using one of the following OpenGL symbolic constants:
GL MAX PROJECTION STACK DEPTH, GL MAX TEXTURE STACK DEPTH, or GL MAX COLOR
STACK DEPTH.
• We can also find out how many matrices are currently in the stack with
glGetIntegerv (GL_MODELVIEW_STACK_DEPTH, numMats);
For example, a hardware implementation can copy multiple matrix elements
simultaneously. And we can maintain an identity matrix on the stack, so that initializations of
the current matrix can be performed faster than by using repeated calls to glLoadIdentity.
We have two functions available in OpenGL for processing the matrices in a
stack :

glPushMatrix( ); Copy the current matrix at the top of the active stack and
store that copy in the second stack position

glPopMatrix( ); which destroys the matrix at the top of the stack, and the
second matrix in the stack becomes the current matrix