GAME PROGRAMMING TYCS SEM V UNIT 1

The Cartesian xy-plane

The Cartesian xy-plane provides a mechanism for translating pairs of related variables into a graphical
format. The variables are normally x and y. Every value of x has a corresponding value of y, which can be
located on intersecting axes. By convention, the axis for the independent variable x is horizontal, and
the dependent variable y is vertical. The axes intersect at 900 at a point called the origin. Any point P on
the Cartesian plane is identified by an ordered pair of numbers (x, y) where x and y are called the
Cartesian coordinates of P.

Function Graphs

Function graphs are graphs created by functions. such as y = mx + c (linear), y = ax2 + bx + c (quadratic), y
= ax3 + bx2 + cx + d (cubic), y = a sin(x) (trigonometric), etc. Linear
functions are straight lines, quadratics are parabolas, cubics have an ‘s’ shape,
and trigonometric functions often have a wave-like trace. Such graphs are used in computer animation
to control the movement of objects, lights and the virtual camera.
Geometric Shapes
Shapes can include polygons, circles, arbitrary curves, mathematical functions, fractals, etc.
Polygonal Shapes
A polygon is constructed from a sequence of vertices (points)

For example, if we double the values of x and y and redraw the vertices, we discover that the form of
the shape is preserved, but its size is doubled with respect to the origin. Similarly, if we divide the
values of x and y by 2, the shape is still preserved, but its size is halved with respect to the origin. On the
other hand, if we add 1 to every x -coordinate and 2 to every y-coordinate and redraw the vertices, the
shape’s size remains the same but it is displaced 1 unit horizontally and 2 units vertically. This
arithmetic manipulation of vertices is the basis of shape and object transformations.

1 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

Areas of Shapes
The area of a polygonal shape is readily calculated from its chain of coordinates.
For example, given the following list of coordinates:

the area is computed by

Another feature of the technique is that if the original set of coordinates is clockwise, the area is
negative.

Theorem of Pythagoras in 2D
We can calculate the distance between two points by applying the theorem of Pythagoras. For two
arbitrary points P1(x1, y1) and P2(x2, y2) the distance Δx = x2−x1 and Δy = y2−y1 Therefore, the distance
d between P1 and P2 is given by

3D Coordinates
In the 2D Cartesian plane a point is located by its x- and y-coordinates. But when we move to 3D there is
a third z –axis.
Theorem of Pythagoras in 3D
The theorem of Pythagoras in 3D is a natural extension of the 2D rule. In fact, it even works in higher
dimensions. Given two arbitrary points P1(x1, y1, z1) and P2(x2, y2, z2), the distance Δx = x2 − x1,Δy = y2
− y1 and Δz = z2 − z1.
Therefore, the distance d between P1 and P2 is given by

3D Polygons
The simplest 3D polygon is a triangle, which is always planar, i.e. the three vertices lie on a unique plane.
Planarity is very important in computer graphics because rendering algorithms assume that polygons are
planar.
Euler’s Rule
In 1619, Descartes discovered quite a nice relationship between vertices, edges and the faces of a 3D
polygonal object:
faces + vertices = edges + 2
consider a cube; it has 12 edges, 6 faces and 8 vertices, which satisfies this equation. This rule can be
applied to a geometric database to discover whether it contains any spurious features.

2 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

Vectors
When we employ a single number to represent quantities, such quantities are called scalars. In
computer graphics scalar quantities include colour, height, width, depth, brightness, number of frames,
etc. There are some things that require more than one number to represent them: wind, force, weight,
velocity etc. has a value and a direction. These quantities are called vectors.
2D Vectors
Vector Notation
When a scalar variable is assigned a value we employ the standard algebraic notation x = 3, when a
vector is assigned its numeric values, the following notation is used:

The numbers 3 and 4 are called the components of n, and their position within the brackets is
significant.

Graphical Representation of Vectors

An arrow is used to indicate direction and a number to specify magnitude. The length of the line
represents the vector’s magnitude, and the orientation defines its direction.

The x- and y-components

for r are computed as follows:
xr = (x2 − x1) yr = (y2 − y1)
xr = 2− 1 = 1 yr = 3− 2 = 1
whereas the components for s are computed as follows:
xs = (x4 − x3) ys = (y4 − y3)
xs = 1−2 = −1 ys = 1−2 = −1
xs = −1 ys = −1
It is the negative values of xs and ys that encode the vector’s direction. In general, given that the
coordinates of a vector’s head and tail are (xh, yh) and (xt, yt) respectively, its components Δx and Δy are
given by
Δx = (xh − xt) Δy = (yh − yt)
Magnitude of a Vector
The magnitude of a vector r is expressed by |r| and is computed by applying the theorem of Pythagoras
to its components:

3 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

3D Vectors
The components and magnitude are given by
Δx = (xh − xt)
Δy = (yh − yt)
Δz = (zh − zt)

Vector Manipulation
For instance, we need to consider vector addition, subtraction and multiplication, and how a vector can
be modified by a scalar.
Multiplying a Vector by a Scalar
Given a vector n, 2n means that the vector’s components are doubled. For example, if

Vector Addition and Subtraction

Given vectors r and s, r ± s is defined as

Vector addition is commutative:

a+b=b+a
vector subtraction is not commutative:
a−b≠b–a

Position Vectors
Given any point P(x, y, z ), a position vector p can be created by assuming that P is the vector’s head and
the origin is its tail. Because the tail coordinates are (0, 0, 0) the vector’s components are x, y, z.
Consequently, the vector’s magnitude ||p|| equals

Unit Vectors
By definition, a unit vector has a magnitude of 1. A simple example is i where

Unit vectors are extremely useful when we come to vector multiplication. Furthermore, in computer
graphics applications vectors are used to specify the orientation of surfaces, the direction of light
sources and the virtual camera. Again, if these vectors have a unit length, the computation time
associated with vector operations can be minimized.

Converting a vector into a unit form is called normalizing and is achieved by dividing a vector’s
components by its magnitude. To formalize this process, consider a vector r whose components are x, y,
z. The magnitude ||r|| =

4 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

Cartesian Vectors
The three Cartesian unit vectors i, j, k that are aligned with the x -, y- and z –axes respectively:

We can compose a vector r by adding three Cartesian vectors as follows:

r = ai + bj + ck
which means that the magnitude of r is readily computed as

Any pair of Cartesian vectors such as r and s can be combined as follows:

r = ai + bj + ck
s = di + ej + fk

For example, given

r = 2i + 3j + 4k and s = 5i + 6j + 7k then r + s = 7i + 9j + 11k

Vector Multiplication
Mathematicians have discovered that there are two ways to multiply vectors together: one gives rise to
a scalar result and the other a vector result.
Scalar Product
We could multiply two vectors r and s by using the product of their magnitudes: ||r|| · ||s||.
This scalar product is written

The dot symbol ‘·’ is used to represent scalar multiplication, to distinguish it from the vector product,
which, we will discover, employs a ‘×’ symbol. Because of this symbol, the scalar product is often
referred to as the dot product.
We define two Cartesian vectors r and s, and proceed to multiply them together using the dot product
definition:
r = ai + bj + ck
s = di + ej + fk
therefore
r · s = (ai + bj + ck) · (di + ej + fk)
= ai · (di + ej + fk) + bj·(di + ej + fk) + ck·(di + ej + fk)
r · s = ad(i · i) + ae(i · j) + af(i · k) +
bd(j · i) + be(j · j) + bf(j · k) +
cd(k · i) + ce(k · j) + cf(k · k)
Using the definition of the dot product, terms such as (i · i), (j · j) and (k · k) = 1, because the angle
between i and i, j and j, or k and k is 00 and cos(00) = 1. But because the other vector combinations are
separated by 900, and cos(900) = 0, all remaining terms collapse to zero. Bearing in mind that the
magnitude of a unit vector is 1, we can write

5 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

The Dot Product in Lighting Calculations

Lambert’s law states that the intensity of illumination on a diffuse surface is proportional to the cosine
of the angle between the surface normal vector and the light source direction. This arrangement is
shown in Figure. The light source is located at (20, 20, 40) and the illuminated point is (0, 10, 0). In this
situation we are interested in calculating cos(β), which when multiplied by the light source intensity
gives the incident light intensity on the surface. To begin with, we are given the normal vector n to the
surface. In this case n is a unit vector, and its magnitude ||n|| = 1:

The direction of the light source from the surface is defined by the vector s:

Therefore the light intensity at the point (0, 10, 0) is 0.218 of the original light intensity at (20, 20, 40).

The Dot Product in Back-Face Detection

A standard way of identifying back-facing polygons relative to the virtual camera is to compute the
angle between the polygon’s surface normal and the line of sight between the camera and the polygon.
If this angle is less than 900 the polygon is visible; if it is equal to or greater than 900 the polygon is
invisible. This geometry is shown in Figure. Although it is obvious that the right-hand polygon is invisible
to the camera, let’s prove algebraically that this is so. Let the camera be located at (0,0,0) and the
polygon’s vertex is (10, 10, 40). The normal vector is

6 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

The Vector Product

The vector product, which is also called the cross product because of the ‘×’ symbol used in its notation.
It is based on the definition that two vectors r and s can be multiplied together to produce a third vector
t: r × s = t
where ||t|| = ||r|| · ||s|| sin(β), and β is the angle between r and s. Let’s define two vectors
r = ai + bj + ck
s = di + ej + fk
r × s = (ai + bj + ck) × (di + ej + fk)
= ai × (di + ej + fk) + bj × (di + ej + fk) + ck ×(di + ej + fk)
r × s = ad(i × i) + ae(i × j) + af(i × k) + bd(j × i) + be(j × j)
+bf(j × k) + cd(k × i) + ce(k × j) + cf(k × k)
Using the definition for the cross product, operations such as (i×i), (j×j) and (k × k) result in a vector
whose magnitude is 0. This is because the angle between the vectors is 00, and sin(00) = 0. Consequently
these terms disappear
r × s = ae(i × j) + af(i × k) + bd(j × i) + bf(j × k) + cd(k × i) + ce(k × j)
We have, i × j = k, but j × i = −k, j × k = i, but k × j = −i, and k×i = j, but i×k = −j.

7 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

r × s = ae(k) + af(−j) + bd(−k) + bf(i) + cd(j) + ce(−i)

= (bf − ce)i + (cd − af)j + (ae − bd)k
We now modify the middle term to create a symmetric result:
r × s = (bf − ce)i − (af − cd)j + (ae − bd)k
If this is written in determinant form we get

Let’s now consider two vectors r and s and compute the normal vector t.
r = −i + j
s = −i + k
r × s = (1 × 1 − 0 × 0)i − (−1 × 1 − (−1) × 0)j
+(−1 × 0 − (−1) × 1)k
=i+j+k

s × r = (0 × 0 − 1 × 1)i − (−1 × 0 − (−1) × 1)j

+(−1 × 1 − (−1) × 0)k
= −i − j – k
which is in the opposite direction to r × s.

The Right-Hand Rule

The right-hand rule is for working out the orientation of the cross product vector. Given the operation r
× s, if the right-hand thumb is aligned with r, the first finger with s, and the middle finger points in the
direction of t.

Deriving a Unit Normal Vector for a Triangle

Using the following information we will compute the surface normal using the cross product and then
convert it to a unit normal vector.
Create vector r between v1 and v3, and vector s between v2 and v3:
r = −i + j
s = −i + 2k
r × s = t = (1 × 2 − 0 × 0)i − (−1 × 2 − 0×−1)j
+(−1 × 0 − 1×−1)k
t = 2i + 2j + k

8 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

Areas
Figure shows two 2D vectors, r and s. The height h = _s_ sin(β), therefore the area of the parallelogram
is ||r||h = ||r|| · ||s|| sin(β)
But this is the magnitude of the cross product vector t. Thus when we calculate r×s, the length of the
normal vector t equals the area of the parallelogram formed by r and s.

Calculating 2D Areas
Figure shows three vertices of a triangle P0(x0, y0), P1(x1, y1) and P2(x2, y2) formed in an anti-clockwise
sequence.

9 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

But the area of the triangle formed by the three vertices is Therefore

Transformation
Transformations are the changes in orientation, size and shape, that alter the co-ordinates of objects.
Transformations are used to scale, translate, rotate, reflect and shear shapes and objects. It is possible
to effect this by changing their coordinate values.

2D Transformations
Translation
Repositioning an object along a straight line path from one co-ordinate location to another. By adding a
translation distance tx & ty to the original co-ordinates (x,y) we obtain the new co-ordintaes (x’,y’)
x’=x+tx y’=y+ty

Scaling
Alters the size of an object. By multiplying each vertex with the scaling factors sx & sy to the original co-
ordinates (x,y) we obtain the new co-ordintaes (x’,y’)
x’=x.sx y’=y.sy

Reflection

10 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

Produces mirror image of an object, generated relative to an axis of reflection. To make a reflection of
a shape relative to the y-axis, we simply reverse the sign of the x -coordinate, leaving the y-coordinate
unchanged
x’ = −x y’ = y
and to reflect a shape relative to the x -axis we reverse the y-coordinates:
x‘=x y’ = −y

Homogeneous Coordinates
Basically, homogeneous coordinates define a point in a plane using three coordinates instead of two.
This states that for a point P with coordinates (x, y) there exists a homogeneous point (x, y, t) such that X
= x/t and Y = y/t. For example, the point (3, 4) has homogeneous coordinates (6, 8, 2), because 3 = 6/2
and 4 = 8/2. However, to keep things simple it seems a good idea to choose t = 1. This means that the
point (x, y) has homogeneous coordinates
(x, y, 1).

2D Translation

11 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

2D Scaling

To scale relative to another point

(px, py) we first subtract (px, py) from (x, y) respectively. This effectively translates the reference point
(px, py) back to the origin. Second, we perform the scaling operation, and third, add (px, py) back to (x,
y) respectively, to compensate for the original subtraction. Algebraically this is

2D Reflections

12 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

In general, to reflect a shape about an arbitrary y-axis, y = ax, the following transform is required:
X = −(x − ax) + ax = −x + 2ax y=y

2D Shearing
A shape is sheared by leaning it over at an angle β. Figure illustrates the geometry, and we see that the
y-coordinate remains unchanged but the x -coordinate is a function of y and tan(β).

2D Rotation

Figure shows a point P(x, y) which is to be rotated by an angle β about the origin to P(x’, y’).

13 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

To rotate a point (x, y) about an arbitrary point (px, py) we first subtract (px, py) from the coordinates (x,
y) respectively. This enables us to perform the rotation about the origin. Second, we perform the
rotation, and third, we add (px, py) to compensate for the original subtraction.

3D Transformations
3D Translation

3D Scaling

3D Rotations

14 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

In three dimensions an object is rotated about an axis, whether it be the x -, y- or z -axis, or some
arbitrary axis.

which basically rotates a point about the z -axis.

When rotating about the x -axis, the x -coordinate remains constant while the y- and z -coordinates are
changed.

When rotating about the y-axis, the y-coordinate remains constant while the x- and z -coordinates are
changed.

15 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

The above rotations are also known as yaw, pitch and roll.
The roll, pitch and yaw angles can be defined as follows:
• roll is the angle of rotation about the z -axis
• pitch is the angle of rotation about the x -axis
• yaw is the angle of rotation about the y-axis.

Gimbal Lock
Under certain conditions, rotations counter-act the effect of original rotations, and it is only possible to
rotate an object about two axes. This situation is known as Gimbal lock because one degree of rotational
freedom is lost. Gimbal lock is the loss of one degree of freedom in a three- dimensional mechanism
that occurs when two axes are driven into a parallel configuration locking the system.

Change of Axes
An object’s coordinates, which are relative to the world frame of reference, are computed
relative to the camera’s axial system, and then used to develop a perspective projection.

16 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

Direction Cosines
Direction cosines are the cosines of the angles between a vector and the axes, and for unit vectors they
are the vector’s components.

Figure shows two unit vectors X’ and Y’ , and the direction cosines for X’ ‘are

17 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

Positioning the Virtual Camera

Rotating a Point about an Arbitrary Axis

18 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

After simplification,

Quaternions
Quaternions are a way to represent complex numbers in higher dimension.

19 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

Adding and Subtracting Quaternions

they are equal if, and only if, their corresponding terms are equal. Furthermore, like vectors, they can be
added and subtracted as follows:

Transforming Vectors

Determinants

Consider the transform

The determinant of the transform is ad –cb. If we subject the vertices of a unit-square to this transform,
we create the situation shown in Figure. The vertices of the unit-square are moved as follows:

20 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

The area of the transformed unit-square A’ is given by

which is the determinant of the transform.

Perspective Projection
Perspective Projection is used to produce images which look natural. When we view scenes in everyday
life, far-away items appear small relative to nearer items. Perspective projection mimics what human
eyes see. All lines of sight start at a single point. Here, when an object is viewed from a different
direction and different distance, the appearance will be different. A side-effect of perspective projection
is that parallel lines appear to converge at a Vanishing Point. An important feature of perspective
projection is that it preserves straight lines, this allows to project only the end points of 3D lines and
then draw a 2D line between the projected end points. Vanishing Point is the point at which edges of
the object appear to be converging.

21 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

The camera is directed along the z -axis as shown in Figure. Positioned d units along the axis is a
projection screen. Any point (xc, yc, zc) becomes transformed to (xs, ys, d). It also shows that the
screen’s x -axis is pointing in the opposite direction to the camera’s x -axis, which can be compensated
for by reversing the sign of xs when it is computed.

and if we remember the idea behind homogeneous coordinates,

GPU
• A Graphics Processing Unit is a specialized electronic circuit, designed to rapidly manipulate memory
to accelerate creation of images intended for output to a display device. It is used in embedded
systems, mobile phones, personal computers, workstations & game consoles. In a PC, a GPU can be
present on a video card, or it can be embedded on the motherboard
• . It is more efficient than general purpose CPUs & processing is done in parallel.
• A CPU is designed to handle complex tasks whereas GPU handles billions of repetitive low level tasks.
• They have thousands of ALUs compared with traditional CPUs that commonly have only 4-8.
• GPU is specialized for compute-intensive, highly parallel computations – exactly what is needed for
graphics rendering.

GPU Architecture
The modern 3D graphics board has a dedicated GPU that executes instructions independently of the
CPU. CPU sends rendering commands to the GPU, which performs them while CPU continues with
other tasks.

22 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

An application communicates with GPU by sending commands to a rendering library which in

turn sends commands to a ‘driver’ that knows how to speak to GPU in its native language.
• The driver translates the function calls into code that GPU can understand.
• GPU has its own memory called VRAM (Video RAM). There are several types of data:
1) Front & back Image Buffers – Front image buffer contains exact pixel data in the
viewport(area of display).The back image buffer is the location to which GPU actually renders
a scene. Once an image is rendered completely, front & back image buffers are exchanged.
This operation is called buffer swap.
2) Next block of data is the Depth buffer/z-buffer – It stores, for every pixel, a value that
represents how far away or how deep it is in the image. It is used in hidden surface
elimination; a pixel is drawn if its depth is less than depth of the pixel already in image buffer.
3) Stencil Buffer – contains internal mask for each pixel to enable or disable drawing.
4) Texture maps – They are applied to the surface of an object to give greater visual detail.
5) Vertex Buffer – stores the vertex co-ordinates of objects.

Comparison of GPU and CPU ( How is a GPU different from a CPU)

• Video rendering is about doing simple mathematical operations over & over again, and that’s
what a GPU does.
• A GPU has thousands of processing cores running simultaneously. Each core, though slower than
a CPU core is efficient at basic mathematical operations, required for video rendering. This
massive parallelism makes it capable of rendering complex 3D graphics.

23 Bindy Wilson
GAME PROGRAMMING TYCS SEM V UNIT 1

• A CPU is designed to handle complex tasks whereas GPU handles billions of repetitive low level
tasks.
• GPU has thousands of ALUs compared with traditional CPUs that commonly have only 4-8.
• GPU can do only a fraction of operations a CPU does, but with incredible speed. A GPU with
2560 shader cores can execute 2560 instructions/clock cycle whereas a four-core Intel CPU can
execute only 4 instructions/clock cycle.
• CPU has a larger instruction set & can perform a wider range of tasks.

24 Bindy Wilson