180

# 3. Coordinate transform April 06, 2021

## Transcript

1. 3. Coordinate transform
Tatsuya Yatagawa

2. Results from last practice
Computer Graphics Course @Waseda University
But how large is the region inside the window?
(-0.25, -0.25)
(-0.25, 0.25)
(0.25, -0.25)
(-0.5, 0.5)
(-0.5, -0.5) (0.5, -0.5)
(-0.75, 0.75)
(-0.75, -0.75) (0.75, -0.75)
Indeed, size of triangle changed in response to positions.

3. Default coordinate system

Range for default window

X-coordinate: from -1 to 1.

Y-coordinate: from -1 to 1.
Computer Graphics Course @Waseda University
-1
-1
1
1

4. Coordinate system in OpenGL

Window range is always the same!

You need to transform drawn objects to make them inside

To show [-2, 2] x [-2, 2] range
→ Halve object sizes

To show [0, 2] x [0, 2] range
→ Translate object by (-1, -1)
Computer Graphics Course @Waseda University

5. Basic methods for coordinate transform

glScalef(x,y,z)

Scale sizes along x, y, and z axes

glTranslatef(x,y,z)

Translate along x, y, and z axes

glRotatef(theta,x,y,z)

Rotate with angle “theta” along an axis (x, y, z)
Computer Graphics Course @Waseda University

6. Let’s try

Scaling

Note

L20-21: Magic spell for starting coordinate transformation
(elaborate later)
Computer Graphics Course @Waseda University
New

7. Result

Triangle is scaled
Computer Graphics Course @Waseda University
Scaled Original

8. Let’s try

Translation
Computer Graphics Course @Waseda University
New

9. Result

Triangle is translated to upper right direction
Computer Graphics Course @Waseda University
Translated Original

10. Let’s try

Rotation
Computer Graphics Course @Waseda University
New

11. Result

Triangle is rotated on screen
Computer Graphics Course @Waseda University
Rotated Original

12. OK, but it’s too simple!

For more complicated transform

e.g.) Center is at (15, 15). Window size is 10 x 10.
→ It’s better if visible range can be directory specified.

glOrtho(left,right,bottom,top,near,far)

More direct and easier to use

For above case, visible range can be specified with:
glOrtho(10.0f, 20.0f, 10.0f, 20.0f, -1.0f, 1.0f)
Computer Graphics Course @Waseda University

13. Let’s try

Specify visible range directly
Computer Graphics Course @Waseda University
New
New

Note

After visible range specified, coordinates are also updated.

14. Result

Properly shown even after coordinate updates!
Computer Graphics Course @Waseda University
(12.0, 12.0)
(12.0, 18.0)
(18.0, 12.0)

15. Step forward to 3D

Triangle is 2D object? No, it’s 3D!
Computer Graphics Course @Waseda University
Z-coordinate is specified!!

16. What’s happening now?

We see triangle from the direct front
Computer Graphics Course @Waseda University

17. What’re needed for drawing 3D objects?

Like what we do when taking a photo
Computer Graphics Course @Waseda University
3D shape of the object
Camera position/direction
(camera extrinsic)
Properties of the camera (camera intrinsic)
• Projection to camera sensor
• Sensor position and size

18. What’re needed for drawing 3D objects

3D shape of the object

Specify 3D coordinates instead of 2D ones
(Strictly, 2D position in OpenGL is also 3D)

Camera position and direction

From and to where camera looks at the scene?

Projection to camera sensor (elaborate later)

There’re several projection methods

Sensor position and size

Projected objects are rasterized for discrete pixels on display
Computer Graphics Course @Waseda University

19. What’re needed for drawing 3D objects

3D shape of the object

Specify 3D coordinates instead of 2D ones
(Strictly, 2D position in OpenGL is also 3D)

Camera position and direction

From and to where camera looks at the scene?

Projection to camera sensor (elaborate later)

There’re several projection methods

Sensor position and size

Projected objects are rasterized for discrete pixels on display
Computer Graphics Course @Waseda University

20. Specify 3D positions

You can use either of …

glVertex3f(float x, float y, float z)

It’s the same as glVertex2f but take XYZ coordinates.

glVertex3fv(float *vp):

Specify with an array of 3 float values

To this end, specify the pointer to the first element
Computer Graphics Course @Waseda University

21. What’re needed for drawing 3D objects

3D shape of the object

Specify 3D coordinates instead of 2D ones
(Strictly, 2D position in OpenGL is also 3D)

Camera position and direction

From and to where camera looks at the scene?

Projection to camera sensor (elaborate later)

There’re several projection methods

Sensor position and size

Projected objects are rasterized for discrete pixels on display
Computer Graphics Course @Waseda University
These two are specified by matrices

22. Matrices inside OpenGL

Modelview matrix

Product of “model matrix” and “view matrix”

Model matrix:
General object transform (typically used for animation)

View matrix:
Make camera position to the origin (and others)

Projection matrix

Transform 3D coordinates to those on 2D screen

Two typical projections:

Orthographic projection → Typically used for industrial design

Perspective projection → Movie, video games
Computer Graphics Course @Waseda University

23. Matrices inside OpenGL
Computer Graphics Course @Waseda University
x
y
z
x
y
z
Camera space
World space
Screen space
View matrix (camera matrix)
projection matrix

24. View matrix (a.k.a. camera matrix)

Transform object positions to camera-centric coords.

Object’s own coordinate system = World-space coordinates

Camera-centric coordinate systems = Camera-space coordinates
Computer Graphics Course @Waseda University
x
y
z
x
y
z
Camera space
World space
Be careful that backward direction corresponds to positive z!

25. Orthographic and perspective projections

Orthographic*1
Computer Graphics Course @Waseda University

Perspective*1
Project vertices along view direction Project vertices along lines to
camera center
*1) 引用: コンピュータグラフィックス [改訂新版] (コンピュータグラフィックス編集委員会 著) P. 40, 41

26. How to specify matrices?

glMatrixMode

Specify type of matrix to be specified

Modelview matrix: GL_MODELVIEW

Projection matrix: GL_PROJECTION

Initialize a matrix with an identity matrix

Typically, it’s called immediately after glMatrixMode.
Computer Graphics Course @Waseda University

27. Specify view matrix

gluLookAt (9 arguments, need GLU)

1st-3rd: Camera location

4th-6th: Location at which camera looks

7th-9th: Upward direction of camera
(not always same with camera y-axis)
Computer Graphics Course @Waseda University
x
y
z
x
y
z
Camera center
(1st-3rd args)
Camera target
(4th-6th args)
Upward direction
(7th-9th args)

28. Orthographic projection in OpenGL

glOrtho

Use orthographic projection matrix as projection matrix

Arguments:

1st, 2nd: visible range for x-direction

3rd, 4th: visible range for y-direction

5th, 6th: visible range for z-direction
Computer Graphics Course @Waseda University
left
right

29. Perspective projection in OpenGL

glFrustum

Use perspective projection matrix as projection matrix

“frustrum” means truncated four-sided cone.

Arguments:

1st, 2nd: visible range for x-direction at near clip plane

3rd, 4th: visible range for y-direction at near clip plane

5th, 6th: visible range for z-direction
Computer Graphics Course @Waseda University
引用: コンピュータグラフィックス [改訂新版] (コンピュータグラフィックス編集委員会 著) P. 40, 41
left
right

30. Perspective projection in OpenGL

gluPerspective (need GLU)

Use perspective projection matrix as projection matrix

Arguments:

Vertical field of view (FOV)

Aspect ratio (of window width to window height)

Distance to near clipping plane

Distance to far clipping plane
Computer Graphics Course @Waseda University
引用: コンピュータグラフィックス [改訂新版] (コンピュータグラフィックス編集委員会 著) P. 40, 41
aspect = W/H

31. Use GLU with GLFW

GLU (OpenGL Utility)

Before include “glfw3.h”, specify a macro: GLFW_INCLUDE_GLU
Then, ”glu.h” is internally included in “glfw3.h”

Code snippet
Computer Graphics Course @Waseda University

32. What’re needed for drawing 3D objects

3D shape of the object

Specify 3D coordinates instead of 2D ones
(Strictly, 2D position in OpenGL is also 3D)

Camera position and direction

From and to where camera looks at the scene?

Projection to camera sensor (elaborate later)

There’re several projection methods

Sensor position and size

Projected objects are rasterized for discrete pixels on display
Computer Graphics Course @Waseda University

33. Viewport transform

Specify where on the display scene will be shown

Before: each of x, y is in [-1, 1] (square region)

After: 2D pixel coordinates on the display (rectangular region)

glViewport

Arguments:

1st, 2nd: XY-coods of lower-left corner on the display

3rd, 4th: width/height of drawing area

To draw over entire display, specify:

glViewport(0, 0, WIN_WIDTH, WIN_HEIGHT)
Computer Graphics Course @Waseda University
x
y
z
Camera space
Screen space
[-1, 1] x [-1, 1]
Viewport
transform

Reference code

https://github.com/tatsy/OpenGLCourseJP/tree/master/src
/coordinate_transformation

3D position of a regular cube is specified

Transformation matrices, and viewport transform are applied
Computer Graphics Course @Waseda University

35. Specify 3D points of a regular cube

Center is at origin, size along three axes are all 2.

Copy & paste the definition from reference code
Computer Graphics Course @Waseda University

36. Specify 3D points of a regular cube

Code
Computer Graphics Course @Waseda University

37. Specify transformation matrices
Computer Graphics Course @Waseda University

38. Result
Computer Graphics Course @Waseda University
Something wrong? Let’s check colors of faces closer to camera.

39. Depth testing

Check front to back order of faces from camera

Algorithms for hidden face removal:

Ray casting

Depth sort method

Scanline method

Z-buffer method

In OpenGL, Z-buffer method is used because:

Its implementation is quite simplicity

It’s easy to be parallelized using GPU
Computer Graphics Course @Waseda University

40. Z-buffer method

Check front-to-back order “pixel by pixel”
Computer Graphics Course @Waseda University
*1) 引用: コンピュータグラフィックス [改訂新版] (コンピュータグラフィックス編集委員会 著) P. 133, 134
Store front-most Z value
to “depth buffer” (Z-buffer)
Update Z-value on buffer
when closer object drawn

41. Enable depth testing

Reference code

https://github.com/tatsy/OpenGLCourseJP/tree/master/src
/depth_testing

Enable depth testing

Clear depth buffer along with color buffer
Computer Graphics Course @Waseda University

42. Result
Computer Graphics Course @Waseda University
Frontal faces are now drawn property!

43. Practice

Practice 3-1

Check what happens if camera position (and other parameters)
for gluLookAt is changed (test at least three different
positions).

Practice 3-2

Check what happens if parameters for glOrtho and glFrustum
are changed (test at least three different parameters for each of
them).
Computer Graphics Course @Waseda University

44. Practice
★Practice 3-3

Calculate matrices equivalent to glOrtho and glFrustum. Then
use them with glMultMatrixf.
★Practice 3-4

Calculate a matrix equivalent to gluLookAt and
gluPerspective. Then use them with glMultMatrixf.
★Practice 3-5

Discuss the difference of “orthographic projection” and
“perspective projection” from the aspect of their properties and
applications.
Computer Graphics Course @Waseda University

45. Transformation matrices in OpenGL

Transformation is defined by 4x4 matrix

Homogeneous coordinates: 4D vector for 3D position

Add redundant 4th dimension, representing 3D position as:
(𝑥, 𝑦, 𝑧, 𝑤)

Position at 3D Euclidean space is represented as: 𝑥
𝑤
, 𝑦
𝑤
, 𝑧
𝑤

4x4 matrix covers:

Linear transform: 3x3 matrix

Rigid transform: 3x3 Unitary + 1x3 translation

Affine transform: 3x3 matrix + 1x3 translation

Homography transform: 4x4 matrix
Computer Graphics Course @Waseda University

46. Properties of transformations

Properties preserved by transformations

Affine transform (3x4 matrix): preserve parallel lines

Homography transform (4x4 matrix): preserve straight line

How is transformation applied?
Computer Graphics Course @Waseda University
3D position is obtained by dividing 𝑥, 𝑦, 𝑧 coordinates with 𝑤
𝑥′
𝑦′
𝑧′
𝑤′
= 𝐌
𝑥
𝑦
𝑧
1
𝑥′′, 𝑦′′, 𝑧′′ =
𝑥′
𝑤′
,
𝑦′
𝑤′
,
𝑧′
𝑤′

47. Example of transformations

Translation
Computer Graphics Course @Waseda University
1 0 0 𝑡𝑥
0 1 0 𝑡𝑦
0 0 1 𝑡𝑧
0 0 0 1
𝑥
𝑦
𝑧
1
=
𝑥 + 𝑡𝑥
𝑦 + 𝑡𝑦
𝑧 + 𝑡𝑧
1
Is it possible to achieve translation with 3x3 matrix? Answer is No.

48. Derivation of projection matrix (glOrtho)

Rectangular is transformed to regular cube
Computer Graphics Course @Waseda University
left
right
Visible volume: rectangular
Screen space: regular cube −1, +1 3

49. Derivation of projection matrix (glOrtho)

Care about z-direction (backward is positive), then

𝑥scn
= 2(𝑥cam−𝑙)
𝑟−𝑙
− 1 = 2
𝑟−𝑙
𝑥cam
− 𝑟+𝑙
𝑟−𝑙

𝑦scn
= 2(𝑦cam−𝑏)
𝑡−𝑏
− 1 = 2
𝑡−𝑏
𝑦cam
− 𝑡+𝑏
𝑡−𝑏

𝑧scn
= −2(𝑧cam−𝑛)
𝑓−𝑛
− 1 = − 2
𝑓−𝑛
𝑧cam
− 𝑓+𝑛
𝑓−𝑛

Rewriting to matrix form, we get:
Computer Graphics Course @Waseda University
𝑥scn
𝑦scn
𝑧scn
1
=
2
𝑟 − 𝑙
0 0 −
𝑟 + 𝑙
𝑟 − 𝑙
0
2
𝑡 − 𝑏
0 −
𝑡 + 𝑏
𝑡 − 𝑏
0 0 −
2
𝑓 − 𝑛

𝑓 + 𝑛
𝑓 − 𝑛
0 0 0 1
𝑥cam
𝑦cam
𝑧cam
1
Orthographic projection matrix

50. Derivation of projection matrix (glFrustum)

Frustum in camera space is converted to regular cube

Frustrum in camera-space is converted to regular box
Computer Graphics Course @Waseda University
Y-axis
Z-axis
𝐱cam 𝐱scn
1
1
-1
-1
Camera space: frustum
Screen space: regular cube
Y-axis
Z-axis
near far

51. Derivation of projection matrix (glFrustum)

Derive X and Y coordinates

According to figure below,
Computer Graphics Course @Waseda University
{X, Y}-axis
Z-axis
𝐱cam
Length=2 (from -1 to +1)
in screen-space
𝐱scn
1
1
-1
-1
𝑥scn
=
𝑛𝑥cam
−𝑧cam
− 𝑙 ⋅
2
𝑟 − 𝑙
− 1 =
2𝑛
−𝑧cam
𝑟 − 𝑙
𝑥cam

𝑟 + 𝑙
𝑟 − 𝑙
{X, Y}-axis
Z-axis

52. Derivation of projection matrix (glFrustum)

X and Y coordinates:
Computer Graphics Course @Waseda University
𝑥scn
=
2𝑛
−𝑧cam
𝑟 − 𝑙
𝑥cam

𝑟 + 𝑙
𝑟 − 𝑙
𝑦scn
=
2𝑛
−𝑧cam
𝑡 − 𝑏
𝑦cam

𝑡 + 𝑏
𝑡 − 𝑏
𝐱scn
= 𝑥scn
′ , 𝑦scn
′ , 𝑧scn
′ , −𝑧cam

𝑥scn

−𝑧cam
,
𝑦scn

−𝑧cam
,
𝑧scn

−𝑧cam

With homogeneous coordinates:
𝑥𝑠𝑐𝑛
′ =
2𝑛
𝑟 − 𝑙
𝑥cam
+
𝑟 + 𝑙
𝑟 − 𝑙
𝑧cam
, 𝑦𝑠𝑐𝑛
′ =
2𝑛
𝑡 − 𝑏
𝑦cam
+
𝑡 + 𝑏
𝑡 − 𝑏
𝑧cam

53. Derivation of projection matrix (glFrustum)

So far, projection matrix is like:
Computer Graphics Course @Waseda University
𝑥scn

𝑦scn

𝑧scn

−𝑧cam
=
2𝑛
𝑟 − 𝑙
0
𝑟 + 𝑙
𝑟 − 𝑙
0
0
2𝑛
𝑡 − 𝑏
𝑡 + 𝑏
𝑡 − 𝑏
0
0 0 𝐴 𝐵
0 0 −1 0
𝑥cam
𝑦cam
𝑧cam
1
(∵ 𝑧scn
is independent of 𝑥cam
and 𝑦cam
)
𝑧scn
=
𝐴𝑧cam
+ 𝐵
−𝑧cam
= −𝐴 −
𝐵
𝑧cam
→ A and B in the matrix are still unknown

According to above formula, Z coordinate should be:

54. Derivation of projection matrix (glFrustum)

Derive Z coordinate

𝑧scn
= −1 at 𝑧near
= 𝑛

𝑧scn
= +1 at 𝑧far
= 𝑓
Computer Graphics Course @Waseda University
Y-axis
Z-axis
𝐱cam
Camera space
𝑧far
𝑧near
−𝐴 −
𝐵
𝑛
= −1
−𝐴 −
𝐵
𝑓
= +1
𝐵 = −
2𝑓𝑛
𝑓 − 𝑛
𝐴 = −
𝑓 + 𝑛
𝑓 − 𝑛

Solving above system, we have:

55. Derivation of projection matrix (glFrustum)

Eventually, we have a matrix for glFrustum:
Computer Graphics Course @Waseda University
𝑥scn

𝑦scn

𝑧scn

−𝑧cam
=
2𝑛
𝑟 − 𝑙
0
𝑟 + 𝑙
𝑟 − 𝑙
0
0
2𝑛
𝑡 − 𝑏
𝑡 + 𝑏
𝑡 − 𝑏
0
0 0 −
𝑓 + 𝑛
𝑓 − 𝑛

2𝑓𝑛
𝑓 − 𝑛
0 0 −1 0
𝑥cam
𝑦cam
𝑧cam
1
Perspective projection matrix

56. Remark

By perspective projection, linear depth in camera depth
will be non-linear in screen space.

Particularly, this problem becomes serious when ratio of
“near clip” to “far clip” is tiny!
Computer Graphics Course @Waseda University
Horizontal axis: camera-space depth
Vertical axis: screen-space depth
Near: 1, Far: 10 Near: 1, Far: 100 Near: 1, Far: 1000