computer graphics - medien.informatik.uni-muenchen.de€¦ · lmu munich cg1 ss20 | mimuc.de/cg1...
TRANSCRIPT
![Page 1: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/1.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1LMU Munich CG1 SS20 | mimuc.de/cg1 1
Summer Semester 2020
Ludwig-Maximilians-Universität München
Tutorial 2
TransformationsComputer Graphics
![Page 2: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/2.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Agenda
2
● Homogeneous Coordinates
● Affine Transformations
● 3D Rotation: Euler Angles
● 3D Rotation: Quaternions
● Scene Graph
● three.js
![Page 3: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/3.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Tutorial 2: Transformations
3
● Homogeneous Coordinates
● Affine Transformations
● 3D Rotation: Euler Angles
● 3D Rotation: Quaternions
● Scene Graph
● three.js
![Page 4: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/4.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Transformation
4
![Page 5: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/5.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Matrix multiplication is a linear transformation because:
Linear Transformations (Linear Map)
In 3D:
5
E.g. scaling:
![Page 6: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/6.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Translation??
Impossible to write in matrix multiplication:
So it is a special case. But we want a "unified theory".
6
Point or Vector??
Is this a point or a vector? We want to distinguish them.
![Page 7: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/7.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Solution: Homogeneous Coordinates
Go to a higher dimension:
● Point =
● Vector =
● Matrix =
7
![Page 8: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/8.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Homogeneous Coordinates
● vector + vector = vector
● point - point = vector
● point + vector = point (see Assignment 1 Task 1 c)
● Homogeneous form of translation (Assignment 2 Task 1 a):
● Homogeneous form of scaling (Assignment 2 Task 1 a):
8
Point remains a point(location dependent)
Vector remains a vector (location independent)
![Page 9: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/9.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 1 b) Why Homogeneous Coordinates?
● Homogeneous coordinates enable us to combine translation (and more) with linear
transformations
● Homogeneous coordinates enable us to apply non-linear transformations as matrix
multiplication, e.g. translation
● Homogeneous transformation can be inverted
… Invert???
9
![Page 10: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/10.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Inverse Transformation
Inverse transformation == "undo" transformation
10
Task 1 c)
![Page 11: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/11.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 1 c)
11
![Page 12: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/12.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 1 d)
12
![Page 13: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/13.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Tutorial 2: Transformations
13
● Homogeneous Coordinates
● Affine Transformations
● 3D Rotation: Euler Angles
● 3D Rotation: Quaternions
● Scene Graph
● three.js
![Page 14: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/14.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 1 e) Affine Transformation
14
Affine = Linear transformation + Translation. Is it linear map first or translation first?
⇒ equal if and only if Ts is an identity matrix ⇒ Order matters! (Trivial: matrix multiplication has no commutation)
Affine transformations always apply linear map first then translation
![Page 15: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/15.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 1 f) Parametric Equation
A transformed line remains a line on the direction of
concerning
15
The given Q is on a line ⇒ The given coordinates represent a parametric equation of a line
![Page 16: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/16.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 1 g) Property of Affine Transformation
Collinearity: An affine transformed line remains a line in the direction of
concerning
16
Affine transformation
![Page 17: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/17.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
More Properties of Affine Transformation
Collinearity: Lines remain a line
Parallelism: Parallels remain parallel
Convexity: Convex curves remain a convex curve
⇒ (line) proportion preserving
17
![Page 18: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/18.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Types of Transformations
● Linear: Scale, rotation, reflection, shear, ...
● Non-linear: translation, ...
● Affine: linear transformation + translation
○ line proportion preserving
● Isometric: Translation, rotation, reflection
○ distance preserving
● Non-affine? Not now.
18
![Page 19: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/19.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Tutorial 2: Transformations
19
● Homogeneous Coordinates
● Affine Transformations
● 3D Rotation: Euler Angles
● 3D Rotation: Quaternions
● Scene Graph
● three.js
![Page 20: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/20.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Euler Angles
● A rotation around axes can be expressed using the so called Euler Angles
● Depending on the reference, there are Extrinsic and Intrinsic Euler Angles
○ Extrinsic rotation has a fixed reference frame
○ Intrinsic rotation has a dynamic reference frame (why?)
20
Extrinsic(rotation around world axes)
Intrinsic(rotation around local axes)
![Page 21: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/21.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 2 a) Extrinsic Rotation
Formulas taken from lecture slides:
21
![Page 22: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/22.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 2 b) and c)
You learned order matters in Task 1 e), so don't do this:
22
You just need a counterexample, do this:
The element on the first row and first column:
if and only if
This is generally not true. Thus: No, we can't switch the order.
![Page 23: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/23.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 2 f) and g) Euler Angle Sequences
● Depends on the order of rotation, there are Tait-Bryan angles or Proper Euler angles
● Tait-Bryan angles
○ 6 possible sequences: xyz, xzy, yxz, yzx, zxy, zyx.
● Proper Euler angles
○ 6 possible sequences: xyx, xzx, yxy, yzy, zxz, zyz.
What about xxy, xxz, yyx, yyz, zzx, zzy, xyy, xzz, yxx, yzz, zxx, zyy?
xx, yy, zz can be merged to a single X, Y, or Z rotation.
These orders can collapse to xy, xz, yx, yz, zx, zy (which are not three composed rotations)
23
![Page 24: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/24.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 2 d)
If then
24
What's the geometric meaning behind it?
![Page 25: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/25.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 2 d) Gimbal Lock
25
No matter what you do with , you will always land on a the same plane,
the x-axis is fixed to z, meaning a single axis rotation.
https://en.wikipedia.org/wiki/Gimbal_lock
Q: Is a reference frame influencing our result?
A: No, the calculation process is irrelevant to the reference frame.
This is called the "Gimbal Lock".
It is one of the limitations of Euler angles.
![Page 26: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/26.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Tutorial 2: Transformations
26
● Homogeneous Coordinates
● Affine Transformations
● 3D Rotation: Euler Angles
● 3D Rotation: Quaternions
● Scene Graph
● three.js
![Page 27: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/27.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Complex Numbers
● Consist of a real part, and an imaginary part:
● Complex number multiplication represents a 2D rotation, simple case:
27
● Complex numbers looks like points on 2D plane. What's the equivalent in 3D?
![Page 28: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/28.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Quaternions
A quaternion has one real, three imaginary parts:
Hard to imagine something in 4D!
Let's do the math that can help us to understand more what's going on here.
28
![Page 29: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/29.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
29
![Page 30: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/30.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
30
![Page 31: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/31.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
31
![Page 32: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/32.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
32
![Page 33: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/33.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
33
![Page 34: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/34.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
34
![Page 35: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/35.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
35
![Page 36: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/36.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
36
![Page 37: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/37.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
37
![Page 38: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/38.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
38
![Page 39: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/39.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
39
![Page 40: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/40.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 a)
40
Q: Why am I doing this?
A: I know, it's complicated. Be patient.
![Page 41: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/41.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Quaternion Multiplication
41
Let's simplify this:
![Page 42: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/42.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Quaternion Multiplication
42
Let's simplify this:
![Page 43: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/43.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Quaternion Multiplication
43
Let's simplify this:
![Page 44: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/44.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Quaternion Multiplication
44
![Page 45: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/45.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 b)
45
The imaginary part:
The real part:
The multiplication result in a real number:
![Page 46: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/46.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 b) Unit Quaternion
46
A quaternion with unit norm is the so called unit quaternion.
![Page 47: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/47.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Rotation with Quaternions
47
Rotation in 3D can be expressed using unit quaternion.
Given unit axis u, angle θ, unit quaternion q can represent a rotation.
angle axis
Be careful about the angle: the rotation is expressed by multiplication of two unit quaternions,then for one quaternion, θ is divided by 2 and results in θ/2
![Page 48: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/48.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 c)
The meaning of those quaternions is quite clear.
means rotate 90 degrees on the x-axis
The clockwise rotation
The counterclockwise rotation
48
![Page 49: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/49.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 3 d)
Task 3 c) already tells you the quaternion for the rotation around the x-axis:
Rotation around y-axis:
Rotation around z-axis:
49
![Page 50: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/50.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Euler Angles v.s. Quaternions
50
● Quaternions are much less intuitive than Euler angles.
● However, the rotation around an arbitrary direction is much easier to express using
quaternions than using Euler angles.
(Think about how to determine Euler angles in this case)
![Page 51: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/51.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Tutorial 2: Transformations
51
● Homogeneous Coordinates
● Affine Transformations
● 3D Rotation: Euler Angles
● 3D Rotation: Quaternions
● Scene Graph
● three.js
![Page 52: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/52.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
What's in the scene?
52
![Page 53: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/53.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1 53
Scene
Camera Light Rabbits Axes Plane
Rabbit 1 Rabbit 2 Rabbit 3
Rabbit Mesh
Geometry Material
X Y Z
Axis
Cylinder Cone
Geometry Material Geometry Material
Geometry Material
Text
Geometry Material
Task 4 a)
![Page 54: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/54.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1 54
● Each node has its own transformation matrix
● If a node is transformed, all child nodes are also transformed
Task 4 b)
![Page 55: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/55.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1 55
Task 4 c)
Scene
Camera Light Light Rabbits Axes Plane
Rabbit 1 Rabbit 2 Rabbit 3
Rabbit Mesh
Geometry Material
X Y Z
Axis
Cylinder Cone
Geometry Material Geometry Material
Geometry Material
Text
Geometry Material
● The position of an object is calculated by multiplying it with all transformations along
the path from the root:
● Assume the rabbit 3 is translated from rabbit 2 (origin), then the translation is from
origin along with x-axis, then the transformation matrix is
![Page 56: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/56.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Tutorial 2: Transformations
56
● Homogeneous Coordinates
● Affine Transformations
● 3D Rotation: Euler Angles
● 3D Rotation: Quaternions
● Scene Graph
● three.js
![Page 58: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/58.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Why didn't we choose XYZ?
● "JavaScript is a joke!"
● "Unity is more popular!"
● "I don't want write a single program!"
● …
● OpenGL/WebGL/Vulkan are cross platform
● DirectX for Microsoft, and Metal for Apple
● Unity, Unreal, … are engines build on top of them
● …
● You are in this course and we use three.js. That's it.
58
![Page 59: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/59.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
three.js
59
The core concepts in three.js are:
● Renderer
● Scene
● Camera
● Mesh
● Geometry
● Material
● Light
● ...
![Page 60: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/60.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Renderer and Scene
constructor() {
const container = document.body
...
// 1. create renderer and add to the container
this.renderer = new WebGLRenderer({ antialias: true })
container.appendChild(this.renderer.domElement)
// 2. create scene
this.scene = new Scene()
...
}60
● A Renderer is created by WebGLRenderer, and renders your scene in the browser
● HTML manages everything using DOM tree, it's necessary to add renderer DOM element
to the document.body. Don't pay too much attention to how DOM works.
● A Scene is created by Scene, and represents the scene graph
● The following code snippet is provided in the code skeleton:
Q: What happens if you don't pass
{antialias: true} to the renderer?
![Page 61: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/61.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 4 d)
We have nothing except we create it.
61
![Page 62: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/62.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
What should be implemented first?
Our TODOs:
● Camera
● OrbitControl
● Performance monitor
● Render loop
● Grid plane
● Axes
● Light
● Rabbits
62
"eyes", ability to see
Your "brain": processes what you got
An object, tells where you stand on
Reference, tells where are you
Lights up everything
Move around
Am I slow?
Living beings
![Page 63: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/63.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
What should be implemented first?
Our TODOs:
● Camera
● OrbitControl
● Performance monitor
● Render loop
● Grid plane
● Axes
● Light
● Rabbits
63
1. "eyes", ability to see
2. Your "brain": processes what you got
3. An object, tells where you stand on
Reference, tells where are you
Lights up everything
Move around
Am I slow?
Living beings
![Page 64: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/64.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Camera
● There are many different types of camera (later)
● We use PerspectiveCamera in this task
● Anything inside the defined frustum will be rendered
64
![Page 65: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/65.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
constructor() {
...
const cameraParam = {
fov: 50,
aspect: window.innerWidth / window.innerHeight,
near: 0.1,
far: 2000,
position: new Vector3(10, 15, 25),
lookAt: new Vector3(0, 0, 0),
}
// TODO: create a camera
this.camera = new PerspectiveCamera(
cameraParam.fov, cameraParam.aspect, cameraParam.near, cameraParam.far)
this.camera.position.copy(cameraParam.position)
this.camera.lookAt(cameraParam.lookAt)
...
}
1. Create A Camera
65
![Page 66: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/66.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Animation Frames
● An animation is a series of rendered images, requestAnimationFrame is a request to
the browser that you want animate something.
● The animate callback will be executed by the browser if anything is updated (loop occurs)
● The Renderer.render() draws the scene according to the camera's definition
66
render() {
this.renderer.setSize(window.innerWidth, window.innerHeight)
const animate = () => {
window.requestAnimationFrame(animate)
// TODO: complete render loop for renderer
this.renderer.render(this.scene, this.camera)
}
animate()
}
2. Implement Render Loop
![Page 67: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/67.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
setupGridPlane() {
const gridParam = {
size: 50,
divisions: 100,
materialOpacity: 0.25,
materialTransparency: true,
}
// TODO: create a GridHelper then add it to the scene.
const helper = new GridHelper(gridParam.size, gridParam.divisions)
helper.material.opacity = gridParam.materialOpacity
helper.material.transparent = gridParam.materialTransparency
this.scene.add(helper)
}
3. GridPlane
67
● three.js offers us several helpers to debug our rendering
● GridPlane creates a plane with grids
![Page 68: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/68.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Can you see the ground? Barely...
68
![Page 69: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/69.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
What we have so far...
69
WebGLRenderer PerspectiveCamera
Scene
GridPlane
![Page 70: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/70.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
What should be implemented then?
Our TODOs:
● Camera
● OrbitControl
● Performance monitor
● Render loop
● Grid plane
● Axes
● Light
● Rabbits
70
1. "eyes", ability to see
2. Your "brain": processes what you got
3. An object, tells where you stand on
Reference, tells where are you
2. Lights up everything
Move around
Am I slow?
1. Living beings
![Page 71: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/71.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Mesh, Geometry and Material
● A Mesh represents a drawing Geometry with a specific Material
● Geometry includes vertices, edges, and etc
● A Material represents the properties of its corresponding geometry, e.g. rule of how the
object is colored
71
Rabbit Mesh
RabbitGeometry RabbitMaterial
![Page 72: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/72.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
1. Create Rabbits setupBunnies() {
const rabbits = new Group()
const loader = new GLTFLoader()
loader.load('assets/bunny.glb', (model => {
...
// TODO: duplicate, scale and translate the bunny model,
// then add it to the rabbits group.
const mesh = model.scene.children[0]
mesh.scale.copy(scale)
rabbits.add(mesh,
mesh.clone().translateOnAxis(translate.axis, translate.distance),
mesh.clone().translateOnAxis(translate.axis, -translate.distance)
)
}).bind(this))
this.scene.add(rabbits)
}
72
"I can not see you without light"
![Page 73: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/73.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Light
● Light represents different kinds of lights (later)
● PointLight basic properties: color, strength/intensity, maximum range (distance)
73
![Page 74: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/74.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
2. Lights up setupLight() {
...
// TODO: 1. create a PointLight and add to the lightGroup
const light = new PointLight(lightParams.color, lightParams.intensity, lightParams.distance);
light.position.copy(lightParams.position)
lightGroup.add(light)
// TODO: 2. create a PointLightHelper and add to the lightGroup
const helper = new PointLightHelper(light)
lightGroup.add(helper)
this.scene.add(lightGroup)
}
74
"Let there be light"
![Page 75: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/75.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
What should be implemented then?
Our TODOs:
● Camera
● OrbitControl
● Performance monitor
● Render loop
● Grid plane
● Axes
● Light
● Rabbits
75
1. "eyes", ability to see
2. Your "brain": processes what you got
3. An object, tells where you stand on
Reference, tells where are you
2. Lights up everything
Move around
Am I slow?
1. Living beings
![Page 76: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/76.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
OrbitControl & Performance Monitor constructor() { ...
// TODO: 4. setup orbit controls
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
// TODO: 5. setup performance monitor
this.stats = new Stats()
this.stats.showPanel(0) // fps
container.appendChild(this.stats.domElement)
}
render() { ...
const animate = () => {
window.requestAnimationFrame(animate)
this.controls.update()
this.stats.update()
this.renderer.render(this.scene, this.camera)
}
animate()
}
76
OrbitControls
● Orbits the camera around a target● Update camera position in render loop
Performance Monitor
● Things we care about○ FPS: Frame per second○ MS: Milliseconds needed to render a frame○ ...
![Page 77: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/77.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
OrbitControl & Performance Monitor
77
![Page 78: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/78.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Axes setupAxes() {
// You can comment out the following two lines to get an ugly
// three.js built-in axes.
const axesHelper = new AxesHelper(10)
this.scene.add(axesHelper)
...
}
78
"Doesn't look like 'real' axes"
![Page 79: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/79.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
(Visually) Better Axes createAxis(label, euler, direction, color) {
...
// TODO: 1. create the axis cylinder, use CylinderGeometry and MeshBasicMaterial
const line = new Mesh(
new CylinderGeometry(radius, radius, length, segments),
new MeshBasicMaterial({ color: color })
)
line.setRotationFromEuler(euler)
axis.add(line)
...
return axis
}
79
"Bigger"
Mesh
CylinderGeometry MeshBasicMaterial
![Page 80: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/80.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
(Visually) Better Axes createAxis(label, euler, direction, color) {
...
// TODO: 2. create the axis arrow (i.e. the cone), use CylinderGeometry and MeshBasicMaterial
const arrow = new Mesh(
new CylinderGeometry(0, radius*2, height, segments),
new MeshBasicMaterial({ color: color })
)
arrow.translateOnAxis(direction, length/2)
arrow.setRotationFromEuler(euler)
axis.add(arrow)
...
return axis
}
80
"Little Arrow"
Mesh
CylinderGeometry MeshBasicMaterial
![Page 81: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/81.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
(Visually) Better Axes createAxis(label, euler, direction, color) {
...
// TODO: 3. create the text label, use TextGeometry and Font
const text = new Mesh(
new TextGeometry(label, {
font: new Font(fontParam.object),
size: fontParam.size,
height: fontParam.height,
}),
new MeshBasicMaterial({ color: color }),
)
text.translateOnAxis(direction, length/2 + 0.5)
text.translateOnAxis(new Vector3(-1, 0, 0), 0.2)
text.translateOnAxis(new Vector3(0, -1, 0), 0.25)
axis.add(text)
return axis
}
81
"Text Description"
Mesh
TextGeometry MeshBasicMaterial
![Page 82: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/82.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Final
82
![Page 83: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/83.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Task 4
If you implemented the scene, these questions can be easily answered:
e) Camera and Scene
f) Geometry and Material
g) Up
h) intrinsic Tait-Bryan angles, default XYZ.
83
![Page 84: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/84.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Why is 3D programming supposed to be (ultra-)difficult?● Math is absolutely important and really hard to most of people
● Geometric imagination is sometimes non-trivial, i.e. viewing 3D through 2D
● Details tuning is (super) time consuming, e.g. create an eyeball that is not just a sphere
● Runtime performance is critical if you desire real-time rendering, each frame should be rendered in
1s/60fps ≈ 16.67 ms
● Testing graphics can be painful, and most of the time need a person to "see" what went wrong
● No common industry standard or agreement, i.e. different platform with different APIs (DirectX v.s.
Metal), and massive API changes over time (OpenGL: 1.1 != 2.1 != 3.3 != 4.6)
● Interdisciplinary. You might also need knowledge in physics, biology, and … more!
Don't panic! 🙂84
![Page 85: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/85.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Take Away
● Order of transformation matters
● 3D Rotation with Euler angles is intuitive but with limitations
● 3D Rotation with quaternion is non-trivial but simple/powerful to express
● In 3D programming, always think about how to test your implementation quickly
● Learn to read development documents
85
![Page 86: Computer Graphics - medien.informatik.uni-muenchen.de€¦ · LMU Munich CG1 SS20 | mimuc.de/cg1 Euler Angles A rotation around axes can be expressed using the so called Euler Angles](https://reader033.vdocument.in/reader033/viewer/2022052806/605ffa8e6271c50207110bcc/html5/thumbnails/86.jpg)
LMU Munich CG1 SS20 | mimuc.de/cg1
Thanks! What are your questions?
86