CSPE51 –

Augmented and
Virtual Reality

UNIT - II
 UNIT II :
Visual Computation in Virtual Reality: Fundamentals of Computer
Graphics - Software and Hardware Technology on Stereoscopic Display
- Advanced Techniques in CG: Management of Large Scale
Environments & Real Time Rendering.
Visual Computation in Virtual Reality
 • Components of CG
Fundamentals of • Modeling, Storing, Manipulation, Viewing and Rendering
• Graphic system
Computer Graphics
Raster and Random display
Based on television technology.
• The electron beam is swept across the screen,
one row at a time, from top to bottom.
• Each row is called a scan line.
• Picture definition is stored in a memory called
refresh buffer or frame buffer.
• Each screen spot is referred as a pixel or pel.
• Refreshed at 24 frames per second (fps) or
higher to remove flickering
Modeling – Output primitives
• The basic objects out of which a graphics
display is created
• Describes the geometry of objects and –
typically referred to as geometric
primitives.
• Examples: point, line, text, filled region,
images, quadric surfaces, spline curves
• Each of the output primitives has its own
set of attributes.
Two Dimensional Images
• Use Cartesian coordinates +Y
• X (horizontal)
• Y (vertical)
• The image seen on a screen Y
space is called the world
coordinate system Axis

(0,0) X Axis +X
Partition the space into pixels
Screen Coordinates – references to frame buffer locations
1. Define a set of points +Y
(vertices) in 2D space.
2. Given a set of vertices, (2,7) (9,7)
draw lines between
consecutive vertices.

(2,1) (9,1)

+X
Absolute and Relative Coordinate Specifications
+Y
• Absolute coordinates –
location specified as a
(0,6) (7,0)
relationship to the origin
• Relative coordinates –
location specified as a
relationship to other points
(2,1) (0,-6)
4, 8 – Connectors - Filling
 Manipulation
• Translation
• Rotation
• Scaling
• Reflection
• Shearing
2D Transformations
 Basic 2D Transformations (rigid-body
transformations):
 Translation
 Rotation
 Scaling
 Homogenenous Representations and
Coordinates
 2D Composite Transformations
 Other Transformations:
 Reflection
 Shearing
Geometric Transformations 15

 Sometimes also called modeling transformations

 Geometric transformations: Changing an object’s position (translation),
orientation (rotation) or size (scaling)
 Modeling transformations: Constructing a scene or hierarchical
description of a complex object
 Others transformations: reflection and shearing operations
 1. Translation

 2D Translation
P’
T

 x’ = x + tx , y’ = y + ty P

 x  x' t x 
P =  , P ' =  , T =  
 y  y ' t y 
 P’=P+T
 Translation moves the object without deformation (rigid-body
transformation)

16
 2. Rotation
 2D Rotation
 Rotation axis
 Rotation angle
 rotation point or pivot point (xr,yr)

Note:
If θ is positive → counterclockwise
If θ is negative → clockwise
rotation
yr θ Remember:
cos(a + b) = cos a cos b - sin a sin b
cos(a - b) = cos a sin b + sin a cos b
xr

17
 Rotation

 At first, suppose the pivot point is at the origin

 x’=r cos(θ+Φ) = r cos θ cos Φ - r sin θ sin Φ
y’=r sin(θ+Φ) = r cos θ sin Φ + r sin θ cos Φ
 x = r cos Φ, y = r sin Φ
 x’=x cos θ - y sin θ
y’=x sin θ + y cos θ

(x’,y’)

r θ
r (x,y)
Φ
18
 2D Rotation
 P’=R·P

cos  − sin 
R= 
 sin  cos  

(x’,y’)

r θ
r (x,y)
Φ
19
 2D Rotation
 Rotation of a point about any specified position (xr,yr)
x’=xr+(x - xr) cos θ – (y - yr) sin θ
y’=yr+(x - xr) sin θ + (y - yr) cos θ
 Rotations also move objects without deformation
 A line is rotated by applying the rotation formula to each of
the endpoints and redrawing the line between the new end
points
 A polygon is rotated by applying the rotation formula to each
of the vertices and redrawing the polygon using new vertex
coordinates

20
 3. Scaling

 Scaling is used to alter the size of an object

 Simple 2D scaling is performed by multiplying object positions
(x, y) by scaling factors sx and sy
x’ = x · sx
y’ = y · sx

or P’ = S·P
 x'  s x 0   x
 y ' =  0   
   sy   y

21
  Any positive value can be used as scaling factor
 Values less than 1 reduce the size of the object
 Values greater than 1 enlarge the object
 If scaling factor is 1 then the object stays unchanged
 If sx = sy , we call it uniform scaling
 If scaling factor <1, then the object moves closer to the origin and
If scaling factor >1, then the object moves farther from the origin

x’ x 22
 We can control the location of the scaled object by choosing
a position called the fixed point (xf,yf)
x’ – xf = (x – xf) sx y’ – yf = (y – yf) sy

x’=x · sx + xf (1 – sx)
y’=y · sy + yf (1 – sy)
 Polygons are scaled by applying the above formula to each
vertex, then regenerating the polygon using the transformed
vertices

23
Matrix Representations and 24
Homogeneous Coordinates
 Many graphics applications involve sequences of geometric
transformations
 Animations
 Design and picture construction applications
 We will now consider matrix representations of these operations
 Sequences of transformations can be efficiently processed using
matrices
 25

 P’ = M1 · P + M2
 P and P’ are column vectors
 M1 is a 2 by 2 array containing multiplicative factors
 M2 is a 2 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
 26

 To produce a sequence of operations, such as scaling followed by

rotation then translation, we could calculate the transformed
coordinates one step at a time

 A more efficient approach is to combine transformations, without

calculating intermediate coordinate values
 27

 Multiplicative and translational terms for a 2D geometric

transformation can be combined into a single matrix if we expand
the representations to 3 by 3 matrices
 We can use the third column for translation terms, and all transformation
equations can be expressed as matrix multiplications
 28

 Expand each 2D coordinate (x,y) to three element representation

(xh,yh,h) called homogeneous coordinates
 h is the homogeneous parameter such that x = xh/h, y = yh/h,
 → infinite homogeneous representations for a point
 A convenient choice is to choose h = 1
 2D Translation Matrix

 x' 1 0 t x   x 
 y ' = 0 1 t    y 
   y  

 1  0 0 1   1 
or, P’ = T(tx,ty)·P

29
 2D Rotation Matrix

 x' cos  − sin  0  x 

 y ' =  sin  cos  0   y 
     
 1   0 0 1  1 

or, P’ = R(θ)·P

30
 2D Scaling Matrix

 x'  s x 0 0  x 
 y ' =  0 sy 0   y 
  
 1   0 0 1  1 
or, P’ = S(sx,sy)·P

31
Inverse Transformations

 2D Inverse Translation Matrix

1 0 − t x 
T −1 = 0 1 − t y 
0 0 1 
 By the way:

−1
T *T = I

32
 2D Inverse Rotation Matrix

 cos  sin  0
−1 
R = − sin  cos  0
 0 0 1
 And also:

−1
R *R = I

33
 2D Inverse Rotation Matrix:
 If θ is negative → clockwise
 In
−1

R * R = I
Only sine function is affected
 Therefore we can say

−1
R =R T

34
 2D Inverse Scaling Matrix

1 
s 0 0
 x 
1
S −1 =  0 0
 sy 
0 0 1
 Of course:  
 

−1
S *S = I
35
 We can setup a sequence of transformations as a
composite transformation matrix by calculating the product
of the individual transformations
 P’=M2·M1·P
=M·P

36
 Composite 2D Translations
 If two successive translation are applied to a point P, then the final
transformed location P' is calculated as

P ' = T(t x2 , t y2 )  T(t x1 , t y1 )  P = T(t x1 + t x2 , t y1 + t y2 )  P

1 0 t 2 x  1 0 t1x  1 0 t1x + t 2 x 
0 1 t   0 1 t  = 0 1 t + t 
 2y   1y   1y 2y 

0 0 1  0 0 1  0 0 1 

37
  Composite 2D Rotations

P ' = R (1 +  2 )  P

cos  2 − sin  2 0 cos 1 − sin 1 0 cos( 1 +  2 ) − sin( 1 +  2 ) 0

 sin  cos  2 0   sin 1 cos 1 0 =  sin( 1 +  2 ) cos( 1 +  2 ) 0
 2

 0 0 1  0 0 1  0 0 1

38
  Composite 2D Scaling

S (sx2 , s y2 )  S (sx1 , s y1 ) = S (sx1  sx2 , s y1  s y2 )

 s2 x 0 0  s1x 0 0  s1x  s2 x 0 0
0 s2 y 0   0 s1 y 0 =  0 s1 y  s2 y 0

 0 0 1  0 0 1  0 0 1

39
 40

Note:
 Successive translations are additive
 Successive scalings are multiplicative
 For example: If we triple the size of an object twice, the final size
is nine (9) times the original
 Rotation w.r.t to pivot point
41
 Steps:
1. Translate the object so that the pivot point is moved to the
coordinate origin.
2. Rotate the object about the origin.
3. Translate the object so that the pivot point is returned to its
original position.
 General 2D Pivot-Point Rotation

1 0 xr  cos  − sin  0 1 0 − xr 
0 1 yr    sin  cos  0  0 1 − yr 

0 0 1   0 0 1 0 0 1 

cos  − sin  xr (1 − cos ) + yr sin 

=  sin  cos  yr (1 − cos ) − xr sin  
 0 0 1 

42
General Fixed Point Scaling 43
 Steps:
1. Translate the object so that the fixed point coincides with
the coordinate origin.
2. Scale the object about the origin.
3. Translate the object so that the pivot point is returned to its
original position.

(xr, yr) (xr, yr)

General Fixed Point Scaling 44
(cont.)
• General 2D Fixed-Point Scaling:

1 0 𝑥𝑓 𝑠𝑥 0 0 1 0 − 𝑥𝑓 𝑠𝑥 0 𝑥𝑓 (1 − 𝑠𝑥 )
0 1 𝑦𝑓 . 0 𝑠𝑦 0 . 0 1 − 𝑦𝑓 = 0 𝑠𝑦 𝑦𝑓 (1 − 𝑠𝑦 )
001 0 0 1 00 1 0 0 1

𝐓(𝑥𝑓 , 𝑦𝑓 ) ⋅ 𝐒(𝑠𝑥 , 𝑠𝑦 ) ⋅ 𝐓(−𝑥𝑓 , −𝑦𝑓 ) = 𝐒(𝑥𝑓 , 𝑦𝑓 , 𝑠𝑥 , 𝑠𝑦 )

2D Composite Transformations 45

 General 2D scaling directions:

 Above: scaling parameters were along x and y directions
 What about arbitrary directions?
General 2D Scaling Directions 46

Scaling parameters s1 and s2 along orthogonal directions defined by the

angular displacement θ.
General 2D Scaling Directions 47

(cont.)
◼ General procedure:
1. Rotate so that directions coincides with x and y
axes
2. Apply scaling transformation 𝑆 𝑠1 , 𝑠2
3. Rotate back
◼ The composite matrix:
𝑠1 cos 2 Θ + 𝑠2 sin2 Θ 𝑠2 − 𝑠1 cos Θ sin Θ 0
𝑅−1 Θ ∗ 𝑆 𝑠1 , 𝑠2 ∗ 𝑅 Θ = 𝑠2 − 𝑠1 cos Θ sin Θ 𝑠1 sin2 Θ + 𝑠2 cos 2 Θ 0
0 0 1
2D Composite Transformations 48

(cont.)
 Matrix Concatenation Properties:
 Matrix multiplication is associative !
 M3· M2· M1= (M3· M2 ) · M1 = M3· ( M2 · M1 )
 A composite matrix can be created by multiplicating left-to-right
(premultiplication) or right-to-left (postmultiplication)
 Matrix multiplication is not commutative !
 M2 · M1 ≠ M1 · M2
2D Composite Transformations 49

(cont.)
 Matrix Concatenation Properties:
 But:
 Two successive rotations
 Two successive translations
 Two successive scalings

 are commutative
Reversing the order 50

in which a sequence of transformations is performed may affect the transformed

position of an object.
In (a), an object is first translated in the x direction, then rotated counterclockwise
through an angle of 45°.
In (b), the object is first rotated 45° counterclockwise, then translated in the x
direction
 4. Reflection 51
 Transformation that produces a mirror image of an object
 Reflection about
1. x axis (y=0)
2. y axis (x=0)
3. Perpendicular to xy plane
4. y=x
5. y = -x
6. Any line y = mx+c
 52
i. Reflection about x- axis

 Image is generated relative to an axis of reflection by rotating the

object 180° about the reflection axis
 Reflection about the line y=0 (the x axis)

1 0 0
0 − 1 0 
 
0 0 1
ii. Reflection about y- axis 53

 Reflection about the line x=0 (the y axis)

 − 1 0 0
 0 1 0
 
 0 0 1
 iii. Reflection about origin 54

 Reflection about the origin

−1 0 0
0 −1 0
0 0 1
 iv. Reflection about y = x 55

 Reflection about the line y=x

0 1 0
1 0 0
0 0 1
 v. Reflection about y = x 56

 Reflection about the line y=-x

0 −1 0
−1 0 0
0 0 1
 57
vi. Reflection about line y =mx + c

Steps
1. Translate the line so that it passes
through the origin.
2. Rotate the line onto one of the
coordinate axes and reflect about that
axis
3. Restore the line to its original position
with the inverse rotation and translation
transformation
 5. Shear 58

 Transformation that distorts the shape of an

object such that the transformed shape
appears as the object was composed of
internal layers that had been caused to slide
over each other

y y

(2,1) (3,1)
(0,1) (1,1)

(0,0) (1,0) (1,0)

x (0,0) x
shx=2
 X and y direction - Shear 59

 An x-direction shear relative to the x axis

1 shx 0
0 1 
0 x' = x + shx  y

0 0 1 y' = y
 An y-direction shear relative to the y axis

 1 0 0
 sh 
1 0
 y
 0 0 1
 X axis - Shear 60

 x-direction shear relative to other reference lines

1 shx − shx * yref 

0 1 0 
 
0 0 1 

x' = x + shx * ( y − yref )

y' = y
Example 61

A unit square (a) is transformed to a shifted parallelogram

(b) with shx = 0.5 and yref = −1 in the shear matrix from Slide 56
 Y axis - Shear 62

 y-direction shear relative to the line x = xref

 1 0 0 
 sh 
1 − shy * xref 
 y
 0 0 1 

x' = x
y ' = x + shy * (x − xref )
Example 63

A unit square (a) is turned into a shifted parallelogram

(b) with parameter values shy = 0.5 and xref = −1 in the y -direction shearing
transformation from Slide 58
 Transformation Between Coordinate 64
Systems

 Individual objects may be defined in their local cartesian

reference system.
 The local coordinates must be transformed to position
the objects within the scene coordinate system.
 Transformation Between Coordinate 65
Systems

Steps for coordinate transformation

1. Translate so that the origin (x0, y0 ) of the
x′-y′ system is moved to the origin of the
x-y system.
2.Rotate the x′ axis on to the axis x.
Transformation Between 66
Coordinate Systems (cont.)

y0 θ

0 x0 x
Transformation Between 67
Coordinate Systems (cont.)

y0

θ
0 x0 x
Transformation Between 68
Coordinate Systems (cont.)

y0

y′

0 x′ x0 x
Transformation Between 69
Coordinate Systems (cont.)
1 0 − 𝑥0
𝐓(−𝑥0 , −𝑦0 ) = 0 1 − 𝑦0
0 0 1
𝐶𝑜𝑠𝜃 𝑆𝑖𝑛𝜃 0
𝐑(−𝜃) = −𝑆𝑖𝑛𝜃 𝐶𝑜𝑠𝜃 0
0 0 1
𝐌𝑥𝑦,𝑥′𝑦′ = 𝐑(−𝜃) ⋅ 𝐓(−𝑥0 , −𝑦0 )
Transformation Between 70
Coordinate Systems (cont.)

An alternative method:
-Specify a vector V that indicates the direction
for the positive y′ axis. Let

𝐕
𝐯= = (𝑣𝑥 , 𝑣𝑦 )
𝐕 -Obtain the unit vector u=(ux ,u y) along the x′ axis by rotating v 900
clockwise.
Transformation Between 71
Coordinate Systems (cont.)
 Elements of any rotation matrix can be expressed as elements of
orthogonal unit vectors. That is, the rotation matrix can be
written as

𝑢𝑥 𝑢𝑦 0
𝐑 = 𝑣𝑥 𝑣𝑦 0
0 0 1
Transformation Between 72
Coordinate Systems (cont.)

y0

0 x0 x
2D viewing pipeline
References
• Images and videos used in this presentation are referred from the
Internet source
• D. Hearn and M. P. Baker, “Computer Graphics - C version”, Pearson
Education, 2004.