Notes 01

Dr. Michael S.
Lew, LIACS Media Lab, Leiden University
Computer Graphics
The Basics - Matrix Math and OpenGL
Problem Sessions, Papers and Final Projects
Additional Reading:
Computer Graphics Using OpenGL by F.S. Hill
Chapters 4, 5, and 7
Graphics Applications
Entertainment: Cinema
Universal: Jurassic Park
Pixar: Geris Game
Dr. Michael S. Lew, LIACS Media Lab, Leiden University
Entertainment: Games
id: Quake II
Cyan: Riven
Medical Visualization
The Visible Human Project
MIT: Image-Guided Surgery Project
Computer Aided Design (CAD)
Scientific Visualization
Realism in Computer Graphics

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.
2D and 3D Transformations
Transformations
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)
2D & 3D Transformations
Matrix Notation
a1
b1
a2 v1
b2 v2
a1
b1
a2 v1
b2 v2
a1 * v1 a2 * v2
b1 * v1 b2 * v2
w1
w2
a1 * v1 a2 * v2
b1 * v1 b2 * v2
a1 * w1 a2 * w2
b1 * w1 b2 * w2
Matrix Notation
Ask the teaching assistant for help with this if its
the first time you have seen it.
a1
b1
a2
b2
a3 v1
b3 v2
a1 * v1 a2 * v2 a3 * v3
b1 * v1 b2 * v2 b3 * v3
c1
c2
c3
c1 * v1 c2 * v2 c3 * v3
v3
Affine Transformations
An affine transformation is defined as y = Mx+b and can be
represented as a composition of translations, rotations, and
scalings (in some order)
Translation
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 + dx; y = y+ dy
dy
dx
dx
dy
x
y
x dx
y dy
2D Rotations
Every 2D rotation has a fixed point
Rotations are represented by orthogonal matrices:

The rows (columns) are orthonormal.
Matrix Representation of 2D Rotation

around the origin
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?
2D Rotation around the Origin

x r cos
y r sin
x
r cos(
r cos cos
r sin sin
x cos
y sin
r sin(
r cos sin
r sin cos
x sin
y cos
(x , y )
( x, y )
x
y
cos
sin
sin
cos
x
y
matrix representing the rotation
Scaling
Changing the size of an object. We scale an object by
scaling the x and y coordinates of each vertex in the
object.
h
w
sx= w / w
x = sx x
w
sx
0
x'
y'
sy= h/ h
y = sy y
0
sy
x
y
sx x
sy y
Transformations as matrices
Scale:
sx
0
x2 = sxx
y2 = syy
Rotation:
x2 = x cos - y sin
y2 = x sin + y cos
Translation:
x2 = x + dx
y2 = y + dy
0
sy
x
y
sx x
sy y
cos
sin
x cos
y sin
sin
cos
x sin
y cos
dx
dy
x
y
x dx
y dy
Homogeneous Coordinates
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.
x
P( x , y )
S x, y
y
1
sx
0
0
0
sy
0
cos
sin
0
0
0
1
Tx , y
sin
cos
0
0
1 0 dx
0 1 dy
0 0 1
Composite Transformations
Suppose we wish to perform multiple transformations on a point:
P2
T3,1 P1
P3
S2, 2 P2
P4
R30 P3
R30 S2,2 T3,1
P4 MP1
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
Fixed Point Scaling

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)
1 0 2 2 0 0 1 0
0 1 1 0 1 0 0 1
1
0 0 1 0 0 1 0 0 1
T2,1
S 2,1
T 2, 1
0 1
C
2 0
2 0
0 1
0 0 1
C
2 4
9 10
9 10
After
0
Rotation about a Fixed Point

Rotation of degrees about Point (x,y)
Translate (x,y) to origin
(x,y)
Rotate
Translate origin to (x,y)
0 1 0
0 0 1
C
2 2
Before
(x,y)
1 0
cos
sin
0 1 0
0 1
sin
cos
0 0 1
0 0 1
Tx , y
1 0 0 1
T x, y
Shears
Shear = a perturbation of one coordinate by an amount proportional to
another
Original Data
y Shear
x Shear
1 0 0
1 b 0
0 1 0
a 1 0
0 0 1
Reflections
0 0 1
Reflections
Reflection about the y-axis
Reflection about the x-axis
1 0 0
0 1 0
0
0 1
0
0
1 0
0 1
More Reflections
Reflection about the origin
1
0
0 0
1 0
Reflection about the line y=x
?
?
Summary Basic Transform

(x,y)
dy
dx
1 0 dx
0 1 dy
0 0 1
cos
sin
0
sin
cos
0
0
sx
0
0
0
sy
0
0
0
1
Transformations as a change in
coordinate system
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
Transforming the CS - examples
Translate(4,4)
Rotate(180)
Basic 3D Transformations
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
Transformations in Homogeneous Coordinates

In homogeneous coordinates, each affine transformation
is represented by a 4 x 4 matrix and acts as matrix
multiplication
Mu,
11
12
13
14
21
22
23
24
31
32
33
34
A d
0
, A 3 3 , d 3 1, 01 3 ,
A, rotations and scalings

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
3D Translation
TP = (x + dx, y + dy, z + dz)
1 0 0 dx
0 1 0 dy
0 0 1 dz
0 0 0
x
y
z
1
T is called the translation matrix which is also written as T(dx,dy,dz)
3D Scaling
SP = (sxx, syy, szz)
sx
0
0
sy
0
0
0
0
0
0
0
0
sz
0
0
1
x
y
z
1
3D Rotation around the Origin

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)
3D rotation around the z axis

The z axis is fixed by the rotation, the matrix
representing the rotation is
cos
sin
0 0
sin
cos
0 0
1 0
0 1
cos
sin
0 0 x
sin
cos
0 0 y
1 0 z
0 1 1
P' RP
3D Rotations
About y-axis: Ry()P
cos
0
0 sin
1
0
0
0
sin
0 cos
z
1
1
0
0 cos
0
sin
0
0
0 sin
cos
z
1
About x-axis: Rx()P
3D Rotations - Left vs Right

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.
Rotation About Axis Parallel to z-axis
Move the cube to the origin

Apply Rz( )
Move back to original position
M T(p f )R z ( )T( p f )
Concatenation of Transformations
More Terminology
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
Projections
Definitions
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)
Perspective projection
Projectors intersect at COP
Parallel Projections
Projectors parallel.
COP at infinity.
Parallel projections: summary

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.
Orthographic Projection: projectors

orthogonal to projection plane
same for all points
DOP (direction of projectors)
Orthographic Projections
DOP is perpendicular to the view plane
Multiview Parallel Projection
Faces are parallel to the projection plane
Perspective Projection
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
Perspective Projection
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.)
Perspective Projections
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
Perspective Projections
Perspective Viewing
Perspective Viewing
frustum
only fixed point
Objects not in the view volume are clipped.

View (projection) plane is front clipping plane.
Programming: The Problem
From a programming
perspective, how can we
model and display a
virtual world?
Polygonal Modelling
Most objects can be modelled

with polygons.
What kinds of objects would be
difficult or impossible to model
with polygons and textures?
Natural Scenery
Typically, man-made scenes are usually easy to model with

polygons and textures
Natural scenery tends to be more difficult
fur
liquids
clouds
fog
OpenGL
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 crossplatform
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.
OpenGL
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.
GLUT
Rapid application development for OpenGL.
Portability - exists on Windows, Linux, Apple, and Android
GLUT is intended for OpenGL 1.x
OpenGL Versions (1-4)

Which version (stable is 4.5) one is the best?
Short answer: None
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
OpenGL Versions (1.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_GL and GLUT

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
#include "GL/glut.h"
Example 1
void update()
{
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;
}
Grading
Homework, Student Presentations: 30% (-1 penalty/day late)
Problem Session Workshops: 20%
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.
Homework 1
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:
./output
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.
Put all of your answers in a "zip" file and submit to the LML Course Manager in one week.

Notes 01

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Notes 01

Încărcat de

Drepturi de autor:

Formate disponibile

Dr. Michael S.

Lew, LIACS Media Lab, Leiden University

Universal: Jurassic Park

Pixar: Geris Game

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

The Visible Human Project

MIT: Image-Guided Surgery Project

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

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

Realism in Computer Graphics

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

Why are they important to graphics?

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

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

Rotations are represented by orthogonal matrices:

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

Matrix Representation of 2D Rotation

2D Rotation around the Origin

matrix representing the rotation

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

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

R30 S2,2 T3,1

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

Fixed Point Scaling

Rotation about a Fixed Point

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

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

Reflection about the x-axis

Reflection about the line y=x

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

Summary Basic Transform

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

Transforming the CS - examples

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

Transformations in Homogeneous Coordinates

A, rotations and scalings

In affine coordinates, not every affine transformation can

T is called the translation matrix which is also written as T(dx,dy,dz)

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

3D Rotation around the Origin

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

3D rotation around the z axis

About x-axis: Rx()P

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

3D Rotations - Left vs Right

Rotation About Axis Parallel to z-axis

Move the cube to the origin

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

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

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

Projectors intersect at COP

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

Parallel projections: summary

Orthographic Projection: projectors

same for all points

DOP (direction of projectors)

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

DOP is perpendicular to the view plane

Multiview Parallel Projection

Faces are parallel to the projection plane

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

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

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

only fixed point