Transformations

CS 432 Interactive Computer Graphics

Prof. David E. Breen
Department of Computer Science

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 1

 Objectives

• Introduce standard transformations

- Rotation
- Translation
- Scaling
- Shear
• Derive homogeneous coordinate
transformation matrices
• Learn to build arbitrary transformation
matrices from simple transformations
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 2
 General Transformations

A transformation maps points to other

points and/or vectors to other vectors
v=T(u)

Q=T(P)

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 3

 Affine Transformations

• Line preserving
• Characteristic of many physically
important transformations
- Rigid body transformations: rotation, translation
- Scaling, shear
• Importance in graphics is that we need
only transform endpoints of line segments
and let implementation draw line segment
between the transformed endpoints
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 4
 Pipeline Implementation

T (from application program)

frame
u T(u) buffer
transformation rasterizer
v T(v) T(v)

v T(v)
T(u)
u T(u)
vertices vertices pixels

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 5

 Notation
We will be working with both coordinate-free
representations of transformations and
representations within a particular frame
P,Q, R: points in an affine space
u, v, w: vectors in an affine space
a, b, g: scalars
p, q, r: representations of points
-array of 4 scalars in homogeneous coordinates
u, v, w: representations of vectors
-array of 4 scalars in homogeneous coordinates

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 6

 Translation

• Move (translate, displace) a point to a

new location
P’

d
P

• Displacement determined by a vector d

- Three degrees of freedom
- P’= P+d

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 7

 How many ways?

Although we can move a point to a new location

in infinite ways, when we move many points
there is usually only one way

object translation: every point displaced

by same vector
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 8
 Translation Using
Representations
Using the homogeneous coordinate
representation in some frame
p = [ x y z 1]T
p’= [x’ y’ z’ 1]T
d = [dx dy dz 0]T
Hence p’ = p + d or
x’= x + dx note that this expression is in
four dimensions and expresses
y’= y + dy point = point + vector
z’= z + dz
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 9
 Translation Matrix
We can also express translation using a
4 x 4 matrix T in homogeneous coordinates
p’= Tp where
é1 0 0 dx ù
ê0 1 0 dy ú
T = T(dx, dy, dz) = ê ú
ê0 0 1 dz ú
ê ú
ë0 0 0 1û
This form is better for implementation because all affine
transformations can be expressed this way and
multiple transformations can be concatenated together

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 10

 Translation

! x' $ ! 1 0 0 d x $! x $
# & # &# &
# y' &=# 0 1 0 d y &# y &
# z' & # &#
0 0 1 dz & z &
# & # # &
" 1 % #" 0 0 0 1 &%" 1 %

x’= x + dx
y’= y + dy
z’= z + dz
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 12
 Rotation (2D)

Consider rotation about the origin by q degrees

- radius stays the same, angle increases by q
x’ = r cos (f + q)
y’ = r sin (f + q)

x’ = x cos q – y sin q
x = r cos f y’= x sin q + y cos q
y = r sin f

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 13

 Rotation about the z axis

• Rotation about z axis in three dimensions leaves

all points with the same z
- Equivalent to rotation in two dimensions in
planes of constant z
x’= x cos q –y sin q
y’= x sin q + y cos q
z’= z

- or in homogeneous coordinates
p’= Rz(q)p

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 14

 Rotation Matrix

[ ]
écos q --sin q 0 0ù
ê sin q cos q ú
0 0ú
R = Rz(q) = ê
ê 0 0 1 0ú
ê ú
ë 0 0 0 1û

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 15

 Rotation Matrix

! x ' $ ! cos θ −sin θ $! x $

# & # 0 0
&# &
# y' & # sin θ cos θ 0 0 &# y &
=
# z' & # 0 0 1 0 &# z &
# & # &# &
" 1 % " 0 0 0 1 %" 1 %

x’= x cos q –y sin q

y’= x sin q + y cos q
z’= z

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 16

 Rotation about x and y axes
• Same argument as for rotation about z axis
- For rotation about x axis, x is unchanged
- For rotation about y axis, y is unchanged
é1 0 0 0ù
ê0 cos q - sin q 0ú
ê ú
R = Rx(q) = ê0 sin q cos q 0ú
ê ú
ë0 0 0 1û

é cos q 0 sin q 0ù
ê 0 1 0 0ú
R = Ry(q) = ê ú
ê- sin q 0 cos q 0ú
ê ú
ë 0 0 0 1û
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 17
 Rotation Around an Arbitrary Axis

• Rotate a point P
around axis n (x,y,z)
by angle q
# tx 2 + c txy + sz txz − sy 0&
% (
% txy − sz ty 2 + c tyz + sx 0(
R=
%txz + sy tyz − sx tz 2 + c 0(
% (
$ 0 0 0 1'
• c = cos(q)
• s = sin(q)
• t = (1 - c)
Graphics Gems I, p. 466 & 498
19
 Rotation Around an Arbitrary Axis

•Also can be expressed as the

Rodrigues Formula

Prot = P cos(ϑ ) + (n × P)sin(ϑ ) + n(n ⋅ P)(1− cos(ϑ ))

20
 Scaling
Expand or contract along each axis (fixed point of origin)
x’=sxx
y’=syy
z’=szz
p’=Sp

é sx 0 0 0ù
ê0 sy 0 0 ú
S = S(sx, sy, sz) = ê ú
ê0 0 sz 0ú
ê ú
ë0 0 0 1û
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 21
 Reflection

corresponds to negative scale factors

sx = -1 sy = 1 original

sx = -1 sy = -1 sx = 1 sy = -1

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 23

 Shear

• Helpful to add one more basic transformation

• Equivalent to pulling faces in opposite directions

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 24

 Shear Matrix

Consider simple shear along x axis

x’ = x + y cot q
y’ = y
z’ = z

é1 cot q 0 0ù
ê0 1 0 0ú
H(q) = ê ú
ê0 0 1 0ú
ê ú
ë0 0 0 1û

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 25

 Inverses

• Although we could compute inverse matrices by

general formulas, we can use simple geometric
observations
- Translation: T-1(dx, dy, dz) = T(-dx, -dy, -dz)
- Rotation: R -1(q) = R(-q)
• Holds for any rotation matrix
• Note that since cos(-q) = cos(q) and sin(-q)=-sin(q)
R -1(q) = R T(q)
- Scaling: S-1(sx, sy, sz) = S(1/sx, 1/sy, 1/sz)

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 27

 Concatenation

• We can form arbitrary affine transformation

matrices by multiplying together rotation,
translation, and scaling matrices
• Because the same transformation is applied to
many vertices, the cost of forming a matrix
M=ABCD is not significant compared to the cost
of computing Mp for many vertices p
• The difficult part is how to form a desired
transformation from the specifications in the
application

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 28

 Order of Transformations

• Note that matrix on the right is the first

applied
• Mathematically, the following are
equivalent
p’ = (ABC)p = A(B(Cp)) // pre-multiply
• Note many references use column
matrices to represent points. In terms of
column matrices
p’T = pTCTBTAT // post-multiply

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 29

 Properties of Transformation
Matrices
• Note that matrix multiplication is not
commutative
• i.e. in general M1M2 ≠ M2M1

• T – reflection around y axis

• T’ – rotation in the plane 30
 General Rotation About the
Origin
A rotation by q about an arbitrary axis
can be decomposed into the concatenation
of rotations about the x, y, and z axes

R(q) = Rz(qz) Ry(qy) Rx(qx)

y
q v
qx qy qz are called the Euler angles
Note that rotations do not commute. x
We can use rotations in another order but
with different angles.
z
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 31
 Rotation About a Fixed Point
other than the Origin
Move fixed point to origin
Rotate
Move fixed point back
M = T(pf) R(q) T(-pf)

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 32

 Composition of 2D Transforms

• Rotate about a point P1

- Translate P1 to origin
- Rotate
- Translate back to P1

P’ = T ✴ P T

33
1994 Foley/VanDam/Finer/Huges/Phillips ICG
 Composition of 2D Transforms

• Scale object around point P1

- P1 to origin
- Scale
- Translate back to P1
- Compose into T

T
P’ = T ✴ P
34
1994 Foley/VanDam/Finer/Huges/Phillips ICG
 Composition of 2D Transforms

• Scale + rotate object

around point P1 and P’ = T ✴ P
move to P2
- P1 to origin
- Scale
- Rotate
- Translate to P2

35
1994 Foley/VanDam/Finer/Huges/Phillips ICG
 Composition of
Transformation Matrices
• Be sure to multiple transformations in
proper order!

P’ = (T✴(R✴(S✴ (T✴ P))))

P’ = ((T✴ (R✴ (S ✴ T)))✴ P)
P’ = T ✴ P
36
 Instancing

• In modeling, we often start with a simple

object centered at the origin, oriented with
the axis, and at a standard size
• We apply an instance transformation to its
vertices to
Scale
Orient
Locate

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 37

 Shear

• Helpful to add one more basic transformation

• Equivalent to pulling faces in opposite directions

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 38

 Shear Matrix

Consider simple shear along x axis

x’ = x + y cot q
y’ = y
z’ = z

é1 cot q 0 0ù
ê0 1 0 0ú
H(q) = ê ú
ê0 0 1 0ú
ê ú
ë0 0 0 1û

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 39

 WebGL Transformations

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 41

 Objectives

• Learn how to carry out transformations in

WebGL
- Rotation
- Translation
- Scaling
• Introduce MV.js transformations
- Model-view
- Projection

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 42

 Pre 3.1 OpenGL Matrices

• In OpenGL matrices were part of the state

• Multiple types
- Model-View (GL_MODELVIEW)
- Projection (GL_PROJECTION)
- Texture (GL_TEXTURE)
- Color(GL_COLOR)
• Single set of functions for manipulation
• Select which to manipulated by
-glMatrixMode(GL_MODELVIEW);
-glMatrixMode(GL_PROJECTION);
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 43
 Why Deprecation

• Functions were based on carrying out the

operations on the CPU as part of the fixed
function pipeline
• Current model-view and projection
matrices were automatically applied to all
vertices using CPU
• We will use the notion of a current
transformation matrix with the
understanding that it may be applied in
the shaders 44
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
 Current Transformation Matrix
(CTM)
• Conceptually there was a 4 x 4 homogeneous
coordinate matrix, the current transformation
matrix (CTM) that is part of the state and is
applied to all vertices that pass down the
pipeline
• The CTM was defined in the user program and
loaded into a transformation unit
C
p p’=Cp
vertices CTM vertices

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 45

 CTM operations

• The CTM can be altered either by loading a new

CTM or by postmutiplication
Load an identity matrix: C ¬ I
Load an arbitrary matrix: C ¬ M

Load a translation matrix: C ¬ T

Load a rotation matrix: C ¬ R
Load a scaling matrix: C ¬ S

Postmultiply by an arbitrary matrix: C ¬ CM

Postmultiply by a translation matrix: C ¬ CT
Postmultiply by a rotation matrix: C ¬ C R
Postmultiply by a scaling matrix: C ¬ C S
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 46
 Rotation about a Fixed Point
Start with identity matrix: C ¬ I
Move fixed point to origin: C ¬ CT
Rotate: C ¬ CR
Move fixed point back: C ¬ CT -1

Result: C = TR T –1 which is backwards.

This result is a consequence of doing postmultiplications.

Let’s try again.

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 47

 Reversing the Order

We want C = T –1 R T
so we must do the operations in the following order

C¬I
C ¬ CT -1
C ¬ CR
C ¬ CT

Note that the last operation specified is the first

executed in the program

Recall p’ = ABCp = A(B(Cp)) // pre-multiply

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 48

 CTM in WebGL

• OpenGL had a model-view and a projection

matrix in the pipeline which were
concatenated together to form the CTM
• We will emulate this process

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 49

 Using the ModelView Matrix
• In WebGL, the model-view matrix is used to
- Position the camera
• Can be done by rotations and translations but is
often easier to use the lookAt function in MV.js
- Build models of objects
• The projection matrix is used to define the
view volume and to select a camera lens
• Although these matrices are no longer part of
the OpenGL state, it is usually a good strategy
to create them in our own applications
q = P*MV*p
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 50
 MV.js
Defines basic types
• vec2, vec3, vec4
- 2, 3 & 4 element arrays
• mat2, mat3, mat4
- 2x2, 3x3 & 4x4 matrices
• Operators
- equal, add, subtract, mult, transpose, dot, cross,
length, normalize, flatten, det, inverse
• Generators
- Rotate, RotateX, RotateY, RotateZ, Translate, Scale
- Ortho, Ortho2D, Frustum, Perspective, LookAt 51
 Rotation, Translation, Scaling
Create an identity matrix:
var m = mat4();
Multiply on right by rotation matrix of theta in degrees
where (vx, vy, vz) define axis of rotation
var r = rotate(theta, vx, vy, vz)
m = mult(m, r);
Also have rotateX, rotateY, rotateZ
Do same with translation and scaling:
var s = scale( sx, sy, sz)
var t = translate(dx, dy, dz);
m = mult(s, t);
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 52
 Example

• Rotation about z axis by 30 degrees with a fixed

point of (1.0, 2.0, 3.0)

var m = mult(translate(1.0, 2.0, 3.0),

rotate(30.0, 0.0, 0.0, 1.0));
m = mult(m, translate(-1.0, -2.0, -3.0));

• Remember that last matrix specified in the program

is the first applied

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 53

 Arbitrary Matrices

• Can load and multiply by matrices defined in

the application program
• Matrices are stored as one dimensional array of
16 elements by MV.js but can be treated as 4 x
4 matrices in row major order
• OpenGL wants column major data
• gl.unifromMatrix4f has a parameter for
automatic transpose, but it must be set to false
• flatten function converts to column-major order
which is required by WebGL functions
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 54
 Matrix Stacks

• In many situations we want to save

transformation matrices for use later
- Traversing hierarchical data structures (Chapter 9)
• Pre 3.1 OpenGL maintained stacks for each
type of matrix
• Easy to create the same functionality in JS
- push and pop are part of Array object
var stack = [ ]
stack.push(modelViewMatrix);
modelViewMatrix = stack.pop();
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 55
 Applying Transformations

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 56

 Using Transformations

• Example: Begin with a cube rotating

• Use mouse or button listener to change direction
of rotation
• Start with a program that draws a cube in a
standard way
- Centered at origin
- Sides aligned with axes
- Will discuss modeling in next lecture

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 57

 Where do we apply
transformation?
• Same issue as with rotating square
- in application to vertices
- in vertex shader: send MV matrix
- in vertex shader: send angles
• Choice between second and third unclear
• Do we do trigonometry once in CPU or for
every vertex in shader
- GPUs have trig functions hardwired in silicon

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 58

 Defining Matrices

• In javascript app, define translation and

rotation matrices as in Slides 10 → 19
• In GLSL, these matrices should be
transposed, e.g. translation matrix
1 0 0 0
0 1 0 0
• 0 0 1 0
𝑑𝑥 𝑑𝑦 𝑑𝑧 1
• See following example for rotation matrices
• S = ST for scale matrices
59
 Rotation Event Listeners
document.getElementById( "xButton" ).onclick = function () {
axis = xAxis; };
document.getElementById( "yButton" ).onclick = function () {
axis = yAxis; };
document.getElementById( "zButton" ).onclick = function () {
axis = zAxis; };
function render(){
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
theta[axis] += 2.0;
gl.uniform3fv(thetaLoc, theta);
gl.drawArrays( gl.TRIANGLES, 0, NumVertices );
requestAnimFrame( render );
}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 60
 Rotation Shader
in vec4 aPosition; // Streaming vertices and colors
in vec4 aColor; // from the application
out vec4 vColor; // Sending color to fragment shader
uniform vec3 theta; // Getting theta from application

void main() {
vec3 angles = radians( theta );
vec3 c = cos( angles );
vec3 s = sin( angles );
// Remember: these matrices are column-major!
mat4 rx = mat4( 1.0, 0.0, 0.0, 0.0,
0.0, c.x, s.x, 0.0,
0.0, -s.x, c.x, 0.0,
0.0, 0.0, 0.0, 1.0 ); 62
 Rotation Shader (cont)

mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,

0.0, 1.0, 0.0, 0.0,
s.y, 0.0, c.y, 0.0,
0.0, 0.0, 0.0, 1.0 );

mat4 rz = mat4( c.z, s.z, 0.0, 0.0,

-s.z, c.z, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0 );

vColor = aColor;
gl_Position = rz * ry * rx * aPosition;
} 63
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
 Smooth Rotation
• From a practical standpoint, we often want to
use transformations to move and reorient an
object smoothly
- Problem: find a sequence of model-view
matrices M0,M1,…..,Mn so that when they are
applied successively to one or more objects we
see a smooth transition
• For orientating an object, we can use the fact
that every rotation corresponds to part of a
great circle on a sphere
- Find the axis of rotation and angle
- Virtual trackball (see text)
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 64
 Incremental Rotation

• Consider the two approaches

- For a sequence of rotation matrices
R0,R1,…..,Rn , find the Euler angles for each
and use Ri= Riz Riy Rix
• Not very efficient
- Use the final positions to determine the axis
and angle of rotation, then increment only the
angle
• Quaternions can be more efficient than either

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 65

 Improved Rotations

• Euler Angles have problems

- How to interpolate keyframes?
- Angles aren’t independent
- Interpolation can create Gimble Lock, i.e. loss
of a degree of freedom when axes align
• Solution: Quaternions!

66
 Quaternions
• Extension of imaginary numbers from two to
three dimensions
• Requires one real and three imaginary
components i, j, k
q=q0+q1i+q2j+q3k

• Quaternions can express rotations on sphere

smoothly and efficiently. Process:
- Model-view matrix ® quaternion
- Carry out operations with quaternions
- Quaternion ® Model-view matrix

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 67

68
69
 
p = (0, x )

70
71
72
 A & B are quaternions

slerp – Spherical linear interpolation

Need to take equals steps on the sphere
73
 What about interpolating
multiple keyframes?

• Shoemake suggests using Bezier curves

on the sphere
• Offers a variation of the De Casteljau
algorithm using slerp and quaternion
control points
• See K. Shoemake, “Animating rotation
with quaternion curves”, Proc.
SIGGRAPH ’85
74