Chapter 5
Geometric Transformations
Chapter Objectives
By the end of this chapter, you will be able to:
➢Express 2D/3D translation, rotation, scaling with homogeneous matrices.
➢Build composite transformations and explain order effects.
➢Construct transformations about arbitrary pivot points.
➢Relate model, view, and projection matrices in OpenGL.
Why Geometric Transformations?
➢Position, orient, and scale objects in a scene.
➢Foundation of modeling, animation, and viewing.
➢Implemented using matrices + homogeneous coordinates in GPU pipeline.
➢Visual: 3D scene with a cube translated, rotated, scaled.
Basic 2D Transformations (Translation)
A point 𝑃 = 𝑥 𝑦
Translation by 𝑡𝑥 𝑡𝑦 :
𝑥 ′ = 𝑥 + 𝑡𝑥 , 𝑦 ′ = 𝑦 + 𝑡𝑦
Problem: No 2×2 matrix can represent translation alone → need homogeneous
coordinates.
2D Scaling (About Origin)
Scale by 𝑠𝑥 , 𝑠𝑦 :
𝑥 ′ = 𝑠𝑥 ⋅ 𝑥, 𝑦 ′ = 𝑠𝑦 ⋅ 𝑦
Matrix form (2×2):
𝑥′ 𝑠𝑥 0 𝑥
′ = 0 𝑠𝑦 𝑦
𝑦
2D Rotation (About Origin)
Rotate counter-clockwise by angle 𝜃:
𝑥 ′ = 𝑥 cos 𝜃 − 𝑦 sin 𝜃
𝑦 ′ = 𝑥 sin 𝜃 + 𝑦 cos 𝜃
Matrix form (2×2):
𝑥′ cos 𝜃 − sin 𝜃 𝑥
′ = sin 𝜃 cos 𝜃 𝑦
𝑦
Homogeneous Coordinates (Why?)
Problem: Translation is addition, rotation/scaling are multiplication — cannot
combine easily.
Solution: Add a third coordinate 𝑤.
2D point 𝑥 𝑦 → 𝑥ℎ 𝑦ℎ 𝑤 with
𝑥 = 𝑥ℎ /𝑤, 𝑦 = 𝑦ℎ /𝑤
Why used everywhere in graphics:
Translation becomes matrix multiplication.
Combine many transforms into one matrix.
Can represent points at infinity (for projections/directions).
2D Homogeneous Transformation Matrices (3×3)
𝑥
Point 𝑥 𝑦 → 𝑦
1
Translation:
1 0 𝑡𝑥
𝑇 𝑡𝑥 𝑡𝑦 = 0 1 𝑡𝑦
0 0 1
Scaling:
𝑠𝑥 0 0
𝑆 𝑠𝑥 𝑠𝑦 = 0 𝑠𝑦 0
0 0 1
Rotation:
cos 𝜃 − sin 𝜃 0
𝑅 𝜃 = sin 𝜃 cos 𝜃 0
0 0 1
𝑥′ 𝑥
Apply: 𝑦 ′ = 𝑇 ⋅ 𝑅 ⋅ 𝑆 ⋅ 𝑦
1 1
Combining Transformations & Order Effects
Composition:
𝑀total = 𝑇𝑛 ⋅ 𝑇𝑛−1 ⋯ 𝑇1
Then 𝑃′ = 𝑀total ⋅ 𝑃
Order matters! (Matrix multiplication not commutative)
Example: Rotate 90°, then translate (2,0) vs. Translate then rotate.
Numerical Example (Order Effect)
Let 𝑝 = 1 0 ,rotate 90° 𝑅, translate (2,0) 𝑇.
Case 1: 𝑇 ⋅ 𝑅
First rotate (1,0)→(0,1), then translate (0,1)→(2,1)
Case 2: 𝑅 ⋅ 𝑇
First translate (1,0)→(3,0), then rotate (3,0)→(0,3)
Result: Different final points!
3D Transformations (4×4 Matrices)
𝑥
𝑦
Extend to 3D: point 𝑥 𝑦 𝑧 →
𝑧
1
3D Translation:
1 0 0 𝑡𝑥
0 1 0 𝑡𝑦
𝑇 𝑡𝑥 𝑡𝑦 𝑡𝑧 =
0 0 1 𝑡𝑧
0 0 0 1
3D Scaling:
𝑠𝑥 0 0 0
0 𝑠𝑦 0 0
𝑆 𝑠𝑥 𝑠𝑦 𝑠𝑧 =
0 0 𝑠𝑧 0
0 0 0 1
3D Rotations About X, Y, Z Axes
Right-hand rule, CCW when looking toward origin.
About X-axis:
1 0 0 0
0 cos 𝜃 − sin 𝜃 0
𝑅𝑥 𝜃 =
0 sin 𝜃 cos 𝜃 0
0 0 0 1
About Y-axis:
cos 𝜃 0 sin 𝜃 0
0 1 0 0
𝑅𝑦 𝜃 =
− sin 𝜃 0 cos 𝜃 0
0 0 0 1
About Z-axis: (similar to 2D rotation, extended)
Fixed Points & Pivoted Transformations
Often rotate/scale about arbitrary point 𝑃𝑓 ,not origin.
2D rotation about pivot 𝑥𝑓 𝑦𝑓 :
Translate −𝑃𝑓 ( move pivot to origin)
Rotate 𝑅 𝜃
Translate +𝑃𝑓 ( move back)
𝑀 = 𝑇 𝑥𝑓 𝑦𝑓 ⋅ 𝑅 𝜃 ⋅ 𝑇 − 𝑥𝑓 − 𝑦𝑓
Scaling About Fixed Point (2D)
Similarly:
𝑀 = 𝑇 𝑥𝑓 𝑦𝑓 ⋅ 𝑆 𝑠𝑥 𝑠𝑦 ⋅ 𝑇 − 𝑥𝑓 − 𝑦𝑓
OpenGL use: To rotate an object around its own center:
Translate center → origin, rotate, translate back.
Transformations in the OpenGL Pipeline
Overall transformation:
𝑝clip = 𝑃 ⋅ 𝑉 ⋅ 𝑀 ⋅ 𝑝obj
M (Model matrix): Object space → World space
V (View matrix): World space → Camera (eye) space
P (Projection matrix): Camera space → Clip space (perspective/orthographic)
Vertex Shader Implementation (GLSL)
layout (location = 0) in vec3 inPosition;
uniform mat4 uModel;
uniform mat4 uView;
uniform mat4 uProjection;
void main()
{
gl_Position = uProjection * uView * uModel * vec4(inPosition, 1.0);
}
➢CPU sends matrices to GPU.
➢GPU applies to every vertex in parallel.
Summary Table (2D & 3D)
Transform 2D Matrix (3×3) 3D Matrix (4×4)
Translation 𝑇(𝑡𝑥 , 𝑡𝑦 ) 𝑇(𝑡𝑥 , 𝑡𝑦 , 𝑡𝑧 )
Scaling 𝑆(𝑠𝑥 , 𝑠𝑦 ) 𝑆(𝑠𝑥 , 𝑠𝑦 , 𝑠𝑧 )
Rotation (Z) 𝑅(𝜃) 𝑅𝑧 (𝜃)
Composition 𝑀 =𝑇⋅𝑅⋅𝑆 Same (4×4)
Key insight: Homogeneous coordinates unify everything.
Practical Example – Rotating a Cube
➢Model space: Cube centered at origin.
➢Model matrix: 𝑀 = 𝑇 0 0 0 ⋅ 𝑅𝑦 𝜃 ⋅ 𝑆 𝑠 𝑠 𝑠
➢View matrix: Camera at (0,0,5) looking at origin, up (0,1,0)
➢Projection matrix: Perspective (FOV 45°, near=0.1, far=100)
➢Update 𝜃 each frame → cube rotates.
Result: Smooth 3D rotation on screen.
Worked Numerical Example (Exam Practice)
Given point 𝑝 = 1 1 in 2D, apply:
➢Scale 𝑠𝑥 = 2, 𝑠𝑦 = 1
➢Rotate 90° CCW
➢Translate (1,0)
Matrices:
2 0 0 0 −1 0 1 0 1
𝑆 = 0 1 0 , 𝑅90 = 1 0 0 , 𝑇 = 0 1 0
0 0 1 0 0 1 0 0 1
𝑀 = 𝑇 ⋅ 𝑅90 ⋅ 𝑆
Compute step-by-step → final 𝑝′ = 0 2