University of British ColumbiaCPSC 314 Computer Graphics
Jan-Apr 2007
Tamara Munzner
http://www.ugrad.cs.ubc.ca/~cs314/Vjan2007
Transformations I
Week 2, Mon Jan 15
2
News
• Labs start tomorrow
3
Labs
4
Week 2 Lab
• labs start Tuesday• project 0
• http://www.ugrad.cs.ubc.ca/~cs314/Vjan2007/a0
• make sure you can compile OpenGL/GLUT• very useful to test
home computing environment
• template: spin around obj files• todo: change rotation axis•
do hand in to test configuration, but not graded
5
Remote Graphics
• OpenGL does not work well remotely• very slow
• only one user can use graphics at a time• current X server
doesn’t give priority to console, just
does first come first served• problem: FCFS policy =
confusion/chaos
• solution: console user gets priority• only use graphics
remotely if nobody else logged on
• with ‘who’ command, “:0” is console person
• stop using graphics if asked by console user via email• or
console user can reboot machine out from under you
6
Readings for Today + Next 3 Lectures
• FCG Chap 6 Transformation Matrices• except 6.1.6, 6.3.1
• FCG Sect 13.3 Scene Graphs
• RB Chap Viewing• Viewing and Modeling Transforms until
Viewing
Transformations
• Examples of Composing Several Transformationsthrough Building
an Articulated Robot Arm
• RB Appendix Homogeneous Coordinates andTransformation
Matrices
• until Perspective Projection
• RB Chap Display Lists7
Review: Rendering Pipeline
GeometryDatabaseGeometryDatabase
Model/ViewTransform.Model/ViewTransform. LightingLighting
PerspectiveTransform.
PerspectiveTransform. Clipping
Clipping
ScanConversion
ScanConversion
DepthTest
DepthTest
TexturingTexturing BlendingBlendingFrame-buffer
Frame-buffer
8
Review: OpenGL
void display(){glClearColor(0.0, 0.0, 0.0,
0.0);glClear(GL_COLOR_BUFFER_BIT);glColor3f(0.0, 1.0,
0.0);glBegin(GL_POLYGON); glVertex3f(0.25, 0.25, -0.5);
glVertex3f(0.75, 0.25, -0.5); glVertex3f(0.75, 0.75, -0.5);
glVertex3f(0.25, 0.75, -0.5);glEnd();glFlush();
}
• pipeline processing, set state as needed
9
GLUT
10
GLUT: OpenGL Utility Toolkit
• developed by Mark Kilgard (also from SGI)• simple, portable
window manager
• opening windows• handling graphics contexts
• handling input with callbacks• keyboard, mouse, window reshape
events
• timing• idle processing, idle events
• designed for small/medium size applications• distributed as
binaries
• free, but not open source
11
Event-Driven Programming
• main loop not under your control• vs. batch mode where you
control the flow
• control flow through event callbacks• redraw the window
now
• key was pressed
• mouse moved
• callback functions called from main loopwhen events occur•
mouse/keyboard state setting vs. redrawing
12
GLUT Callback Functions // you supply these kind of functions //
you supply these kind of functions
void reshape(void reshape(int int w, w, int int h);h);void
keyboard(unsigned char key, void keyboard(unsigned char key, int
int x, x, int int y);y);void mouse(void mouse(int int but, but, int
int state, state, int int x, x, int int y);y);void idle();void
idle();void display();void display();
// register them with glut // register them with glut
glutReshapeFuncglutReshapeFunc(reshape);(reshape);glutKeyboardFuncglutKeyboardFunc(keyboard);(keyboard);glutMouseFuncglutMouseFunc(mouse);(mouse);glutIdleFuncglutIdleFunc(idle);(idle);glutDisplayFuncglutDisplayFunc(display);(display);
void void glutDisplayFunc glutDisplayFunc (void(void
(*(*funcfunc)(void));)(void));voidvoid glutKeyboardFunc
glutKeyboardFunc (void(void (*(*funcfunc)(unsigned)(unsigned
charchar key,key, intint x,x, intint y));y));voidvoid glutIdleFunc
glutIdleFunc (void(void (*(*funcfunc)());)());voidvoid
glutReshapeFunc glutReshapeFunc (void(void (*(*funcfunc)()(intint
width,width, intint height));height));
13
GLUT Example 1#include void display(){ glClearColor(0,0,0,1);
glClear(GL_COLOR_BUFFER_BIT); glColor4f(0,1,0,1);
glBegin(GL_POLYGON); glVertex3f(0.25, 0.25, -0.5); glVertex3f(0.75,
0.25, -0.5); glVertex3f(0.75, 0.75, -0.5); glVertex3f(0.25, 0.75,
-0.5); glEnd(); glutSwapBuffers();}
int main(int argc,char**argv){ glutInit( &argc, argv );
glutInitDisplayMode(
GLUT_RGB|GLUT_DOUBLE); glutInitWindowSize(640,480);
glutCreateWindow("glut1"); glutDisplayFunc( display );
glutMainLoop(); return 0; // never reached}
14
GLUT Example 2#include void display(){ glRotatef(0.1,
0,0,1);
glClearColor(0,0,0,1); glClear(GL_COLOR_BUFFER_BIT);
glColor4f(0,1,0,1); glBegin(GL_POLYGON); glVertex3f(0.25, 0.25,
-0.5); glVertex3f(0.75, 0.25, -0.5); glVertex3f(0.75, 0.75, -0.5);
glVertex3f(0.25, 0.75, -0.5); glEnd(); glutSwapBuffers();}
int main(int argc,char**argv){ glutInit( &argc, argv );
glutInitDisplayMode(
GLUT_RGB|GLUT_DOUBLE); glutInitWindowSize(640,480);
glutCreateWindow("glut2"); glutDisplayFunc( display );
glutMainLoop(); return 0; // never reached}
15
Redrawing Display
• display only redrawn by explicit request• glutPostRedisplay()
function
• default window resize callback does this
• idle called from main loop when no user input• good place to
request redraw
• will call display next time through event loop
• should return control to main loop quickly
• continues to rotate even when no user action
16
GLUT Example 3#include void display(){ glRotatef(0.1,
0,0,1);
glClearColor(0,0,0,1); glClear(GL_COLOR_BUFFER_BIT);
glColor4f(0,1,0,1); glBegin(GL_POLYGON); glVertex3f(0.25, 0.25,
-0.5); glVertex3f(0.75, 0.25, -0.5); glVertex3f(0.75, 0.75, -0.5);
glVertex3f(0.25, 0.75, -0.5); glEnd(); glutSwapBuffers();}
void idle() { glutPostRedisplay();}
int main(int argc,char**argv){ glutInit( &argc, argv );
glutInitDisplayMode(
GLUT_RGB|GLUT_DOUBLE); glutInitWindowSize(640,480);
glutCreateWindow("glut1"); glutDisplayFunc( display );
glutIdleFunc( idle ); glutMainLoop(); return 0; // never
reached}
17
Keyboard/Mouse Callbacks
• again, do minimal work• consider keypress that triggers
animation
• do not have loop calling display in callback!• what if user
hits another key during animation?
• instead, use shared/global variables to keeptrack of state•
yes, OK to use globals for this!
• then display function just uses currentvariable value
18
GLUT Example 4#include
bool animToggle = true;float angle = 0.1;
void display() {glRotatef)angle, 0,0,1);
...}void idle() { glutPostRedisplay();}int main(int
argc,char**argv){ ... glutKeyboardFunc( doKey ); ...}
void doKey(unsigned char key, int x, int y) {
if ('t' == key) { animToggle = !animToggle; if (!animToggle)
glutIdleFunc(NULL); else glutIdleFunc(idle); } else if ('r' ==
key) { angle = -angle; } glutPostRedisplay();}
19
Transformations
20
Transformations
• transforming an object = transforming all itspoints
• transforming a polygon = transforming itsvertices
21
Matrix Representation
• represent 2D transformation with matrix• multiply matrix by
column vector
apply transformation to point
• transformations combined by multiplication
• matrices are efficient, convenient way to representsequence of
transformations!
=
y
x
dc
ba
y
x
'
'dycxy
byaxx
+=
+=
'
'
=
y
x
kj
ih
gf
ed
dc
ba
y
x
'
'
22
Scaling
• scaling a coordinate means multiplying eachof its components
by a scalar
• uniform scaling means this scalar is the samefor all
components:
× 2
23
• non-uniform scaling: different scalars percomponent:
• how can we represent this in matrix form?
Scaling
X × 2,Y × 0.5
24
Scaling
• scaling operation:
• or, in matrix form:
=
by
ax
y
x
'
'
=
y
x
b
a
y
x
0
0
'
'
scaling matrix
25
2D Rotation
θ
(x, y)
(x', y')
x' = x cos(θ) - y sin(θ)y' = x sin(θ) + y cos(θ)
• counterclockwise
• RHS
26
2D Rotation From Trig Identities
x = r cos (φ)y = r sin (φ)x' = r cos (φ + θ)y' = r sin (φ +
θ)
Trig Identity…x' = r cos(φ) cos(θ) – r sin(φ) sin(θ)y' = r
sin(φ) cos(θ) + r cos(φ) sin(θ)
Substitute…x' = x cos(θ) - y sin(θ)y' = x sin(θ) + y cos(θ)
θ
(x, y)
(x', y')
φ
27
2D Rotation Matrix
• easy to capture in matrix form:
• even though sin(q) and cos(q) are nonlinearfunctions of q,
• x' is a linear combination of x and y• y' is a linear
combination of x and y
( ) ( )( ) ( )
−=
y
x
y
x
θθ
θθ
cossin
sincos
'
'
28
2D Rotation: Another Derivation
θθ
θθ
cossin'
sincos'
yxy
yxx
+=
−=(x',y')
θθ
(x,y)
29
2D Rotation: Another Derivation
θθ
θθ
cossin'
sincos'
yxy
yxx
+=
−=(x',y')
(x,y)
θθ
xy
30
2D Rotation: Another Derivation
θθ
θθ
cossin'
sincos'
yxy
yxx
+=
−=(x',y')
(x,y)
θθ
xy
θθ
x
y
31
2D Rotation: Another Derivation
θθ
θθ
cossin'
sincos'
yxy
yxx
+=
−=
xx'
€
x'= A − B
BB
AA
(x',y')
(x,y)
32
2D Rotation: Another Derivation
θθ
θθ
cossin'
sincos'
yxy
yxx
+=
−=
xx
xx'
€
x'= A − B
BB
AA
(x',y')
(x,y)
€
A = x cosθθθ
xx
33
2D Rotation: Another Derivation
θθ
θθ
cossin'
sincos'
yxy
yxx
+=
−=
xx €
x'= A − B
BB
AA
€
A = x cosθyy
yy
θθ
θθ
(x',y')
(x,y)
θθxx'
θsinyB =θθ
34
Shear
• shear along x axis• push points to right in proportion to
height
x
y
x
y
+
=
′
′
?
?
??
??
y
x
y
x
35
Shear
• shear along x axis• push points to right in proportion to
height
x
y
x
y
+
=
′
′
0
0
10
1
y
xsh
y
x x
36
Reflection
x x
+
=
′
′
?
?
??
??
y
x
y
x
• reflect across x axis• mirror
37
Reflection
• reflect across x axis• mirror
+
−=
′
′
0
0
10
01
y
x
y
x
x x
38
2D Translation
=
+
+=
+
'
'
y
x
by
ax
b
a
y
x),( ba(x,y)
(x’,y’)
39
2D Translation
=
+
+=
+
'
'
y
x
by
ax
b
a
y
x),( ba(x,y)
(x’,y’)
( ) ( )( ) ( )
−=
y
x
y
x
θθ
θθ
cossin
sincos
'
'
=
y
x
b
a
y
x
0
0
'
'
scaling matrix rotation matrix
40
2D Translation
=
+
+=
+
'
'
y
x
by
ax
b
a
y
x),( ba(x,y)
(x’,y’)
( ) ( )( ) ( )
−=
y
x
y
x
θθ
θθ
cossin
sincos
'
'
=
y
x
b
a
y
x
0
0
'
'
scaling matrix rotation matrix
vector addition
matrix multiplicationmatrix multiplication
41
2D Translation
=
+
+=
+
'
'
y
x
by
ax
b
a
y
x),( ba(x,y)
(x’,y’)
( ) ( )( ) ( )
−=
y
x
y
x
θθ
θθ
cossin
sincos
'
'
=
y
x
b
a
y
x
0
0
'
'
scaling matrix rotation matrix
=
'
'
y
x
y
x
dc
ba
translation multiplication matrix??
vector addition
matrix multiplicationmatrix multiplication
42
Linear Transformations
• linear transformations are combinations of• shear• scale•
rotate• reflect
• properties of linear transformations• satisifes T(sx+ty) = s
T(x) + t T(y)• origin maps to origin• lines map to lines• parallel
lines remain parallel• ratios are preserved• closed under
composition
=
y
x
dc
ba
y
x
'
'dycxy
byaxx
+=
+=
'
'
43
Challenge
• matrix multiplication• for everything except translation
• how to do everything with multiplication?• then just do
composition, no special cases
• homogeneous coordinates trick• represent 2D coordinates (x,y)
with 3-vector (x,y,1)
44
Homogeneous Coordinates
• our 2D transformation matrices are now 3x3:
−
=
100
0)cos()sin(
0)sin()cos(
θθ
θθ
otationR
=
100
00
00
b
a
caleS
=
100
10
01
y
x
T
T
ranslationT
+
+
=
∗+∗
∗+∗
=
11
11
11
1100
10
01
by
ax
by
ax
y
x
b
a
• use rightmost column
45
Homogeneous Coordinates Geometrically
• point in 2D cartesian
xx
yy
y
x
46
Homogeneous Coordinates Geometrically
• point in 2D cartesian + weight w =point P in 3D homog.
coords
• multiples of (x,y,w)
• form a line L in 3D
• all homogeneous points on Lrepresent same 2D cartesian
point
• example: (2,2,1) = (4,4,2) =(1,1,0.5)
),,( wyx
homogeneoushomogeneous
),(w
y
w
xcartesiancartesian
/ w/ w
xx
yy
ww
w=w=11
⋅
⋅
w
wy
wx
1
y
x
47
Homogeneous Coordinates Geometrically
• homogenize to convert homog. 3Dpoint to cartesian 2D point:•
divide by w to get (x/w, y/w, 1)
• projects line to point onto w=1 plane
• like normalizing, one dimension up
• when w=0, consider it as direction• points at infinity
• these points cannot be homogenized
• lies on x-y plane
• (0,0,0) is undefined
),,( wyx
homogeneoushomogeneous
),(w
y
w
xcartesiancartesian
/ w/ w
xx
yy
ww
w=w=11
⋅
⋅
w
wy
wx
1
y
x
48
Affine Transformations
• affine transforms are combinations of• linear transformations•
translations
• properties of affine transformations• origin does not
necessarily map to origin• lines map to lines• parallel lines
remain parallel• ratios are preserved• closed under composition
=
w
y
x
fed
cba
w
y
x
100
'
'
