hci 530 : seminar (hci) damian schofield. hci 530: seminar (hci) transforms –two dimensional...

68
HCI 530 : Seminar (HCI) Damian Schofield

Post on 19-Dec-2015

236 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

HCI 530 : Seminar (HCI)• Damian Schofield

Page 2: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

HCI 530: Seminar (HCI)

• Transforms– Two Dimensional – Three Dimensional

• The Graphics Pipeline

Page 3: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Types of Transformation

In computer graphics many applications need to alter or manipulate a picture, for example, by changing its size, position or orientation.

This can be done by applying a geometric transformation to the co-ordinate points defining the picture.

Page 4: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Translation

A common requirement is to move a picture to a new position.

This is achieved by means of a translation or shift transformation.

Page 5: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Translation

The new co-ordinates of the point (x’, y’) are given by

x’ = x + tx

y’ = y + ty

Page 6: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Scaling

A scaling transformation is used to change the size of an object.

x’ = x . sx

y’ = y . sy

If | sx | and | sy | are both > 1, the effect is to increase the size of an object.

In order to reduce the size of an object, | sx | and | sy | must both be < 1.

Page 7: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Scaling

The figure illustrates a symmetric or uniform scaling transformation in which the x- and y-

scale factors are the same (sx = sy) so that the object is expanded by the same amount in each axis direction.

Page 8: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Scaling

This figure illustrates two asymmetric or non-uniform scaling transformations in which the x- and y- scale factors are not equal (sx sy).

Here the object changes its size by different amounts in the x- and y- axis directions.

Page 9: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Scaling

If the scale factor in x is negative (sx < 0) then the object is reflected in the y-axis.

Similarly if the scale factor in y is negative (sy < 0) then the object is reflected in the x-axis.

Page 10: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Rotation

Another common type of transformation is rotation.

This is used to orientate objects.

The figure shows an object rotated by and angle a about the origin.

Page 11: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Rotation

A line joining the point with the origin makes an angle b with the x-axis and has a length R, hence:

x = R . Cosby = R . sinb

After rotation the point has co-ordinates x’ and y’ with values

x’ = R . cos ( + a b)y’ = R . sin ( + a b)

Page 12: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Rotation

Expanding these formulae for cos ( + a b) and sin ( + a b) and rearranging gives

x’ = R . cos a . cosb - R . sin a . sinby’ = R . sin a . cosb + R . sin b . cosa

Finally, substituting forR . cos b and R . sin b gives

x’ = x . cos a - y . sina y’ = x . sin a + y . cosa

Page 13: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Shearing

A shear transformation has the effect of distorting the shape of an object.

The new x- and y- co-ordinates of a point after shearing are given by

x’ = x + y a y’ = y + x b

If a 0 then a shear in x is obtained.

Similarly, if b 0 then a shear in y is obtained.

Page 14: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation

For each of the basic transformations we can derive an expression for the new co-ordinates of a point after transformation.

We can now write down a general formula for the transformation of points.

x’ = a x + b y + c

y’ = d x + e y + f

where a, b, c, d, e, and f are all constants.

Page 15: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation

We can now write down a general formula for the transformation of points.

x’ = a x + b y + c

y’ = d x + e y + f

where a, b, c, d, e, and f are all constants.

The expressions for x’ and y’ are linear functions of x and y.

This can be expressed using matrices as

f

c

y

x

ed

ba

y

x

'

'

Page 16: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation

Now include all of the constants in one matrix

A square matrix is much easier to deal with so the matrix is extended to a 3x3 matrix.

The column vectors representing points now have and extra entry.

If the bottom row of the matrix is [0 0 1] then w’ will be 1 and we can ignore it.

1'

'y

x

fed

cba

y

x

1'

'

'

y

x

ihg

fed

cba

w

y

x

Page 17: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation

Revision ....

Page 18: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

You probably know what a matrix is already. However, a quick example won't hurt.

A matrix is just a two-dimensional group of numbers. Instead of a list, called a vector, a matrix is a rectangle, like the following:

You can set a variable to be a matrix just as you can set a variable to be a number.

In this case, x is the matrix containing those four numbers (in that particular order).

Page 19: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Page 20: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Adding and Subtracting Matrices Matrix addition is fairly simple, and is done entry-wise. Add the following matrices:

 

 

Page 21: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Add the following matrices:

 

 I need to add the pairs of entries, and then simplify for the final answer:  

So the answer is: 

Page 22: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Add the following matrices:

 

 I need to add the pairs of entries, and then simplify for the final answer:  

So the answer is: 

Page 23: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Up until now, you've been able to add any two things you felt like: numbers, variables, equations, and so forth. But addition doesn't always work with matrices. Perform the indicated operation, or explain why it is not possible. 

 

Since matrices are added entry-wise, I have to add the 1 and the 4, the 2 and 5, the 0 and the 7, and the 3 and the 8.

But what do I add to the 6 and to the 9?

There are no corresponding entries in the first matrix that can be added to these entries in the second matrix.

Page 24: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Up until now, you've been able to add any two things you felt like: numbers, variables, equations, and so forth. But addition doesn't always work with matrices. Perform the indicated operation, or explain why it is not possible. 

 

So the answer is: I can't add these matrices, because they're not the same size. This is always the case: To add two matrices, they must be of the same size.

If they are not the same size (if they do not have the same "dimensions"), then the addition is "not defined" (doesn't make mathematical sense). 

Page 25: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Subtraction works entry-wise, too.    Given the following matrices, find A – B.  

A and B are the same size, each being 2 × 3 matrices, so I can subtract,

Page 26: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Page 27: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Matrix Multiplication

Here is a key point:

You cannot just multiply each number by the corresponding number in the other matrix.

Matrix multiplication is not like addition or subtraction.

It is more complicated, but the overall process is not hard to learn.

Page 28: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Matrix Multiplication

You cannot just multiply each number by the corresponding number in the other matrix.

Example:  

Solution: 

Page 29: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Matrix Multiplication

Matrix multiplication is not an easy task to learn, and you do need to pay attention to avoid a careless error or two.

Here's the process: Step 1: Move across the top row of the first matrix, and down the first column of the second matrix:

 

Page 30: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Matrix Multiplication

Matrix multiplication is not an easy task to learn, and you do need to pay attention to avoid a careless error or two.

Step 2: Multiply each number from the top row of the first matrix by the number in the first column on the second matrix.

In this case, that means multiplying 1*2 and 6*9. Then, take the sum of those values (2+54):

 

Page 31: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Matrix Multiplication

Matrix multiplication is not an easy task to learn, and you do need to pay attention to avoid a careless error or two.

Step 3: Insert the value you just got into the answer matrix.

Since we are multiplying the 1st row and the 1st column, our answer goes into that slot in the answer matrix:

 

Page 32: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Matrix Multiplication

Matrix multiplication is not an easy task to learn, and you do need to pay attention to avoid a careless error or two.

Step 4: Repeat for the other rows and columns. That means you walk down the first row of the first matrix and this time the second column of the second matrix.

Then the second row of the first matrix and the first column of the second, and finally the bottom of the first matrix and the right column of the second matrix:

 

Page 33: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Matrix Multiplication

Matrix multiplication is not an easy task to learn, and you do need to pay attention to avoid a careless error or two.

Step 5: Insert all of those valuesinto the answer matrix.

If you work the other two numbers, you will get 1*2+6*7=44 and 3*2+8*9=78.

Insert them into the answer matrix in the corresponding positions and you get:

 

Page 34: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Matrix Multiplication

What if the matrices aren't squares?

Then you have to add another step.

In order to multiply two matrices, the matrix on the left must have as many columns as the matrix on the right has rows.

That way you can match up each pair while you're multiplying.

The size of the final matrix is determined by the rows in the left matrix and the columns in the right.

 

Page 35: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Matrix Multiplication

In order to multiply two matrices, the matrix on the left must have as many columns as the matrix on the right has rows.

That way you can match up each pair while you're multiplying.

The size of the final matrix is determined by the rows in the left matrix and the columns in the right.

 

Page 36: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

30

20

10

987

654

321

'

'

'

z

y

x

500

320

140

27016070

18010040

904010

'

'

'

z

y

x

Page 37: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Revision

Page 38: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation (2)

For each of the basic transformations we can derive an expression for the new co-ordinates of a point after transformation.

We can now write down a general formula for the transformation of points.

x’ = a x + b y + c

y’ = d x + e y + f

where a, b, c, d, e, and f are all constants.

Page 39: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation (2)

We can now write down a general formula for the transformation of points.

x’ = a x + b y + c

y’ = d x + e y + f

where a, b, c, d, e, and f are all constants.

The expressions for x’ and y’ are linear functions of x and y.

This can be expressed using matrices as

f

c

y

x

ed

ba

y

x

'

'

Page 40: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation (2)

Now include all of the constants in one matrix

A square matrix is much easier to deal with so the matrix is extended to a 3x3 matrix.

The column vectors representing points now have and extra entry.

If the bottom row of the matrix is [0 0 1] then w’ will be 1 and we can ignore it.

1'

'y

x

fed

cba

y

x

1'

'

'

y

x

ihg

fed

cba

w

y

x

Page 41: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation

The formulae for each of the different types of transformation can now be written using this matrix notation.

Translate Scale

Rotate Shear

100

10

01

y

x

t

t

100

00

00

y

x

S

S

100

0cossin

0sincos

100

01

01

b

a

Page 42: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation

z

y

x

ihg

fed

cba

z

y

x

'

'

'

izhygx

fzeydx

czbyax

z

y

x

'

'

'

Page 43: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Matrix Representation

There is a special matrix which leave the co-ordinates x’ and y’ equal to x and y.

This is known as the unit or identity matrix.

x’ = x

y’ = y

w’ = 1

1100

010

001

'

'

'

y

x

w

y

x

Page 44: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Concatenation of Transforms

We have examined the basic types of transformation and derived the corresponding matrices.

In this section we will see how these transformations can be combined to perform more complex operations such as rotation or scaling about an arbitrary point.

Page 45: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Concatenation of Transforms

Consider the transformation to rotate an object about its centre point (xc, yc).

This can be broken down into a series of basic transformations as follows:

• Translate the object by (-xc, -yc) so that the centre is at the origin.

• Perform a rotation about the origin.

• Translate the object by (xc, yc) to return it to its original position.

Page 46: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Concatenation of Transforms

Page 47: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Concatenation of Transforms

This series of transformations is illustrated in the previous figure. How can this composite transform be expressed in terms of matrices?

If we apply each of the component transforms separately:

Translate by (-xc, -yc):

1100

10

01

11

1

y

x

y

x

y

x

c

c

Page 48: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Concatenation of Transforms

Rotate by an angle a about the origin

1100

0cossin

0sincos

11

1

2

2

y

x

y

x

1100

10

01

100

0cossin

0sincos

12

2

y

x

y

x

y

x

c

c

Page 49: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Concatenation of Transforms

Translate by (xc, yc):

1100

10

01

12

2

3

3

y

x

y

x

y

x

c

c

1100

10

01

100

0cossin

0sincos

100

10

01

13

3

y

x

y

x

y

x

y

x

c

c

c

c

1100

)cossin(cossin

)sincos(sincos

13

3

y

x

yxy

yxx

y

x

ccc

ccc

Page 50: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Concatenation of Transforms

The net effect of this transformation is to map the point (x, y) onto the point (x3, y3). This mapping can be expressed as the matrix multiplication of the three basic transformation matrices used.

The value of using square matrices to represent transformations can now be seen.

Square matrices can be multiplied together to produce another square matrix of the same dimensions. Hence composite transformations can be expressed as a single transformation matrix by multiplying them together.

1100

)cossin(cossin

)sincos(sincos

13

3

y

x

yxy

yxx

y

x

ccc

ccc

Page 51: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Concatenation of Transforms

Page 52: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Ordering of Transforms

We have already seen how more than one transformation can be combined by multiplying together the corresponding transformation matrices.

Matrix multiplication is not a communitive operation.

M1 M2 M2 M1

In the same way, the application of transformations is not, in general, commutative and therefore the order in which transforms are combined is important.

Page 53: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Ordering of Transforms

The first example shows the effect of rotating and then translating the object. The second does the same translation and rotation but in a different order, first translating and then rotating the object. The effect in both cases is clearly not the same.

Page 54: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Homogenous Coordinates

To obtain square matrices an additional row was added to the matrix and an additional co-ordinate, the w- co-ordinate, was added to the vector for a point.

In this way a point in 2D space is expressed in three-dimensional homogeneous co-ordinates.

The technique of representing a point in space whose dimension is one greater than that of the point is called homogeneous representation. It provides a consistent, uniform way of handling affine transformations.

Page 55: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Homogenous Coordinates

On converting a 2D point (x, y) to homogeneous co-ordinates the w- co-ordinate is set to 1, giving the corresponding homogeneous co-ordinate point (x, y, 1).

This may then be transformed by the 3x3 homogeneous transformation matrix as shown below.

1'

'

'

y

x

ihg

fed

cba

w

y

x

Page 56: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Homogenous Coordinates

In general, the elements in the bottom row of the matrix, g, h and i, may be set to any value resulting in w 1.

The effect of this general transformation matrix is to transform a point (x, y, 1) in the w = 1 plane onto the point (x’, y’, w’) in the w = w’ plane.

The real-world co-ordinate space is the plane w = 1. And therefore the transformed point must be mapped back onto the w = 1 plane.

This is done by projecting the point x’, y’ w’ onto the plane w = 1.

Page 57: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Homogenous Coordinates

Page 58: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Homogenous Coordinates

The 2D real-world point is (x”, y”) where x” and y” are the x- and y- co-ordinates of the projected point.

The mathematical effect of the projection is that of dividing the x- and y- components by the w- component. Hence

x” = x’ / w’

y” = y’ / w’

Page 59: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Homogenous Coordinates

The resulting homogeneous point is (x, y, 4).

We obtain the corresponding 2D point by performing the homogeneous division.

This gives us the point (x/4, y/4).

From this we can see that the bottom right element in the matrix performs overall or uniform scaling.

1400

010

001

'

'

'

y

x

w

y

x

Page 60: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Object and Axis Transformations

The types of transformations we have examined up to now are known as object transformations.

We think of the object being transformed, while the axes remain fixed.

There is a another way of looking at transformations - as axis transformations.

Here, the object remains fixed while the axes are changed.

Page 61: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Object and Axis Transformations

Page 62: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Normalisation Transformations

Page 63: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Normalisation Transformations

The window and viewport are aligned with their respective axes and are therefore defined by their bottom left and top right hand corners.

The two corners of the window are given by the points (wxmin, wymin) and (wxmax, wymax).

The corresponding corners of the viewport are (vxmin, vymin) and (vxmax, vymax).

Page 64: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Normalisation Transformations

Apply a transformation to map the bottom left hand corner of the window to the origin:

Pw

w

P y

x

000

10

01

' min

min

Page 65: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Normalisation Transformations

Page 66: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Normalisation Transformations

Next apply a scaling to make the size of the window the same as the size of the viewport.

If the x- and y- scale factors, sx and sy are

minmax

minmax

xx

xxx ww

vvs

minmax

minmax

yy

yy

ww

vvsy

Page 67: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Normalisation Transformations

then the transformation becomes

Finally, apply a transformation so that a point at the origin is mapped onto the bottom left hand corner of the viewport:

Pw

w

s

s

P y

x

y

x

000

10

01

100

00

00

' min

min

Pw

w

s

s

v

v

P y

x

y

x

y

x

000

10

01

100

00

00

000

10

01

' min

min

min

min

Page 68: HCI 530 : Seminar (HCI) Damian Schofield. HCI 530: Seminar (HCI) Transforms –Two Dimensional –Three Dimensional The Graphics Pipeline

Summary

A transformation may be either an object transformation in which the points are transformed, or an axis transformation in which the co-ordinate axes are transformed and the object points expressed relative to the new axes.

All of these transformations can be expressed in a 3x3 matrix which is multiplied with the vector for a point to obtain the co-ordinates of the transformed point.

A 3x3 matrix is used to enable different transformations to be combined by multiplying the matrices together.

After transformation we have the point (x’, y’, w’). The real-world 2D co-ordinates are obtained by dividing the x- and y- components by the w- component.