Tweet
Tweet

Slide 1

Slide 1 text

3. Coordinate transform Tatsuya Yatagawa

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Let’s try ◼ Scaling ◼ Note ◼ L20-21: Magic spell for starting coordinate transformation (elaborate later) Computer Graphics Course @Waseda University New

Slide 7

Slide 7 text

Result ◼ Triangle is scaled Computer Graphics Course @Waseda University Scaled Original

Slide 8

Slide 8 text

Let’s try ◼ Translation Computer Graphics Course @Waseda University New

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Let’s try ◼ Rotation Computer Graphics Course @Waseda University New

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Let’s try ◼ Specify visible range directly Computer Graphics Course @Waseda University New New ◼ Note ◼ After visible range specified, coordinates are also updated.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

What’s happening now? ◼ We see triangle from the direct front Computer Graphics Course @Waseda University

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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!

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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. Computer Graphics Course @Waseda University

Slide 27

Slide 27 text

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)

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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 Computer Graphics Course @Waseda University

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Specify 3D points of a regular cube ◼ Code Computer Graphics Course @Waseda University

Slide 37

Slide 37 text

Specify transformation matrices Computer Graphics Course @Waseda University

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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 Computer Graphics Course @Waseda University

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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 𝑥′′, 𝑦′′, 𝑧′′ = 𝑥′ 𝑤′ , 𝑦′ 𝑤′ , 𝑧′ 𝑤′

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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:

Slide 54

Slide 54 text

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:

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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