Vous êtes sur la page 1sur 34

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

ComputerComputer GraphicsGraphics

TheThe BasicsBasics -- MatrixMatrix MathMath andand OpenGLOpenGL

Computer Graphics Using OpenGL by F.S. Hill

Chapters 4, 5, and 7

GraphicsGraphics ApplicationsApplications

Entertainment: Cinema

Pixar: Geri’s Game

Universal: Jurassic Park

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

GraphicsGraphics ApplicationsApplications

Entertainment: Games

Cyan: Riven

id: Quake II

GraphicsGraphics ApplicationsApplications

The Visible Human Project

Medical Visualization

MIT: Image-Guided Surgery Project

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

GraphicsGraphics ApplicationsApplications

GraphicsGraphics ApplicationsApplications

Scientific Visualization

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

RealismRealism inin ComputerComputer GraphicsGraphics

Form: model complex shapes and patterns by simulating the way things grow. Animals, plants, landscapes, etc.

Appearance: model the way surfaces interact with light and simulate the physics of image formation.

Behavior: simulate the way objects move and interact. Newtonian mechanics, control, etc.

2D2D andand 3D3D TransformationsTransformations

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

TransformationsTransformations

What are they?

– changing something to something else via rules

– mathematics: mapping between values in a range set and domain set (function/relation)

– geometric: translate, rotate, scale, shear,

Why are they important to graphics?

 – moving objects on screen / in space – mapping from model space to screen space – Changing state of object (normal vs. destroyed) –
2D2D && 3D3D TransformationsTransformations
Matrix Notation
a
a v
a
* v
a
*
v
1
2
1
1
1
2
2
b
v
b
* b
v
*
v
1 b
2
2
1
1
2
2
a
a v
w
a
* *
v
a
*
v
a
w
a
*
w
1
2
1
1
1
1
2
2
1
1
2
2
b
v
b
* b w
v
b
*
v
*
b
*
w
b 1
2 w
2
2
1
1
2
2
1
1
2
2

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

MatrixMatrix NotationNotation

Ask the teaching assistant for help with this if it’s the first time you have seen it.

 a b 1 a b 1 2 2 a v 2 b 3 3 v 1 a v * v 1 * b 1 1 1 a b 2 2 * * v v 2 2 a b 3 3 * * v 3 v 3 c 1 c c 3 v 3 c 1 * v c * v c * v 3 2 1 2 2 3

AffineAffine TransformationsTransformations

An affine transformation is defined as y = Mx+b and can be represented as a composition of translations, rotations, and scalings (in some order)

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

TranslationTranslation

Translation displaces points by a fixed distance in a given direction Only need to specify a displacement vector d Transformed points are given by P = P + d

x’ = x + d x ; y’ = y+ d y
d
y
d x
x
d
x
x
d
d
x
y
y d
y
y

2D2D RotationsRotations

Every 2D rotation has a fixed point

Rotations are represented by orthogonal matrices:

The rows (columns) are orthonormal.

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

MatrixMatrix RepresentationRepresentation ofof 2D2D RotationRotation aroundaround thethe originorigin

We want to find the representation of the transformation that rotates at angle about the origin.

Given a point with coordinates (x, y), what are the coordinates (x’, y’) of the transformed point?

2D2D RotationRotation aroundaround thethe OriginOrigin

x
r cos
y
r sin
x
r
cos(
)
r
cos
cos
r
sin
sin
x
cos
y
sin
y
r
sin(
)
r
cos
sin
r
sin
cos
x
sin
y
cos
(
x , y )
x cos
sin x
( x , y )
y
sin
cos
y
r
matrix representing the rotation

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

ScalingScaling

Changing the size of an object. We scale an object by scaling the x and y coordinates of each vertex in the object.

h

h’

w

w’

x '

0 x

x x

 s x = w’ / w s y = h’/ h s x s x’ = s x x y’ = s y y y ' 0 s y y s y y
TransformationsTransformations asas matricesmatrices
Scale:
s
0
x
s
x
x 2 = s x x
y 2 = s y y
x
x
0
s
y
s
y
y
y
Rotation:
cos
sin
x x
cos
y
sin
x 2 = x cos - y sin
y 2 = x sin + y cos
sin
cos
y
x
sin
y
cos
Translation:
d x
x
d
x
x
x 2 = x + d x
y 2 = y + d y
d
y
y d
y
y

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

HomogeneousHomogeneous CoordinatesCoordinates
In order to represent a transformation as a matrix multiplication
operation we use 3 x 3 matrices and pad our points to become
3 x 1 matrices. This coordinate system (using three values to
represent a 2D point) is called homogeneous coordinate
system.
P
x
y
cos
sin
0
R
sin
cos
0
(
x y
,
)
0
0
1
1
s
0
0
x
1
0
d
x
S
0
s
0
x y
,
T
y
0
1
d y
x y
,
0
0
1
0
1
0

CompositeComposite TransformationsTransformations

Suppose we wish to perform multiple transformations on a point:

P 2

T 3,1 P 1

P 3 S 2, 2 P 2

P 4

R 30

P 3

M R 30 S 2,2 T 3,1

P 4 MP 1

Remember:

• Matrix multiplication is associative, not commutative!

• Transform matrices must be pre-multiplied

• The first transformation you want to perform will be at the far right, just before the point

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

FixedFixed PointPoint ScalingScaling

Scale by 2 with fixed point = (2,1)
Translate the point (2,1) to the origin
Scale by 2
Translate origin to point (2,1)
Before
1
0
0
0
0
1
2 2
1
0
1
0
0 1
0
2
0
0123
4
5678
10
0
1
2
9
1
0
1
0
0
1
0
1
0
1
0
0
2
1
0
0
T
S
T
C
2,1
2,1
2,
1
2
0
2
2
2
0
2
4
After
1
01
0
1
0
1
0
1
6
1
00
1
1 1
2
0
0
1
1
1
0123
4
5678
9
10
C
C
Rotation of degrees about Point (x,y)
Translate (x,y) to origin
Rotate
Translate origin to (x,y)
(x,y)
(x,y)
1
0
x cos
sin
0 1
0 x
1
y
sin
cos
0
0
1
y
C 0
0
0
1
0 0
1
0
1
0
T
R
T
x , y
,
x
y

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

Shear = a perturbation of one coordinate by an amount proportional to another

Original Data

y Shear

x Shear

 1 a 0 1 0 0 1 1 0 b 1 0 0 0 0 0 0 1

ReflectionsReflections

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

ReflectionsReflections
1 0 0
1
0
0
0
0
1
0
0
1
0
0
0
1
0
1

MoreMore ReflectionsReflections

 1 0 0 0 0 0 1 0 1

?

?

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

SummarySummary BasicBasic TransformTransform
(x,y)
d y
d x
s
0
0
1
0
d
cos
sin
x
0
x
0
s
0
0
1
d
sin
cos
0
y
y
0
0
1
0
1
0
0
1
0

TransformationsTransformations asas aa changechange inin coordinatecoordinate systemsystem

All transformations we have looked at involve transforming points in a fixed coordinate system (CS)

One can also think of them as a transformation of the CS itself

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

TransformingTransforming thethe CSCS -- examplesexamples

Translate(4,4)

Rotate(180°)

BasicBasic 3D3D TransformationsTransformations

Translation

Scale

Rotation

Shear

As in 2D, we use homogeneous coordinates (x,y,z,w), so that transformations may be composited together via matrix multiplication

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

TransformationsTransformations inin HomogeneousHomogeneous CoordinatesCoordinates
In homogeneous coordinates, each affine transformation
is represented by a 4 x 4 matrix and acts as matrix
multiplication
A
d
11
12
13
14
M
,
A
,
d
,
0
,
3
3
3 1
1
3
0
21
1
22
23
24
v Mu,
M
A , rotations and scalings
31
32
33
34
0
0
0
1
d , translations
In affine coordinates, not every affine transformation can
be represented by a matrix but it could be expressed in the
form
v Au d
3D3D TranslationTranslation
TP = (x + d x ,
y + d y ,
z + d z )
1
0
0
d
x
x
0
1
0
d
y
y
0
0
1
d
z
z
0
0
0
1
1
T is called the translation matrix which is also written as T(d x ,d y ,d z )

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

3D3D ScalingScaling

SP =
(s x x, s y y,
s z z)
s
0
0
0
x
x
0
s
0
0
y
y
0
0
s
0
z
z
0
0
0
1
1

3D3D RotationRotation aroundaround thethe OriginOrigin

The origin is unchanged, called the fixed point of the transformation

Extend 2D rotation to 3D.

2D rotation in the plane is equivalent to 3D rotation about the z axis: each point rotates in a plane perpendicular to z axis (i.e. z stays the same)

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

3D3D rotationrotation aroundaround thethe zz axisaxis
The z axis is fixed by the rotation, the matrix
representing the rotation is
cos
sin
0
0
sin
cos
0
0
R
0
0
1
0
0
0
0
1
x
cos
sin
0
0 x
y
sin
cos
0
0
y
P ' RP
z
0
0
1
0
z
0
0
0
1
1
1
3D3D RotationsRotations
0
sin
0
x
0
1
0
0
y
cos
sin
0
cos
0
z
0
0
0
1
1
1
0
0
0
x
0
cos
sin
0
y
0
sin
cos
0
z
0
0
0
1
1

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

3D3D RotationsRotations -- LeftLeft vsvs RightRight

You will occasionally see the following

OpenGL is a right-handed coordinate system

DirectX is a left-handed coordinate system

- Left/Right results in different rotation matrices

- Right refers to X,Y,Z pointing in the directions of the right hand thumb, index, and middle finger respectively.

Move the cube to the origin
Apply R z ( )
Move back to original position
M T p
(
)
R
(
T p
)
(
)
f
z
f

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

ConcatenationConcatenation ofof TransformationsTransformations

MoreMore TerminologyTerminology

World Coordinate System (Object Space) - The space in which the application model is defined. The representation of an object is measured in some physical or abstract units

Screen Coordinate System (Image Space) - The space in which the image is displayed. Usually measured in pixels, but could use any units

Window - The rectangle defining the part of the world we wish to display

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

ProjectionsProjections

DefinitionsDefinitions

Projection: a transformation that maps from a higher dimensional space to a lower dimensional space (e.g. 3D 2D) Center of projection (CoP): the position of the eye or camera with respect to which the projection is performed (also eyepoint, camera point, proj. reference point) Projection plane: in a 3D 2D projection, the plane to which the projection is performed (also viewplane)

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

PerspectivePerspective projectionprojection

Projectors intersect at COP

ParallelParallel ProjectionsProjections
Projectors parallel.
COP at infinity.

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

ParallelParallel projections:projections: summarysummary

Center of projection is at infinity. Projectors are parallel. Two main types: Orthogonal and Oblique Distances and angles are transformed consistently. Used most often in engineering design, CAD systems. Used for top and side drawings from which measurements could be made.

OrthographicOrthographic Projection:Projection: projectorsprojectors orthogonalorthogonal toto projectionprojection planeplane

same for all points

DOP (direction of projectors)

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

OrthographicOrthographic ProjectionsProjections

DOP is perpendicular to the view plane

MultiviewMultiview ParallelParallel ProjectionProjection

Faces are parallel to the projection plane

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

PerspectivePerspective ProjectionProjection

Most natural for people In human vision, perspective projection of the world is created on the retina (back of the eye) Used in CG for creating realistic images Perspective projection images carry depth cues Foreshortening causes distant objects to appear smaller

PerspectivePerspective ProjectionProjection

Relative lengths and angles are not preserved A perspective image cannot be used for metric measurements of the 3D world Parallel lines not parallel to the image plane converge at a vanishing point An axis (principal) vanishing point is a point of convergence for lines parallel to a principal axis of the object. We distinguish one-, two-, three-point projections.)

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

PerspectivePerspective ProjectionsProjections

One-point:

– One principal axis cut by projection plane

– One axis vanishing point

Two-point:

– Two principal axes cut by projection plane

– Two axis vanishing points

Three-point:

– Three principal axes cut by projection plane

– Three axis vanishing points

PerspectivePerspective ProjectionsProjections

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

PerspectivePerspective ViewingViewing

PerspectivePerspective ViewingViewing

frustum

only fixed point

Objects not in the view volume are clipped. View (projection) plane is front clipping plane.

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

Programming:Programming: TheThe ProblemProblem

From a programming perspective, how can we model and display a virtual world?

PolygonalPolygonal ModellingModelling

Most objects can be modelled with polygons.

What kinds of objects would be difficult or impossible to model with polygons and textures?

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

NaturalNatural SceneryScenery

 Typically, man-made scenes are usually easy to model with polygons and textures Natural scenery tends to be more difficult

– fur

– liquids

– clouds

– fog

OpenGLOpenGL

In the early 90s, the top computer graphics company worldwide was SGI.

They had all of the top 3D programmers and had developed an API/library called IrisGL

In 1991, SGI developed an open API/library called OpenGL which was released in 1992 and based heavily on IrisGL

The main difference was that OpenGL purposely removed all local system calls so that it could be cross- platform

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

OpenGL Methodology

– Suppose you were to create an API for 3D, you might want to express models and actions in the 3D world as:

Setup the camera over there

Draw rectangles at the following coordinates

Switch to perspective view

Move the viewport over to the left

– OpenGL lets you do this. It was designed so that the programmer performs actions on a single 3D world.

– OpenGL is a “State machine” - you alter the world state one change at a time. All changes are made globally - its not modular nor object oriented.

OpenGLOpenGL

 OpenGL is the underlying API for altering the state of the 3D world. It does not let you – make a window on a desktop – resize the window – display menus – handle input devices You could use the native methods for handling windows, etc. -> for example, using the win32 API on MS Windows.

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

GLUTGLUT

 Rapid application development for OpenGL. Portability - exists on Windows, Linux, Apple, and Android GLUT is intended for OpenGL 1.x

OpenGLOpenGL VersionsVersions (1(1--4)4)

Which version (stable is 4.5) one is the best?

It depends on many factors including which OS, graphics card, and existing software source code and libraries (and more).

For MS Remote Desktop, only 1.x is mostly supported

For many Android platforms, only 1.x and 2.x are supported

For desktop computing, usually 4.x will be supported

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

OpenGLOpenGL VersionsVersions (1.x(1.x -- 4.x)4.x)

OpenGL 1.x - 3.0 are generally easier for rapid application development where speed is not of primary importance. 2.x introduced the OpenGL shader language

If speed is extremely important, then OpenGL 4.x is usually better because it supports wider and deeper access to the graphics hardware such as tessellation-control, tessellation-evaluation, etc.

In Workshop 1, we start you with OpenGL 1.x and GLUT. From previous years, ~60% of you will code the final project using 1.x simply because it is easier.

In Workshop 4, you will use recent OpenGL and SDL -> you will touch upon all major approaches

Open_GLOpen_GL andand GLUTGLUT

 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) – clear the color buffer and the depth buffer glColor3f(R, G, B) - set the drawing color to R, G, B glVertex3f(X, Y, Z) - define a vertex at X, Y, Z glBegin(GL_QUADS); glVertex3f( );glVertex3f( );glVertex3f( );glVertex3f( ); glEnd(); glRotatef(A, X, Y, Z) – rotate by A degrees around the ray from the origin to (X, Y, Z) glTranslatef(X, Y, Z) - translate by X, Y, Z glutSwapBuffers() - in double buffering, swap the buffers gluPerspective(v, a, n, f);

– setup our camera with

– v = field of view; a = aspect ratio,

– n = near clipping plane; f = far clipping plane

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

#include "GL/glut.h"
void update()
ExampleExample 11
{
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_TRIANGLES);
glColor3f(1.0, 0.0, 0.0); // red
glVertex3f(-0.7, 0.0, 0.0); // vertex to the left
glVertex3f(0.7, 0.0, 0.0); // vertex to the right
glVertex3f(0.0, 0.7, 0.0); // vertex to the top
glEnd();
glFlush();
}
int main(int argc, char *argv[])
{
glutInit(&argc, argv);
glutCreateWindow("Triangle");
glutDisplayFunc(&update);
glutMainLoop();
return 0;
}
Homework, Student Presentations: 30%
Problem Session Workshops: 20%
(-1 penalty/day late)
These are like open-book exams where you can ask the teaching
assistant or other students for advice. There is a strict time deadline at
the end of the workshop.
Final Project: 50%
This is an interactive OpenGL program written by you which expands
upon the coursework. A short scientific-tone writeup & presentation,
source code, and executables which work in rm. 302 are required. The
preferred topic areas will be mentioned in class. If you feel you are
already an expert in OpenGL, you can discuss a novel project with the
lecturer.

Dr. Michael S. Lew, LIACS Media Lab, Leiden University

HomeworkHomework 11

Note for Homework 1: Students are encouraged to discuss the solutions with other students.

1. Consider a point (2,3,5). What will be the result if we

– a. rotate by 45 degrees around z and then

– b. translate with (4,5,0) and then

– c. scale with 4 on y

2. Rotate the point (2,3,5) around y-axis with 60 degrees

3. Explain why the rotation matrix around the y-axis is different than that of the x-axis or z-axis, in particular, the reason for the negative sign for sin ß.

4. What is the reflection matrix for a reflection around y=x axis ?

5. [Get to know Linux/UNIX and compile OpenGL] An example compile command for glut in Linux is

gcc -o output mycode.cpp -lglut -lGLU

To run you would type:

Go into room 302, compile the program from Example 1 and run. Take a screenshot of the result. In the later problem session workshops, you will be doing OpenGL programming. Please email the teaching assistant if it takes more than an hour to determine the compiler settings or run the program.

./output

Put all of your answers in a "zip" file and submit to the LML Course Manager in one week.