Computer Graphics Rotate Scale and Translatenatacha/TeachSpring_12/CSC470/Notes/...1 CSC 470 Computer Graphics 1 Computer Graphics Transformations 22 Today’s Lecture Transformations

1

CSC 470 Computer GraphicsCSC 470 Computer Graphics 11

Computer GraphicsComputer Graphics

TransformationsTransformations

22

Today’s LectureToday’s Lecture

TransformationsTransformations–– How to:How to:

RotateRotateScale andScale andTranslateTranslate

33

IntroductionIntroduction

An important concept in computer An important concept in computer graphics is graphics is Affine TransformationsAffine Transformations..Basically, these allow us to move objects Basically, these allow us to move objects around without around without deformingdeforming them.them.We will need to keep track of points and We will need to keep track of points and vectors as they do not transform in the vectors as they do not transform in the same way.same way.

44


One example of a transformation is the One example of a transformation is the window to viewport transformation.window to viewport transformation.Here we have seen an image in the world Here we have seen an image in the world window scaled and translated (moved) into window scaled and translated (moved) into a viewport window.a viewport window.We will build on this transformation to We will build on this transformation to allow us to move objects to more complex allow us to move objects to more complex locations.locations.

55


A Transformation consists of:A Transformation consists of:a Rotationa Rotationa Scaling anda Scaling anda Translationa Translationa Shearinga Shearing

They occur in 2DThey occur in 2Dand 3Dand 3D

66


Transformations allow for:Transformations allow for:1.1. scene compositionscene composition

2

77


Transformations allow for:Transformations allow for:2.2. easily create symmetrical objectseasily create symmetrical objects

88


Transformations Transformations allow for:allow for:

3.3. viewing objects at viewing objects at different anglesdifferent angles

99


Transformations Transformations allow for:allow for:

4.4. computer animation computer animation where several where several objects need to objects need to move relative to one move relative to one anotheranother

1010

TransformationsTransformationsThe OpenGL Pipeline

• OpenGL makes transformations easy.

• But that doesn’t excuse you from learning about them…. in detail!!

1111

Transforming PointsTransforming Points

A transformation simply takes a point and A transformation simply takes a point and maps it to another location.maps it to another location.

1212


In the 2D case this means….In the 2D case this means….–– for P = (for P = (PPxx, , PPyy, 1), 1)TT and Q = (and Q = (QQxx, , QQyy, 1), 1)TT

–– P is at the location P = P is at the location P = Pxi+PyjPxi+Pyj + + ξξ (same for Q)(same for Q)–– then, Q = M then, Q = M ((PPxx, , PPyy, 1), 1)TT or Q = M(P)or Q = M(P)

where M is some mapping matrixwhere M is some mapping matrix

P

Q

3

1313


Exercise:Exercise:–– if P = (3,4) and Q = (5, if P = (3,4) and Q = (5,

7) what is M ?7) what is M ?–– (5,7,1)(5,7,1)TT = M (3,4,1)= M (3,4,1)TT

–– We want to increase We want to increase PPxx by 2 and increase by 2 and increase PPyy by 3by 3

–– what is M ??what is M ??

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

=

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

1100310201

1PP

QQ

y

x

y

x

1414

Affine TransformationsAffine Transformations

As we have seen there are four types of As we have seen there are four types of transformations that can be combined to transformations that can be combined to produce an affine transformation.produce an affine transformation.We will look at these individually to We will look at these individually to begin… begin…

1515

TranslationTranslation

Moving a point/object around in the x, y Moving a point/object around in the x, y and/or z directions.and/or z directions.–– In this example, the car does not rotate (it In this example, the car does not rotate (it

always remains upright) or scale in size.always remains upright) or scale in size.

1616

TranslationTranslationThis means that values This means that values are being are being added or added or subtractedsubtracted to the existing to the existing coordinates.coordinates.

P

Q

dPy

dPx

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

=

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

11001001

1PP

dPdP

QQ

y

x

y

x

y

x

1717

TranslationTranslationExample: What is the Example: What is the translation matrix to move translation matrix to move P=(4,6) to Q=(10,3) ?P=(4,6) to Q=(10,3) ?

P

Q

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

=⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

−164

100310

601

13

10

Change in X

Change in Y

1818

TranslationTranslationExample: What is the Example: What is the translation matrix to move translation matrix to move P=(4,6,2) to Q=(10,3,5) ?P=(4,6,2) to Q=(10,3,5) ?

P

Q

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡−

=

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

1264

100031003010

6001

153

10

Change in X

Change in Y

Change in Z

4

1919

ScalingScalingThis means that the This means that the x,yx,yand or z coordinates are and or z coordinates are being multiplied by a being multiplied by a scalar.scalar.

P

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

=

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

11000000

1PP

sPsP

QQ

y

x

y

x

y

x

2020

ScalingScalingExample: What is the matrix that will scale a Example: What is the matrix that will scale a point P = (6,2) to Q = (3,4)point P = (6,2) to Q = (3,4)

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

=⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

126

10002000

143 2

1

P

2121

ScalingScalingExample: What is the matrix that will scale a Example: What is the matrix that will scale a point P = (6,2,9) to Q = (3,4,3)point P = (6,2,9) to Q = (3,4,3)

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

⎥⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢⎢

⎣

⎡

=

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

1926

100003

10000200002

1

1343

P

2222

RotationRotation

This means that the This means that the x,yx,y and and or z coordinates are rotated or z coordinates are rotated around a point.around a point.

PHow do we calculate P rotating to Q?

P

Q

ФӨ

2323

RotationRotation

Use rightUse right--angles and trig.angles and trig.

We know:

P(x,y) = (R cos(Ф), R sin(Ф) )

and

Q(x,y) = (R cos(Ө+Ф), R sin(Ө +Ф) )

From trigonometry we also know:cos(Ө+Ф) = cos(Ө)cos(Ф) –sin(Ө)sin(Ф)

sin(Ө +Ф) = sin(Ө)cos(Ф) + cos(Ө)sin(Ф)

y = R sin (Ф)

x = R cos (Ф)

2424

RotationRotation

Use rightUse right--angles and trig.angles and trig.

Qx = R cos(Ө+Ф) = R cos(Ө)cos(Ф) – R sin(Ө)sin(Ф)

Qy = R sin(Ө +Ф) ) = R sin(Ө)cos(Ф) + R cos(Ө)sin(Ф)

using P(x,y) = (R cos(Ф), R sin(Ф) )

we get

Qx = Pxcos(Ө) – Pysin(Ө)

Qy = Pxsin(Ө) + Pycos(Ө)

5

2525

RotationRotationThis gives us the rotation matrix:This gives us the rotation matrix:

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

=

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡ −

11000)cos()sin(0)sin()cos(

1PP

QQ

y

x

y

x

θθθθ

2626

RotationRotation

What about 3D What about 3D rotations?rotations?There are 3 types of There are 3 types of 3D rotations:3D rotations:

an x rollan x roll

2727

RotationRotation


an x roll an x roll a y roll a y roll

2828

RotationRotation


an x roll an x roll a y roll a y roll a z roll a z roll

2929

RotationRotation

A Z roll is the same A Z roll is the same as rolling in 2D as the as rolling in 2D as the object rolls between object rolls between the x and y axis.the x and y axis.

⎥⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢⎢

⎣

⎡

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡ −

=

⎥⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢⎢

⎣

⎡

11 1000010000)cos()sin(00)sin()cos(

PPP

QQQ

z

y

x

z

y

x

θθθθ

Positive angle rotation occurs according to the right-hand rule!!!.

3030

RotationRotation

An X roll is a rotation between the y and z An X roll is a rotation between the y and z axes.axes.

⎥⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢⎢

⎣

⎡

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡−

=

⎥⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢⎢

⎣

⎡

11 10000)cos()sin(00)sin()cos(00001

PPP

QQQ

z

y

x

z

y

x

θθθθ

6

3131

RotationRotation

A Y roll is a rotation between the y and z axes.A Y roll is a rotation between the y and z axes.

⎥⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢⎢

⎣

⎡

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

−=

⎥⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢⎢

⎣

⎡

11 10000)cos(0)sin(00100)sin(0)cos(

PPP

QQQ

z

y

x

z

y

x

θθ

θθ

3232

ShearingShearing

ShearingShearing–– Shearing means that a point is dragged in a Shearing means that a point is dragged in a

particular direction.particular direction.–– This means that some coordinates are affected This means that some coordinates are affected

while others are not.while others are not.

3333

ShearingShearing

Shearing occurs along a Shearing occurs along a line.line.In this example the shear In this example the shear occurs along the x axis.occurs along the x axis.This gives us:This gives us:–– QQxx = = PPxx + + hPyhPy;;–– QQyy = = PPyy;;

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

=

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

110001001

1PPh

QQ

y

x

y

x

3434

Combining TransformationsCombining Transformations

Rotation, Scaling, Translation and Shearing can Rotation, Scaling, Translation and Shearing can be combined into the one matrix.be combined into the one matrix.For example, if you want to translate a shape, For example, if you want to translate a shape, rotate it and then scale it, the transformation, T, rotate it and then scale it, the transformation, T, would be:would be:

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡ −

1001001

1000)cos()sin(0)sin()cos(

1000000

dPdP

sPsP

y

x

y

x

θθθθ

3535

Combining TransformationsCombining Transformations

Transformation matrices are listed in reverse Transformation matrices are listed in reverse order and….order and….Matrices are multiplied backwards.Matrices are multiplied backwards.

⎥⎥⎥⎥⎥⎥

⎦

⎤

⎢⎢⎢⎢⎢⎢

⎣

⎡

+

−−

100))cos()sin(()cos()sin(

))sin()cos(()sin()cos(θθθθ

θθθθdPdPsPsPsP

dPdPsPsPsPyxy

yxx

yy

xx

3636


What we have been looking at are affine What we have been looking at are affine transformation.transformation.They have the following properties:They have the following properties:–– Affine Transformations Preserve Affine Combinations Affine Transformations Preserve Affine Combinations

of Pointsof Points–– Affine Transformations Preserve Lines and PlanesAffine Transformations Preserve Lines and Planes–– Affine Transformations Preserve Parallelism of Lines Affine Transformations Preserve Parallelism of Lines

and Planesand Planes–– Relative Ratios are preservedRelative Ratios are preserved–– The effect on areas can be predetermined.The effect on areas can be predetermined.

7

3737


Affine Transformations Preserve Affine Affine Transformations Preserve Affine Combinations of Points.Combinations of Points.

Given Q = aGiven Q = a11PP11 + a+ a22PP22

T(aT(a11PP11 + a+ a22PP22) = T(a) = T(a11PP11) + T(a) + T(a22PP22))

3838

Affine TransformationsAffine TransformationsAffine Transformations Affine Transformations Preserve Affine Preserve Affine Combinations of Points.Combinations of Points.

Example: Show that point Example: Show that point M which is the affine M which is the affine combination of combination of 0.7*P(10,20) and 0.7*P(10,20) and 0.3*Q(30,15) maintains 0.3*Q(30,15) maintains the affine combination the affine combination relationship when M, P relationship when M, P and Q are transformed by and Q are transformed by the matrix, W: the matrix, W:

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

100420103

3939

Affine TransformationsAffine TransformationsAffine Transformations Affine Transformations Preserve Affine Preserve Affine Combinations of Points.Combinations of Points.

Example: Show that point Example: Show that point M which is the affine M which is the affine combination of combination of 0.7*P(10,20) and 0.7*P(10,20) and 0.3*Q(30,15) maintains 0.3*Q(30,15) maintains the affine combination the affine combination relationship when M, P relationship when M, P and Q are transformed by and Q are transformed by the matrix, W. the matrix, W.

[16,18.5,1]T = 0.7[10,20,1]T + 0.3[30,15]T

WM = 0.7WP + 0.3WQ

[49,41,1]T = 0.7[31,44,1]T + 0.3[91,34,1]T

= [21.7, 30.8, 0.7]T + [27.3, 10.2, 0.3]T

4040


Affine Transformations Preserve Lines and Affine Transformations Preserve Lines and Planes.Planes.–– preserves linearity and flatnesspreserves linearity and flatness

lines stay as lineslines stay as linesplanes stay flatplanes stay flat

4141


Affine Transformations Preserve Lines and Affine Transformations Preserve Lines and Planes.Planes.Example:Example:

4242


Affine Transformations Preserve Affine Transformations Preserve Parallelism of Lines and Planes.Parallelism of Lines and Planes.–– if 2 parallel lines undertake the same if 2 parallel lines undertake the same

transformation, they will remain paralleltransformation, they will remain parallel–– the same applies for planes.the same applies for planes.

8

4343


Relative Ratios are preservedRelative Ratios are preserved-- if P is a point some ratio of the way along a line, if P is a point some ratio of the way along a line,

then after a transformation it will still be the same then after a transformation it will still be the same distance to line length ratio along the line.distance to line length ratio along the line.

P

t%

Pt%

4444


The effect on areas can be predetermined.The effect on areas can be predetermined.

area after transformation/area before transformation = |area after transformation/area before transformation = |detdet T|T|

Rotations and Translations do not affect areas or Rotations and Translations do not affect areas or volumes.volumes.

4545


However, scaling does affect the area or However, scaling does affect the area or volume.volume.

4646

Affine TransformationsAffine TransformationsExample: If the volume of A is Example: If the volume of A is 100 units what will the volume 100 units what will the volume of B be if B = T(A) where T =of B be if B = T(A) where T =

area(B)/area(Aarea(B)/area(A) = |) = |detdet T|T|area(Barea(B) = |) = |detdet T| * T| * area(Aarea(A))

= 0.5 * 100= 0.5 * 100= 50= 50

AB

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

5.000020005.0

4747


How does this help us in computer How does this help us in computer graphics.graphics.–– An object will not lose its relative shape when An object will not lose its relative shape when

transformed together.transformed together.–– Objects will not lose their relative distances Objects will not lose their relative distances

when transformed together.when transformed together.

4848


How does this help us in computer How does this help us in computer graphics.graphics.–– For example we can create a fly around of a For example we can create a fly around of a

scene where the whole scene is essentially scene where the whole scene is essentially being transformed.being transformed.

9

4949

Programming Affine Programming Affine TransformationsTransformations

OpenGL works with 4 dimensional OpenGL works with 4 dimensional matrices.matrices.However, you don’t have to deal with them However, you don’t have to deal with them directly.directly.OpenGL does all the hard work for you.OpenGL does all the hard work for you.

5050


Take a green square Take a green square produced with produced with glRecti(glRecti(--50,50,--50,50,50);50,50,50);

5151


Now we can translate Now we can translate it with: it with: glTranslated(50,50,0);glTranslated(50,50,0);

glTranslated(x,y,zglTranslated(x,y,z););

5252


or we can rotate it or we can rotate it with: with: glRotate(30,0,0,1);glRotate(30,0,0,1);

glRotate(degreesglRotate(degrees, x, y, z);, x, y, z);

5353


or we can scale it or we can scale it with: with: glScaled(0.5,0.5,1);glScaled(0.5,0.5,1);

glScaled(xglScaled(x, y, z);, y, z);

5454


or we can combine or we can combine them:them:

glRotated(30,0,0,1);glRotated(30,0,0,1);glScaled(0.5,0.5,1);glScaled(0.5,0.5,1);glTranslated(50,50,0);glTranslated(50,50,0);

10

5555


And as we have to multiply the transformation And as we have to multiply the transformation matrices in reverse order we also have to matrices in reverse order we also have to specify them in reverse in OpenGL.specify them in reverse in OpenGL.E.g. To draw the rectangle which we translate, E.g. To draw the rectangle which we translate, scale and then rotate the code is:scale and then rotate the code is:

glRotated(30,0,0,1);glRotated(30,0,0,1);glScaled(0.5,0.5,1);glScaled(0.5,0.5,1);glTranslated(50,50,0);glTranslated(50,50,0);glRecti(glRecti(--50,50,--50,50,50);50,50,50);

5656

3D Programming3D Programming

At first it will seem complex, but its really quite At first it will seem complex, but its really quite easy.easy.

5757


The OpenGL pipeline: The OpenGL pipeline: modelviewmodelview matrix, matrix, projection matrix, viewport matrix.projection matrix, viewport matrix.

5858


Viewport MatrixViewport Matrix–– set with set with glViewportglViewport()()

5959


Projection MatrixProjection Matrix–– set with set with glOrtho(leftglOrtho(left, right, bottom, top, near, far), right, bottom, top, near, far)

left right

top

bottom

near

far

6060


ModelviewModelview MatrixMatrix–– besides besides glTranslatedglTranslated, , glScaledglScaled and and glRotatedglRotated……–– gluLookAt(eye.xgluLookAt(eye.x, , eye.yeye.y, , eye.zeye.z, , lookat.xlookat.x, , lookat.ylookat.y, ,

lookat.zlookat.z, , up.xup.x, , up.yup.y, , up.zup.z););

eye position (x, y, z)

up direction (which way is up?)

11

6161

3D Programming3D Programmingvoid void myInitmyInit()(){{

glMatrixMode(GL_PROJECTIONglMatrixMode(GL_PROJECTION); ); glLoadIdentityglLoadIdentity();();glOrtho(glOrtho(--100, 100, 100, 100, --100, 100, 0, 200);100, 100, 0, 200);glMatrixMode(GL_MODELVIEWglMatrixMode(GL_MODELVIEW); ); glLoadIdentityglLoadIdentity();();gluLookAt(1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);gluLookAt(1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

}}

void void main(intmain(int argcargc, char **, char **argvargv)){{

……glutInitWindowSize(640,480);glutInitWindowSize(640,480);……glutCreateWindow(“3D Window");glutCreateWindow(“3D Window");glutDisplayFunc(displayWireglutDisplayFunc(displayWire););……glViewport(0, 0, 640, 480);glViewport(0, 0, 640, 480);myInitmyInit();();glutMainLoopglutMainLoop();();

}}

Set the Viewport

Matrix

Set the Projection

Matrix

Set the Modelview

Matrix

6262


Elementary ShapesElementary Shapes–– the following are drawn with the the following are drawn with the myInitmyInit() ()

function set up thus:function set up thus:myInitmyInit()()

{{

glMatrixMode(GL_PROJECTIONglMatrixMode(GL_PROJECTION););

glLoadIdentityglLoadIdentity();();glOrtho(glOrtho(--100,100,100,100,--100,100,0,200);100,100,0,200);glMatrixMode(GL_MODELVIEWglMatrixMode(GL_MODELVIEW); ); glLoadIdentityglLoadIdentity();();gluLookAt(0.0, 0.0, 150.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); gluLookAt(0.0, 0.0, 150.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

}}

6363


Elementary ShapesElementary Shapes–– WireframeWireframe SolidsSolids

Cubes, Spheres etc…Cubes, Spheres etc…

6464


glutWireCube(GLdoubleglutWireCube(GLdouble size);size);sizesize is the length of a sideis the length of a side

6565


glutWireSphere(GLdoubleglutWireSphere(GLdouble radius, radius, GLintGLint slices, slices, GLintGLint stacks);stacks);slices are the vertical cuts (slices of cake), slices are the vertical cuts (slices of cake),

stacks are the horizontal cuts (stacks of pancakes)stacks are the horizontal cuts (stacks of pancakes)

6666


glutWireTorus(GLdoubleglutWireTorus(GLdouble inRadinRad, , GLdoubleGLdouble outRadoutRad, , GLintGLint slices, slices, GLintGLint stacks);stacks);inRadinRad is the centre radius, is the centre radius, outRadoutRad is the outer radiusis the outer radius

12

6767


glutWireTetrahedronglutWireTetrahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 4 planes4 planes

6868


glutWireOctahedronglutWireOctahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 8 planes8 planes

6969


glutWireDodecahedronglutWireDodecahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 10 planes10 planes

7070


glutWireIcosahedronglutWireIcosahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 20 planes20 planes

7171


glutWireIcosahedronglutWireIcosahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 20 planes20 planes

7272


And the best shape of them all….And the best shape of them all….

13

7373


glutWireTeapot(GLfloatglutWireTeapot(GLfloat size);size);

7474


We can also transform 3D objects such as We can also transform 3D objects such as the the glutWireTeapotglutWireTeapot(), thus:(), thus:

glRotated(30,0,1,1);glRotated(30,0,1,1);

glScaled(0.5,1.5,0.2);glScaled(0.5,1.5,0.2);

glTranslated(10,50,0);glTranslated(10,50,0);

7575


What about solid shapes?What about solid shapes?–– glutSolidSphereglutSolidSphere–– glutSolidCubeglutSolidCube–– etc….etc….–– and you guessed it…and you guessed it…–– glutSolidTeapotglutSolidTeapot

However, drawing these isn’t as straight forward as the 2D However, drawing these isn’t as straight forward as the 2D shapes and the shapes and the wireframeswireframes…..…..Lets look at the result of changing from Lets look at the result of changing from glutWireTeapotglutWireTeapot to to glutSolidTeapotglutSolidTeapot in the previous program.in the previous program.

7676


What happened?What happened?Why can’t we see a solid teapot?Why can’t we see a solid teapot?

7777


For many reasons, but in short…For many reasons, but in short…LIGHTING!!!LIGHTING!!!

Without lighting, there are no:Without lighting, there are no:–– shadows or highlightsshadows or highlights

These provide us with the These provide us with the illusion of depth and 3 illusion of depth and 3 dimensions.dimensions.

7878


Lets turn on the lights.Lets turn on the lights.glEnableglEnable() is used to turn many OpenGL () is used to turn many OpenGL features on..features on..One of these is lighting, thus:One of these is lighting, thus:glEnable(GL_LIGHTINGglEnable(GL_LIGHTING););–– this can be called in the main or the this can be called in the main or the myInitmyInit

when the window is being when the window is being initialisedinitialised..

14

7979

3D Programming3D ProgrammingNow, what does the Now, what does the teapot look like?teapot look like?

Not exactly the effect Not exactly the effect we were hoping for!we were hoping for!

So far we have So far we have enabled lighting, but enabled lighting, but we haven’t actually we haven’t actually turned any lights on!!turned any lights on!!

8080


We have to call We have to call glEnableglEnable() again to turn on a () again to turn on a light, thus:light, thus:glEnable(GL_LIGHT0); glEnable(GL_LIGHT0); There are a maximum of 8 lights you can use, There are a maximum of 8 lights you can use, GL_LIGHT0, GL_LIGHT1, .., GL_LIGHT7GL_LIGHT0, GL_LIGHT1, .., GL_LIGHT7And the result….And the result….

8181


Better.Better.But not great if you know what is possible with OpenGL.But not great if you know what is possible with OpenGL.

8282

3D Programming3D ProgrammingHow can we improve this?How can we improve this?First, we select a Shade Model.First, we select a Shade Model.This is set using This is set using glShadeModelglShadeModel();();There are two types of shading:There are two types of shading:–– GL_FLATGL_FLAT–– GL_SMOOTHGL_SMOOTH

8383


glShadeModel(GL_FLATglShadeModel(GL_FLAT););

8484


glShadeModel(GL_SMOOTHglShadeModel(GL_SMOOTH););

15

8585

3D Programming3D ProgrammingThis improves the teapot’s surface, but it still This improves the teapot’s surface, but it still isn’t quite right.isn’t quite right.There are parts of the teapot that shouldn’t be There are parts of the teapot that shouldn’t be displaying.displaying.e.g. the hidden parts.e.g. the hidden parts.We need a depth test!We need a depth test!

glEnable(GL_DEPTH_TESTglEnable(GL_DEPTH_TEST););

8686


glEnable(GL_DEPTH_TESTglEnable(GL_DEPTH_TEST););

8787


glEnable(GL_NORMALIZEglEnable(GL_NORMALIZE););

8888

3D Programming3D ProgrammingInitialisationInitialisation of the drawing environment for 3D.of the drawing environment for 3D.

main( int main( int argcargc, char **, char **argvargv)){{

glutInit(&argcglutInit(&argc, , argvargv););glutInitDisplayMode(GLUT_SINGLEglutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH );| GLUT_RGB | GLUT_DEPTH );glutInitWindowSize(SCREENWIDTHglutInitWindowSize(SCREENWIDTH, SCREENHEIGHT);, SCREENHEIGHT);glutInitWindowPosition(100, 100);glutInitWindowPosition(100, 100);glutCreateWindow("SolidglutCreateWindow("Solid");");glutDisplayFunc(displaySolidglutDisplayFunc(displaySolid););glEnable(GL_LIGHTINGglEnable(GL_LIGHTING););glEnable(GL_LIGHT0);glEnable(GL_LIGHT0);glShadeModel(GL_SMOOTHglShadeModel(GL_SMOOTH););glEnable(GL_DEPTH_TESTglEnable(GL_DEPTH_TEST););glEnable(GL_NORMALIZEglEnable(GL_NORMALIZE););glClearColor(0.1f,0.1f,0.1f,0.0f);glClearColor(0.1f,0.1f,0.1f,0.0f);glViewport(0,0, SCREENWIDTH, SCREENHEIGHT);glViewport(0,0, SCREENWIDTH, SCREENHEIGHT);

glutMainLoopglutMainLoop();();

return 1;return 1;}}

8989

3D Programming3D ProgrammingTo display the teapot. This function is registered with To display the teapot. This function is registered with myDisplayFuncmyDisplayFunc().().

void void displaySolid(voiddisplaySolid(void)){{

glMatrixMode(GL_PROJECTIONglMatrixMode(GL_PROJECTION););glLoadIdentityglLoadIdentity();();glOrtho(glOrtho(--1, 1, 1, 1, --1, 1, 0.1, 100.0);1, 1, 0.1, 100.0);glMatrixMode(GL_MODELVIEWglMatrixMode(GL_MODELVIEW););glLoadIdentityglLoadIdentity();();gluLookAt(2.3,1.3,2,0,0.25,0,0.0,1.0,0.0);gluLookAt(2.3,1.3,2,0,0.25,0,0.0,1.0,0.0);glClear(GL_COLOR_BUFFER_BITglClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);| GL_DEPTH_BUFFER_BIT);

glColor3f(0,1,0);glColor3f(0,1,0);glPushMatrixglPushMatrix();();glTranslated(0.4,0.5, 0.4);glTranslated(0.4,0.5, 0.4);glRotated(30,0,1,0);glRotated(30,0,1,0);glutSolidTeapot(0.5);glutSolidTeapot(0.5);glPopMatrixglPopMatrix();();

}}

9090


Positioning the LightPositioning the LightlightPositionlightPosition = x, y, z, w= x, y, z, w

GLfloatGLfloat lightPositionlightPosition[]={2.0f,3.0f,3.0f, 0.0f};[]={2.0f,3.0f,3.0f, 0.0f};

glLightfv(GL_LIGHT0, GL_POSITION, glLightfv(GL_LIGHT0, GL_POSITION, lightPositionlightPosition););

16

9191


lightPositionlightPosition[]={2.0f,6.0f,3.0f, 0.0f};[]={2.0f,6.0f,3.0f, 0.0f};

lightPositionlightPosition[]={1.0f,2.0f,4.0f, 0.0f};[]={1.0f,2.0f,4.0f, 0.0f};

9292


Turning up the LightsTurning up the LightslightIntensitylightIntensity = red, green, blue, alpha= red, green, blue, alpha

GLfloatGLfloat lightIntensitylightIntensity[] = {0.7f, 0.7f, 0.7f, 1.0f};[] = {0.7f, 0.7f, 0.7f, 1.0f};

glLightfv(GL_LIGHT0, GL_DIFFUSE, glLightfv(GL_LIGHT0, GL_DIFFUSE, lightIntensitylightIntensity););

9393


lightIntensitylightIntensity[] = {1.0f, 1.0f, 1.0f, 1.0f};[] = {1.0f, 1.0f, 1.0f, 1.0f};


9494




9595


Types of LightTypes of Light–– GL_AMBIENTGL_AMBIENT

scattered light, difficult scattered light, difficult to determine originto determine origin

–– GL_DIFFUSEGL_DIFFUSEdirect light with an direct light with an originorigin

–– GL_SPECULARGL_SPECULARsame as shininess, light same as shininess, light comes from one comes from one direction and bounces direction and bounces off the surfaceoff the surface

9696


Surface ColoursSurface Colours–– Light can make an object appear in a different Light can make an object appear in a different

colour, but the actual colour of the object colour, but the actual colour of the object needs to be set differently.needs to be set differently.

–– For this we use For this we use glMaterialfvglMaterialfv()()–– The material of an object can be ambient, The material of an object can be ambient,

diffuse and diffuse and specularspecular, just as for light. It also , just as for light. It also has a factor of shininess.has a factor of shininess.

17

9797


Surface ColoursSurface ColoursFor example:For example:

GLfloatGLfloat mat_ambientmat_ambient[]= {0.5f, 0.8f, 0.6f, 1.0f};[]= {0.5f, 0.8f, 0.6f, 1.0f};

GLfloatGLfloat mat_diffusemat_diffuse[] = {0.6f, 0.8f, 0.6f, 1.0f};[] = {0.6f, 0.8f, 0.6f, 1.0f};

GLfloatGLfloat mat_specularmat_specular[] = {1.0f, 0.8f, 1.0f, 1.0f};[] = {1.0f, 0.8f, 1.0f, 1.0f};

GLfloatGLfloat mat_shininessmat_shininess[] = {10.0f};[] = {10.0f};

glMaterialfv(GL_FRONTglMaterialfv(GL_FRONT, GL_AMBIENT, , GL_AMBIENT, mat_ambientmat_ambient););

glMaterialfv(GL_FRONTglMaterialfv(GL_FRONT, GL_DIFFUSE, , GL_DIFFUSE, mat_diffusemat_diffuse););

glMaterialfv(GL_FRONTglMaterialfv(GL_FRONT, GL_SPECULAR, , GL_SPECULAR, mat_specularmat_specular););

glMaterialfv(GL_FRONTglMaterialfv(GL_FRONT, GL_SHININESS, , GL_SHININESS, mat_shininessmat_shininess););

9898


Surface ColoursSurface Colours

9999

The EndThe End

Next Two WeeksNext Two Weeks

–– More about transformationMore about transformation–– Creating complex 3D shapes using polygon Creating complex 3D shapes using polygon

meshesmeshes

Documents

Computer Graphics Rotate Scale and Translatenatacha/TeachSpring_12/CSC470/Notes/...1 CSC 470 Computer Graphics 1 Computer Graphics Transformations 22 Today’s Lecture Transformations