3. Coordinate transform

3. Coordinate transform
Tatsuya Yatagawa

View Slide

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.

View Slide

Default coordinate system
◼
Range for default window
◼
X-coordinate: from -1 to 1.
◼
Y-coordinate: from -1 to 1.
-1
-1
1
1

View Slide

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)

View Slide

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)

View Slide

Let’s try
◼
Scaling
◼
Note
◼
L20-21: Magic spell for starting coordinate transformation
(elaborate later)
New

View Slide

Result
◼
Triangle is scaled
Scaled Original

View Slide

Let’s try
◼
Translation
New

View Slide

Result
◼
Triangle is translated to upper right direction
Translated Original

View Slide

Let’s try
◼
Rotation
New

View Slide

Result
◼
Triangle is rotated on screen
Rotated Original

View Slide

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)

View Slide

Let’s try
◼
Specify visible range directly
New
New
◼
Note
◼
After visible range specified, coordinates are also updated.

View Slide

Result
◼
Properly shown even after coordinate updates!
(12.0, 12.0)
(12.0, 18.0)
(18.0, 12.0)

View Slide

Step forward to 3D
◼
Triangle is 2D object? No, it’s 3D!
Z-coordinate is specified!!

View Slide

What’s happening now?
◼
We see triangle from the direct front

View Slide

What’re needed for drawing 3D objects?
◼
Like what we do when taking a photo
3D shape of the object
Camera position/direction
(camera extrinsic)
Properties of the camera (camera intrinsic)
• Projection to camera sensor
• Sensor position and size

View Slide

What’re needed for drawing 3D objects
◼
◼
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

View Slide

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

View Slide

◼
◼
◼
◼
◼
◼
◼
◼
These two are specified by matrices

View Slide

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

View Slide

Matrices inside OpenGL
x
y
z
x
y
z
Camera space
World space
Screen space
View matrix (camera matrix)
projection matrix

View Slide

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
x
y
z
x
y
z
Camera space
World space
Be careful that backward direction corresponds to positive z!

View Slide

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

View Slide

How to specify matrices?
◼
glMatrixMode
◼
Specify type of matrix to be specified
◼
Modelview matrix: GL_MODELVIEW
◼
Projection matrix: GL_PROJECTION
◼
glLoadIdentity
◼
Initialize a matrix with an identity matrix
◼
Typically, it’s called immediately after glMatrixMode.

View Slide

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)
x
y
z
x
y
z
Camera center
(1st-3rd args)
Camera target
(4th-6th args)
Upward direction
(7th-9th args)

View Slide

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
left
right

View Slide

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
引用: コンピュータグラフィックス [改訂新版] (コンピュータグラフィックス編集委員会著) P. 40, 41
left
right

View Slide

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
引用: コンピュータグラフィックス [改訂新版] (コンピュータグラフィックス編集委員会著) P. 40, 41
aspect = W/H

View Slide

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

View Slide

◼
◼
◼
◼
◼
◼
◼
◼

View Slide

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)
x
y
z
Camera space
Screen space
[-1, 1] x [-1, 1]
Viewport
transform

View Slide

Source code updates
◼
Reference code
◼
https://github.com/tatsy/OpenGLCourseJP/tree/master/src
/coordinate_transformation
◼
Updates
◼
3D position of a regular cube is specified
◼
Transformation matrices, and viewport transform are applied

View Slide

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

View Slide

Specify 3D points of a regular cube
◼
Code

View Slide

Specify transformation matrices

View Slide

Result
Something wrong? Let’s check colors of faces closer to camera.

View Slide

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

View Slide

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

View Slide

Enable depth testing
◼
Reference code
◼
https://github.com/tatsy/OpenGLCourseJP/tree/master/src
/depth_testing
◼
Updates
◼
Enable depth testing
◼
Clear depth buffer along with color buffer

View Slide

Result
Frontal faces are now drawn property!

View Slide

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).

View Slide

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.

View Slide

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

View Slide

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?
3D position is obtained by dividing 𝑥, 𝑦, 𝑧 coordinates with 𝑤
𝑥′
𝑦′
𝑧′
𝑤′
= 𝐌
𝑥
𝑦
𝑧
1
𝑥′′, 𝑦′′, 𝑧′′ =
𝑥′
𝑤′
,
𝑦′
𝑤′
,
𝑧′
𝑤′

View Slide

Example of transformations
◼
Translation
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.

View Slide

Derivation of projection matrix (glOrtho)
◼
Rectangular is transformed to regular cube
left
right
Visible volume: rectangular
Screen space: regular cube −1, +1 3

View Slide

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:
𝑥scn
𝑦scn
𝑧scn
1
=
2
𝑟 − 𝑙
0 0 −
𝑟 + 𝑙
𝑟 − 𝑙
0
2
𝑡 − 𝑏
0 −
𝑡 + 𝑏
𝑡 − 𝑏
0 0 −
2
𝑓 − 𝑛
−
𝑓 + 𝑛
𝑓 − 𝑛
0 0 0 1
𝑥cam
𝑦cam
𝑧cam
1
Orthographic projection matrix

View Slide

Derivation of projection matrix (glFrustum)
◼
Frustum in camera space is converted to regular cube
◼
Frustrum in camera-space is converted to regular box
Y-axis
Z-axis
𝐱cam 𝐱scn
1
1
-1
-1
Camera space: frustum
Screen space: regular cube
Y-axis
Z-axis
near far

View Slide

◼
Derive X and Y coordinates
◼
According to figure below,
{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

View Slide

◼
X and Y coordinates:
𝑥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

View Slide

◼
So far, projection matrix is like:
𝑥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:

View Slide

◼
Derive Z coordinate
◼
𝑧scn
= −1 at 𝑧near
= 𝑛
◼
𝑧scn
= +1 at 𝑧far
= 𝑓
Y-axis
Z-axis
𝐱cam
Camera space
𝑧far
𝑧near
−𝐴 −
𝐵
𝑛
= −1
−𝐴 −
𝐵
𝑓
= +1
𝐵 = −
2𝑓𝑛
𝑓 − 𝑛
𝐴 = −
𝑓 + 𝑛
𝑓 − 𝑛
◼
Solving above system, we have:

View Slide

◼
Eventually, we have a matrix for glFrustum:
𝑥scn
′
𝑦scn
′
𝑧scn
′
−𝑧cam
=
2𝑛
𝑟 − 𝑙
0
𝑟 + 𝑙
𝑟 − 𝑙
0
0
2𝑛
𝑡 − 𝑏
𝑡 + 𝑏
𝑡 − 𝑏
0
0 0 −
𝑓 + 𝑛
𝑓 − 𝑛
−
2𝑓𝑛
𝑓 − 𝑛
0 0 −1 0
𝑥cam
𝑦cam
𝑧cam
1
Perspective projection matrix

View Slide

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!
Horizontal axis: camera-space depth
Vertical axis: screen-space depth
Near: 1, Far: 10 Near: 1, Far: 100 Near: 1, Far: 1000

View Slide

3. Coordinate transform

3. Coordinate transform

Tatsuya Yatagawa

More Decks by Tatsuya Yatagawa

Other Decks in Technology

Featured

Transcript