computer graphics rotate scale and translatenatacha/teachspring_12/csc470/notes/...1 csc 470...
TRANSCRIPT
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
TransformationsTransformations
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
TransformationsTransformations
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
TransformationsTransformations
Transformations allow for:Transformations allow for:1.1. scene compositionscene composition
2
77
TransformationsTransformations
Transformations allow for:Transformations allow for:2.2. easily create symmetrical objectseasily create symmetrical objects
88
TransformationsTransformations
Transformations Transformations allow for:allow for:
3.3. viewing objects at viewing objects at different anglesdifferent angles
99
TransformationsTransformations
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
Transforming PointsTransforming Points
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
Transforming PointsTransforming Points
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
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
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
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
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
What about 3D What about 3D rotations?rotations?There are 3 types of There are 3 types of 3D rotations:3D rotations:
an x roll an x roll a y roll a y roll
2828
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 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
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
Affine TransformationsAffine Transformations
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 TransformationsAffine Transformations
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 TransformationsAffine Transformations
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 TransformationsAffine Transformations
Affine Transformations Preserve Lines and Affine Transformations Preserve Lines and Planes.Planes.Example:Example:
4242
Affine TransformationsAffine Transformations
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
Affine TransformationsAffine Transformations
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
Affine TransformationsAffine Transformations
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
Affine TransformationsAffine Transformations
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
Affine TransformationsAffine Transformations
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
Affine TransformationsAffine Transformations
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
Programming Affine Programming Affine TransformationsTransformations
Take a green square Take a green square produced with produced with glRecti(glRecti(--50,50,--50,50,50);50,50,50);
5151
Programming Affine Programming Affine TransformationsTransformations
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
Programming Affine Programming Affine TransformationsTransformations
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
Programming Affine Programming Affine TransformationsTransformations
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
Programming Affine Programming Affine TransformationsTransformations
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
Programming Affine Programming Affine TransformationsTransformations
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
3D Programming3D Programming
The OpenGL pipeline: The OpenGL pipeline: modelviewmodelview matrix, matrix, projection matrix, viewport matrix.projection matrix, viewport matrix.
5858
3D Programming3D Programming
Viewport MatrixViewport Matrix–– set with set with glViewportglViewport()()
5959
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
Elementary ShapesElementary Shapes–– WireframeWireframe SolidsSolids
Cubes, Spheres etc…Cubes, Spheres etc…
6464
3D Programming3D Programming
glutWireCube(GLdoubleglutWireCube(GLdouble size);size);sizesize is the length of a sideis the length of a side
6565
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
glutWireTetrahedronglutWireTetrahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 4 planes4 planes
6868
3D Programming3D Programming
glutWireOctahedronglutWireOctahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 8 planes8 planes
6969
3D Programming3D Programming
glutWireDodecahedronglutWireDodecahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 10 planes10 planes
7070
3D Programming3D Programming
glutWireIcosahedronglutWireIcosahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 20 planes20 planes
7171
3D Programming3D Programming
glutWireIcosahedronglutWireIcosahedron();();unit in size (use unit in size (use glScaledglScaled to make bigger) to make bigger) –– 20 planes20 planes
7272
3D Programming3D Programming
And the best shape of them all….And the best shape of them all….
13
7373
3D Programming3D Programming
glutWireTeapot(GLfloatglutWireTeapot(GLfloat size);size);
7474
Programming Affine Programming Affine TransformationsTransformations
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
3D Programming3D Programming
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
3D Programming3D Programming
What happened?What happened?Why can’t we see a solid teapot?Why can’t we see a solid teapot?
7777
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
glShadeModel(GL_FLATglShadeModel(GL_FLAT););
8484
3D Programming3D Programming
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
3D Programming3D Programming
glEnable(GL_DEPTH_TESTglEnable(GL_DEPTH_TEST););
8787
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
lightIntensitylightIntensity[] = {1.0f, 1.0f, 1.0f, 1.0f};[] = {1.0f, 1.0f, 1.0f, 1.0f};
lightIntensitylightIntensity[] = {0.2f, 0.2f, 0.2f, 1.0f};[] = {0.2f, 0.2f, 0.2f, 1.0f};
9494
3D Programming3D Programming
lightIntensitylightIntensity[] = {0.2f, 1.0f, 0.2f, 1.0f};[] = {0.2f, 1.0f, 0.2f, 1.0f};
lightIntensitylightIntensity[] = {0.2f, 0.0f, 0.8f, 1.0f};[] = {0.2f, 0.0f, 0.8f, 1.0f};
9595
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
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
3D Programming3D Programming
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