INSTITUT FÜR INFORMATIK

MEDIENINFORMATIK
PROF. DR. ANDREAS BUTZ, CHANGKUN OU, DAVID ENGLMEIER
COMPUTERGRAFIK 1, SOMMERSEMESTER 2020

Assignment 2 - Transformations

This assignment lets you practice transformations in computer graphics. For your in-depth under-
standing of this area, it also covers a few related topics that might new to you. You should use any
resources (e.g., books, search engines, calculators, and etc.) that may help you accomplish it.

Task 1: Affine Transformation

Let P 0 = (p01 , p02 , p03 )> be transformed from P by a scaling Ts with the factors sx , sy , and sz ; then
followed by a translation Tt in the direction of vector t = (tx , ty , tz )> .

a) Write the homogeneous matrices Ts and Tt for these two operations.

b) Why do we need homogeneous coordinates? Name three reasons.

As we can see, the geometric meaning of a matrix is a transformation that maps one point to another.
With Tt and Ts , we have:

P 0 = Tt Ts P

−1
s and Tt that comply:
To find the original point P , one can multiply two inverse matrix T−1

−1 0 −1 −1
T−1
s Tt P = Ts Tt Tt Ts P = P

−1
i.e. T−1
s Tt Tt Ts = I where I is the identity matrix.

−1
c) Calculate the matrices T−1
s and Tt that inverse the transformations you wrote in a).

d) Calculate the coordinates of point P with respect to P 0 .

e) Can you switch the order of the transformations? Show your evidence by comparing Tt Ts and
Ts Tt .

In particular, given Q = (x0 + mt, y0 + nt, z0 + pt)> in the direction of v = (m, n, p)> concerning
M0 (x0 , y0 , z0 ) where t ∈ R:

f) Calculate Tt Ts Q
g) What property of affine transformation is shown in question f)? Why?

Include your answers in a Markdown file called “task01.md”.

Computer Graphics, Summer semester 2020, LMU Munich Page 1 of 7

Assignment 2 Transformations

Task 2: Rotation with Euler Angles

Assume we use a right-handed system. In the lecture, you learned an example to perform 3D rotation,
i.e. rotation by θx around x-axis. The rotation matrix is:

1 0 0
 

Rx = 0 cos θx − sin θx 
 
0 sin θx cos θx

In practice, a rotation in a three-dimensional space is more complicated to describe than a single

axis rotation. The rotation angles (θx , θy , θz ) around the axes of the global (world) coordinate system
are the so-called extrinsic Euler angles, and rotation angles (θX , θY , θZ ) around the axes of the local
(object) coordinate system (solidary with the moving body) are the so-called intrinsic Euler angles.
We use extrinsic Euler angles in this task.

a) What are the rotation matrices Ry and Rz for the Euler angles θy and θz ?
b) Calculate the rotation matrix Rx Ry Rz that represents a series of rotations around the z-, y-
and then the x-axis.
c) Can you switch the order of the transformations? Provide evidence by comparing Rx Ry Rz and
Rz Ry Rx .
d) Let θy = π2 , simplify the matrix Rx Ry Rz that you calculated in the question b).
e) Let point L = (l1 , l2 , l3 )> , calculate Rx Ry Rz L where θy = π2 . What can you conclude from the
result? (Hint: Think about where the point is after the transformation.)

Moreover, the rotation sequences regarding three different axes are also called Tait-Bryan angles. For
instance: Rz Ry Rx . However, one can also perform the rotation 3 times with respect to only two axes,
which is also called Proper Euler angles. For instance: Rx Ry Rx .

f) How many possible sequences are there for Tait-Bryan angles?

g) How many possible sequences for Proper Euler angles?

Include your answers in a Markdown file called “task02.md”.

Task 3: Rotation with Quaternions

A better and more strict way of doing rotations in a 3D space is to use quaternions, which are used
more common in practice. A quaternion is similar to a complex number but more abstract. A complex
number z = a + bi ∈ C where i2 = −1 is the imaginary unit, and a, b ∈ R. The geometric meaning
of complex number multiplication embeds a rotation. For instance, given a real number r on the
x-axis, the multiplication ri means a counterclockwise rotation of r by π2 ; and the multiplication
rii = ri2 = −r means two counterclockwise rotations, each by π2 . Intuitively, a complex number is a
point on a 2D plane.

Computer Graphics, Summer semester 2020, LMU Munich Page 2 of 7

Assignment 2 Transformations

Instead of a single imaginary unit, a quaternion q contains more than one imaginary unit:

q = a + bi + cj + dk ∈ H = span(1, i, j, k)

where i, j, k are imaginary units and

i2 = j 2 = k 2 = ijk = −1

a) Assume p = e + f i + gj + hk, calculate the quaternion multiplication of pq arithmetically.

Since a quaternion is represented as a real number and three imaginary parts, one can use a scalar-
vector pair to represent a quaternion q = (a, v) where v = (b, c, d)> ∈ R3 , and the multiplication of
two quaternions can be simplified as:

pq = (e, w)(a, v) = (ea − w> · v, ev + aw + w × v)

where p = (e, w), w = (f, g, h)> , · is the dot product, and × is the cross product. Similar to a
conjugate complex number z̄ = a − bi with respect to z = a + bi, a conjugate quaternion q̄ = (a, −v),
√
and the norm of a quaternion is defined as kqk = q̄q.

b) Assume q = (cos θ, u sin θ), θ ∈ R, prove kqk = 1 if and only if kuk = 1.

A rotation by angle θ around a given unit direction u can be expressed by q = (cos 2θ , u sin 2θ ). In
particular, given the original point v ∈ R3 and the calculation q(0, v)q̄ results in a quaternion (s, v0 )
where v0 is the destination resulting from the counterclockwise rotation around u.

c) Let q1 = (0, v), v = (0, 2, 0)> , q2 = (cos π4 , u sin π4 ), u = (1, 0, 0)> . Calculate q2 q1 q¯2 , and
q¯2 q1 q2 .
d) Calculate the quaternions qx , qy , qz that can express the rotations by the angle θ around x-axis,
y-axis and z-axis respectively.

Include your answers in a Markdown file called “task03.md”.

Task 4: Building A Scene using Three.js

Three.js1 is a JavaScript library built on top of WebGL2 to create and display 3D graphics. As a first
step into the graphics world, we use it for high-level constructions. This task helps you get familiar
with the general coding scheme in Three.js. Your final scene should similar to Figure 1.
Before you start working on building this scene, let’s understand how the scene is constructed. In this
scene, there are three bunnies above a grid plane, as well as indicators for a right-handed Cartesian
coordinate system. More precisely, each bunny consists of a mesh and a material. The coordinate
system is shown by three axes, and each axis consists of a cylinder, a cone, and a text label. Moreover,
1
https://threejs.org
2
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

Computer Graphics, Summer semester 2020, LMU Munich Page 3 of 7

 Assignment 2 Transformations

Figure 1: Final scene of the task.

a point light is located in the scene, close to the bunny on the right, and there is a camera that
captures the whole scene. You can access an online demo3 to explore and understand details of this
scene more interactively.

a) What is the scene graph of this scene?

b) What nodes in your scene graph contains transformation matrices?
c) How is the position of the bunny on the right calculated given your scene graph? Give the
needed parameters and calculate the final homogeneous transformation matrix.

To start coding and to run the code skeleton (https://github.com/mimuc/cg1-ss20), you need npm
i to install all needed dependencies, then use npm start. The command compiles your current code
skeleton and opens a new web page automatically to demonstrate your results. More conveniently, it
also automatically refreshes the web page while you are changing your implementation.
In the src folder, you should find two JS files. main.js boots the whole runtime, creates a World
object, sets up the scene, and renders it:
1 import World from './world'
2 (new World()).setupScene().render()

The World class includes the following key components:

• constructor() that initializes the renderer

3
http://www.medien.ifi.lmu.de/lehre/ss20/cg1/demo/2-transform/

Computer Graphics, Summer semester 2020, LMU Munich Page 4 of 7

 Assignment 2 Transformations

• render() that executes the render loop

• setupScene() calls setupHelpers and setupBunnies that establish the whole scene we are
about to create
• setupHelpers() includes a helper grid plane, better visualized axes and a point light that lights
up the scene
• setupBunnies loads and transforms a group of bunnies

See the code below:

1 export default class World {
2 constructor() {
3 ... // initialize renderer
4 }
5 render() {
6 ... // execute the render loop
7 }
8 setupScene() {
9 this.setupHelpers()
10 this.setupBunnies()
11 return this
12 }
13 setupHelpers() {
14 // creates many helpers
15 this.setupGridPlane()
16 this.setupAxes()
17 this.setupLight()
18 }
19 setupBunnies() {
20 // creates a group of bunnies
21 const rabbits = new Group()
22 const loader = new GLTFLoader()
23 loader.load('assets/bunny.glb', ...)
24 this.scene.add(rabbits)
25 }
26 ... // more implementations
27 }

d) Look for // TODO: in the world.js, then implement them to reproduce this scene.

Hint:

Computer Graphics, Summer semester 2020, LMU Munich Page 5 of 7

Assignment 2 Transformations

• Read the three.js documentation and get familiar with these concepts: Scene and PerspectiveCamera4 ,
OrbitControls5 , Mesh6 , Geometry7 , Material8 , and PointLight9
• Use the provided constant parameters in the code skeleton for better reproducibility of the scene
• Use debugging tools (e.g. break points) to trace the code logic if you don’t fully understand it
• Think about how to test your implementation quickly. For instance, figure out which TODO
should be implemented first

After reproducing this scene, you should be able to answer the following questions:

e) What are the two components that determine the final rendered scene in the render loop?
f) What are the two components that create a Mesh?
g) Where does the positive Y-axis point to in three.js by default?
h) What type of Euler angles are used in three.js?

Answer text questions in the README.md of the code skeleton, then include your answers and imple-
mentation in a folder called “task04”. Exclude the installed dependencies (folder node_modules) in
your submission.

4
https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
5
https://threejs.org/docs/index.html#examples/en/controls/OrbitControls
6
https://threejs.org/docs/index.html#api/en/objects/Mesh
7
https://threejs.org/docs/index.html#api/en/core/Geometry
8
https://threejs.org/docs/index.html#api/en/materials/Material
9
https://threejs.org/docs/index.html#api/en/lights/PointLight

Computer Graphics, Summer semester 2020, LMU Munich Page 6 of 7

Assignment 2 Transformations

Submission

• Participation in the exercises and submission of the weekly exercise sheets is voluntary and not
a prerequisite for participation in the exam. However, participation in an exercise is a good
preparation for the exam (the content is the content of the lecture and the exercise).
• For non-coding tasks, write your answers in a Markdown file. Markdown is a simple mark-up
language that can be learned within a minute. A recommended the Markdown GUI parser is
typora (https://typora.io/), it supports parsing embedded formula in a Markdown file. You
can find the syntax reference in its Help menu.
• Please submit your solution as a ZIP file via Uni2Work (https://uni2work.ifi.lmu.de/)
before the deadline. We do not accept group submissions.
• Your solution will be corrected before the discussion. Comment your code properly, organize
the code well, and make sure your submission is clear because this helps us to provide the best
possible feedback.
• If we discover cheating behavior or any kind of fraud in solving the assignments, you will be
withdrawn for the entire course! If that happens, you can only rejoin the course next year.
• If you have any questions, please discuss them with your fellow students first. If the problem
cannot be resolved, please contact your tutorial tutor or discuss it in our Slack channel.

Computer Graphics, Summer semester 2020, LMU Munich Page 7 of 7