Transformations in OpenGL
10/14/2013 1
Transformations in OpenGL
• Modelling
– Animation
• Viewing
– Orient camera
• Projection
• Map to screen: viewport
10/14/2013 2
Transformations using in OpenGL
• inside reshape: viewport transformation,
projection transformation
• inside display: viewing transformation,
model transformation
10/14/2013 3
Camera Analogy
• 3D is just like taking a photograph (lots of
photographs!)
viewing
volume
camera
tripod model
10/14/2013 4
Camera Analogy and Transformations
• Viewing transformations
– tripod–define position and
orientation of the viewing
volume in the world
• Modeling transformations
– moving the model
• Projection transformations
– adjust the lens of the camera
• Viewport transformations
– enlarge or reduce the
physical photograph
10/14/2013 5
Coordinate Systems and Transformations
• Steps in forming an image
– Specify geometry (world coordinates)
– Specify camera (camera coordinates)
– Project (window coordinates)
– Map to viewport (screen coordinates)
• Each step uses transformations
• Every transformation is equivalent to a change in
coordinate systems (frames)
10/14/2013 6
Homogeneous Coordinates
• Each vertex has an extra value, w
𝑥
𝑇 𝑦
𝑣Ԧ = 𝑥, 𝑦, 𝑧, 𝑤 =
𝑧
𝑤
• Most of the time w = 1, and we can ignore it
10/14/2013 7
Homogeneous Coordinates
• If a is nonzero, then (x, y, z, w)T and (ax, ay, az,
aw)T represent the same homogeneous vertex
• A 3D Euclidean space point (x, y, z)T becomes
the homogeneous vertex (x, y, z, 1.0)T
• As w is nonzero, the homogeneous vertex (x, y,
z, w)T corresponds to the 3D point (x/w, y/w,
z/w)T
• Directions (directed line segments) can be
represented with w = 0.0
10/14/2013 8
Homogeneous Visualization
• Divide by w to normalize (homogenize)
• W = 0? Point at infinity (direction)
(0, 0, 1) = (0, 0, 2) = … w= 1
(7, 1, 1) = (14, 2, 2) = …
w= 2
(4, 5, 1) = (8, 10, 2) = …
10/14/2013 9
Vertex transformations
• Vertex transformations and projections can all be
represented by applying an appropriate 4 x 4 matrix to
the vertex coordinates.
• All affine operations are matrix multiplications
• All matrices are stored column-major in OpenGL
• Matrices are always post-multiplied
• Product of matrix and vector is
𝑚0 𝑚4 𝑚8 𝑚12 𝑥
𝑚1 𝑚5 𝑚9 𝑚13 𝑦
𝑀𝑣Ԧ = 𝑚 𝑚 𝑚 𝑚14
2 6 10 𝑧
𝑚3 𝑚7 𝑚11 𝑚15 𝑤
10/14/2013 10
Specifying Transformations
• Programmer has two styles of specifying
transformations
1. Specify matrices
– glLoadMatrix(), glMultMatrix()
2. Specify operation
– glRotate(), glTranslate(), glScale(),
glOrtho()
– Programmer does not have to remember the exact
matrices
10/14/2013 11
Programming Transformations
• Prior to rendering, view, locate, and orient:
– Eye / camera position
– 3D geometry
• Manage the matrices
– Including matrix stack
• Combine (composite) transformations
10/14/2013 12
Transformation Pipeline
normalized
object eye clip window
device
v
e
r Modelview Projection Perspective Viewport
t
e Matrix Matrix Division Transform
x
Modelview Projection
Modelview • other calculations here
⚫ – material → color
⚫
⚫
– shade model (flat)
– polygon rendering mode
– polygon culling
– clipping
10/14/2013 13
Matrix Operations
• Specify Current Matrix Stack
– glMatrixMode(GL_MODELVIEW or GL_PROJECTION)
• Other Matrix or Stack Operations
– glLoadIdentity(), glPushMatrix(),
glPopMatrix()
• Viewport
– usually same as window size
– viewport aspect ratio should be same as projection
transformation or resulting image may be distorted
– glViewport(x, y, width, height)
10/14/2013 14
Viewing Transformations
10/14/2013 15
Viewing Transformations
• Position the camera/eye in
the scene
– place the tripod down; aim
camera
• To "fly through" a scene
– change viewing
transformation and
redraw scene
10/14/2013 16
Using gluLookAt()
• gluLookAt(eyex, eyey, eyez,
aimx, aimy, aimz,
upx, upy, upz)
– up vector determines unique orientation
– careful of degenerate positions
10/14/2013 17
Default View
• In the default position
– the camera is at
the origin,
– looking down
the negative z-axis,
– and has the positive
y-axis as straight up.
• This is the same as calling
gluLookAt(0.0, 0.0, 0.0,
0.0, 0.0, -100.0,
0.0, 1.0, 0.0);
10/14/2013 18
Using gluLookAt()
• gluLookAt(4.0, 2.0, 1.0,
2.0, 4.0, -3.0,
2.0, 2.0, -1.0);
10/14/2013 19
Projection Tutorial
10/14/2013 20
Modeling Transformations
10/14/2013 21
Modeling Transformations
• Move object
– glTranslate{fd}(x, y, z)
• Dilate (stretch or shrink) or mirror object
– glScale{fd}(x, y, z) (x y z)
• Rotate object around arbitrary axis
– glRotate{fd}(angle, x, y, z)
– angle is in degrees
10/14/2013 22
Translation Transformation
• The call glTranslate*(x, y, z) generates T, where
1 0 0 𝑥
0 1 0 𝑦
T=
0 0 1 𝑧
0 0 0 1
10/14/2013 23
Scale Transformation
𝑥 0 0 0
0 𝑦 0 0
• glScale*(x, y, z) generates S =
0 0 𝑧 0
0 0 0 1
10/14/2013 24
Rotation Transformation
• The glRotate*() command generates a matrix
for rotation about an arbitrary axis.
• Rotating about the Oz axis
glRotate*(a, 0, 0, 1)
𝑐𝑜𝑠𝑎 −𝑠𝑖𝑛𝑎 0 0
𝑠𝑖𝑛𝑎 𝑐𝑜𝑠𝑎 0 0
0 0 1 0
0 0 0 1
10/14/2013 25
Rotation Transformation
• Rotating about the Ox axis
1 0 0 0
0 𝑐𝑜𝑠𝑎 −𝑠𝑖𝑛𝑎 0
glRotate*(a, 1, 0, 0):
0 𝑠𝑖𝑛𝑎 𝑐𝑜𝑠𝑎 0
0 0 0 1
• Rotating about the Oy axis
𝑐𝑜𝑠𝑎 0 𝑠𝑖𝑛𝑎 0
0 1 0 0
glRotate*(a, 0, 1, 0):
−𝑠𝑖𝑛𝑎 0 𝑐𝑜𝑠𝑎 0
0 0 0 1
10/14/2013 26
General rotations
• The call glRotate*(a, x, y, z) generates R as follows:
– Let v = (x, y, z)T, and u = v/||v|| = (x’, y’, z’)T.
0 −𝑧′ 𝑦′
– Also let S = 𝑧′ 0 −𝑥′
−𝑦′ 𝑥′ 0
– and M = uuT + (cos a) (I − uuT) + (sin a) S
𝑚 𝑚 𝑚 0
𝑚 𝑚 𝑚 0
– Then R =
𝑚 𝑚 𝑚 0
0 0 0 1
10/14/2013 27
Rodrigues Formula
• About (kx, ky, kz), a unit
vector on an arbitrary axis
𝑥′ 𝑘𝑥 𝑘𝑥 1 − 𝑐 + 𝑐 𝑘𝑧 𝑘𝑥 1 − 𝑐 − 𝑘𝑧 𝑠 𝑘𝑥 𝑘𝑧 1 − 𝑐 + 𝑘𝑦 𝑠 0 𝑥
𝑦′ 𝑘 𝑘 1 − 𝑐 + 𝑘𝑧 𝑠 𝑘𝑧 𝑘𝑥 1 − 𝑐 + 𝑐 𝑘𝑦 𝑘𝑧 1 − 𝑐 − 𝑘𝑥 𝑠 0 𝑦
= 𝑦 𝑥
𝑧′ 𝑘𝑧 𝑘𝑥 1 − 𝑐 − 𝑘𝑦 𝑠 𝑘𝑧 𝑘𝑥 1 − 𝑐 − 𝑘𝑥 𝑠 𝑘𝑧 𝑘𝑧 1 − 𝑐 + 𝑐 0 𝑧
1 0 0 0 1 1
c = cos , s = sin
10/14/2013 28
Bài tập
• Xác định ma trận của phép quay
glRotatef(30.0f, 1.0f, 1.0f, 0.0f)
10/14/2013 29
Order of transformations
• In general not commutative: order matters!
Rotate then translate Translate then rotate
glTranslate(…); glRotate(…);
glRotate(…); glTranslate(…);
10/14/2013 30
Non-commutative Composition
• Scale then Translate
• Translate then Scale:
10/14/2013 31
Non-commutative Composition
• Scale then Translate: p' = T(Sp) = TSp
1 0 3 2 0 0 2 0 3
TS = 0 1 1 0 2 0 = 0 2 1
0 0 1 0 0 1 0 0 1
• Translate then Scale: p' = S(Tp) = STp
2 0 0 1 0 3 2 0 6
TS = 0 2 0 0 1 1 = 0 2 2
0 0 1 0 0 1 0 0 1
10/14/2013 32
Transformation Tutorial
10/14/2013 33
Compositing Modeling Transformations
• Problem 1: hierarchical objects
– One position depends upon a previous position
– Robot arm or hand; sub-assemblies
• Solution: moving local coordinate system
– modeling transformations move coordinate system
– post-multiply column-major matrices
– OpenGL post-multiplies matrices
10/14/2013 34
Hierarchical Scene Graph
Drawing a Scene Graph
• Draw scene with pre-and-post-order traversal
– Apply node, draw children, undo node if applicable
• Nodes can carry out any function
– Geometry, transforms, groups, color, …
• Requires stack to “undo” post children
– Transform stacks in OpenGL
• Caching and instancing possible
• Instances make it a DAG, not strictly a tree
Example
/* draw sun */
glut.glutWireSphere(1.0, 20, 16);
/* draw smaller planet */
glRotatef((float) year, 0.0f, 1.0f, 0.0f);
glTranslatef(2.0f, 0.0f, 0.0f);
glRotatef((float) day, 0.0f, 1.0f, 0.0f);
glut.glutWireSphere(0.2, 10, 10);
10/14/2013 37
Compositing Modeling Transformations
• Problem 2: objects move relative to absolute world
origin
– My object rotates around the wrong origin
• Make it spin around its center or something else
• Solution: fixed coordinate system
– modeling transformations move objects around fixed
coordinate system
– pre-multiply column-major matrices
– OpenGL post-multiplies matrices
– must reverse order of operations to achieve desired effect
10/14/2013 38
Example: object spin around its center
• You’ll adjust to reading a lot of code backwards!
• Typical sequence
glTranslatef(x, y, z);
glRotatef(theta, ax, ay, az);
glTranslatef(-x, -y, -z);
dwawObject();
• Here (x, y, z) is the fixed point.
– first move it to the origin (last transformation in code)
– Then rotate about the axis (ax, ay, az)
– And finally move fixed point back.
10/14/2013 39
Connection: Viewing and Modeling
10/14/2013 40
Connection: Viewing and Modeling
• Moving camera is equivalent to moving every
object in the world towards a stationary camera
• Viewing transformations are equivalent to
several modeling transformations
– View tranformation matrix E places the camera within
the scene
– Then we apply E-1 to
all points in the world
– Move the eye (camera)
by updating E
10/14/2013 41
OpenGL Viewing Code
• In OpenGL, we can use the built-in transformation
calls to specify the viewing transformation
• The camera is positioned in the scene with
translation by [vTx, vTy, vTz] and rotation about the
X, Y, and Z axis:
void setupView() {
// Inverse viewing transformation
glRotatef(-vAngleZ, 0.0, 0.0, 1.0);
glRotatef(-vAngleY, 0.0, 1.0, 0.0);
glRotatef(-vAngleX, 1.0, 0.0, 0.0);
glTranslatef(-vTx, -vTy, -vTz);
}
10/14/2013 42
Constructing a Frame
gluLookAt(eyex, eyey, eyez,
aimx, aimy, aimz,
upx, upy, upz)
• The cross product between the up and the look-
at vector will get a vector that points to the right.
r = up x a
• Using the vector a and the vector r we can
synthesize a new vector u in the up direction
10/14/2013 43
Rotation
• Rotation takes the unit world to our desired
camera:
10/14/2013 44
Translation
• Translation to the eye point:
10/14/2013 45
Composing the Result
• The final camera transformation is:
1 0 0 𝑒𝑦𝑒𝑥 𝑟𝑥 𝑢𝑥 𝑎𝑥 0
0 1 0 𝑒𝑦𝑒𝑦 𝑟𝑦 𝑢𝑦 𝑎𝑦 0
E = TR =
0 0 1 𝑒𝑦𝑒𝑧 𝑟𝑧 𝑢𝑧 𝑎𝑧 0
0 0 0 1 0 0 0 1
10/14/2013 46
The Viewing Transformation
• Transforming all points P in the world with E-1:
𝑟𝑥 𝑟𝑦 𝑟𝑧 0 1 0 0 −𝑒𝑦𝑒𝑥
-1 -1 𝑢𝑥 𝑢𝑦 𝑢𝑧 0 0 1 0 −𝑒𝑦𝑒𝑦
V=R T =
𝑎𝑥 𝑎𝑦 𝑎𝑧 0 0 0 1 −𝑒𝑦𝑒𝑧
0 0 0 1 0 0 0 1
• Where these are normalized vectors
a = Peye – Paim
r = up x a
u=axr
10/14/2013 47
Projection Transformation
10/14/2013 48
Projection Transformation
• To lower dimensional space (here 3D -> 2D)
– Preserve straight lines
• Shape of viewing frustum
– Perspective projection
– Orthographic parallel projection
10/14/2013 49
Demo
10/14/2013 50
Orthographic projection
• The viewing volume is a rectangular parallelepiped.
• Vertexes of an object are "projected" towards infinity.
• Distance from the camera doesn’t affect how large
an object appears
Example: Simply
project onto xy
plane, drop z
coordinate
10/14/2013 51
Orthographic projection
• Specify the orthographic viewing frustum by
– specifying minimum and maximum x, y coordinates
– Indicating range of distances along the z-axis by
specifying near and far planes
10/14/2013 52
Orthographic Projections matrix
• Here is the orthographic world-to-clip
transformation:
10/14/2013 53
Orthographic Projection in OpenGL
• This matrix is constructed with the following OpenGL
call:
glOrtho(left, right, bottom, top, zNear,
zFar)
• And the 2D version (another GL utility function):
gluOrtho2D(left, right, bottom, top)
– Just a call to glOrtho() with zNear = -1 and zFar = +1
• Usually, the following code is part of the initialization
routine:
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(left, right, bottom, top, near, far);
glMatrixMode(GL_MODELVIEW);
…
10/14/2013 54
Perspective Projections
• Artists (Donatello, Brunelleschi, and Da Vinci)
during the renaissance discovered the
importance of perspective for making images
appear realistic
• Parallel lines intersect at a point
10/14/2013 55
Perspective projection
• Characteristic of perspective projection is
foreshortening:
– The farther an object is from the camera, the smaller
it appears in the final image
10/14/2013 56
Perspective projection
glFrustum(left, right, bottom, top,
zNear, zFar)
10/14/2013 57
Perspective projection
gluPerspective(fovy, aspect, zNear, zFar)
– fovy = vertical field of view in degrees
– aspect = image width / height at near depth
– Can only specify symmetric viewing frustums where
the viewing window is centered around the –z axis.
10/14/2013 58
OpenGL Perspective Matrix
• Mapping the perspective viewing frustum in OpenGL
to clip space involves some affine transformations
• OpenGL uses a clever composition of these
transformations with the perspective projection
matrix:
10/14/2013 59
Viewport Transformation
10/14/2013 60
Viewport Transformation
• The viewport is the rectangular region of the
window where the image is drawn
• Defining the Viewport
– glViewport(GLint x, GLint y, GLsizei width,
GLsizei height)
10/14/2013 61
Mapping the Viewing Volume to the
Viewport
• The aspect ratio of a viewport should equal the
aspect ratio of the viewing volume.
– If the two ratios are different, the projected image will
be distorted when mapped to the viewport
10/14/2013 62
Common Transformation Usage
• 3 examples of reshape() routine
– restate projection & viewing transformations
• Usually called when window resized
10/14/2013 63
reshape(): Perspective & LookAt
public void reshape(GLAutoDrawable drawable,
int x, int y, int width, int height) {
GL2 gl = drawable.getGL().getGL2();
if (height == 0) height = 1; // prevent divide by zero
float aspect = (float) width / height;
// Set the view port (display area) to cover the entire window
gl.glViewport(0, 0, width, height);
// Setup perspective projection
gl.glMatrixMode(GL_PROJECTION);
gl.glLoadIdentity();
glu.gluPerspective(45.0, aspect, 0.1, 100.0);
// Enable the model-view transform
gl.glMatrixMode(GL_MODELVIEW);
gl.glLoadIdentity();
glu.gluLookAt(0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
}10/14/2013 64
reshape(): Perspective & Translate
• Same effect as previous LookAt
public void reshape(GLAutoDrawable drawable,
int x, int y, int width, int height) {
GL2 gl = drawable.getGL().getGL2();
if (height == 0) height = 1; // prevent divide by zero
float aspect = (float) width / height;
gl.glViewport(0, 0, width, height);
gl.glMatrixMode(GL_PROJECTION);
gl.glLoadIdentity();
glu.gluPerspective(45.0, aspect, 0.1, 100.0);
gl.glMatrixMode(GL_MODELVIEW);
gl.glLoadIdentity();
gl.glTranslatef(0.0, 0.0, -5.0);
}
10/14/2013 65
reshape(): Ortho
public void reshape(GLAutoDrawable drawable,
int x, int y, int width, int height) {
GL2 gl = drawable.getGL().getGL2();
double aspect = (double) width / height;
double left = -2.5, right = 2.5;
double bottom = -2.5, top = 2.5;
gl.glViewport(0, 0, width, height);
gl.glMatrixMode(GL_PROJECTION);
gl.glLoadIdentity();
if (aspect < 1.0) {
left *= aspect; right *= aspect;
} else {
bottom /= aspect; top /= aspect;
}
gl.glOrtho(left, right, bottom, top, near, far);
gl.glMatrixMode(GL_MODELVIEW);
gl.glLoadIdentity();
}
10/14/2013 66
Additional Clipping Planes
• At least 6 more clipping planes available
• Good for cross-sections
• Modelview matrix moves clipping plane
clipped
– glEnable(GL_CLIP_PLANEi)
– glClipPlane(GL_CLIP_PLANEi, Gldouble[]
coeff)
Ax + By + Cz + D < 0
10/14/2013 67
Reversing Coordinate Projection
• Screen space back to world space
glGetIntegerv(GL_VIEWPORT, int viewport[4])
glGetDoublev(GL_MODELVIEW_MATRIX,
double mvmatrix[16])
glGetDoublev(GL_PROJECTION_MATRIX,
double projmatrix[16])
gluUnProject(GLdouble winx, winy, winz,
mvmatrix[16], projmatrix[16],
int viewport[4],
double[] objx, double[] objy,
double[] objz)
• gluProject goes from world to screen space
10/14/2013 68
