Upgrade to Pro — share decks privately, control downloads, hide ads and more …

3. Coordinate transform

3. Coordinate transform

Tatsuya Yatagawa

April 06, 2021
Tweet

More Decks by Tatsuya Yatagawa

Other Decks in Technology

Transcript

  1. 3. Coordinate transform
    Tatsuya Yatagawa

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  6. Let’s try

    Scaling

    Note

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

    View Slide

  7. Result

    Triangle is scaled
    Computer Graphics Course @Waseda University
    Scaled Original

    View Slide

  8. Let’s try

    Translation
    Computer Graphics Course @Waseda University
    New

    View Slide

  9. Result

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

    View Slide

  10. Let’s try

    Rotation
    Computer Graphics Course @Waseda University
    New

    View Slide

  11. Result

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

    View Slide

  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

    View Slide

  13. Let’s try

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

    Note

    After visible range specified, coordinates are also updated.

    View Slide

  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)

    View Slide

  15. Step forward to 3D

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

    View Slide

  16. What’s happening now?

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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!

    View Slide

  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

    View Slide

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

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  36. Specify 3D points of a regular cube

    Code
    Computer Graphics Course @Waseda University

    View Slide

  37. Specify transformation matrices
    Computer Graphics Course @Waseda University

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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:

    View Slide

  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:

    View Slide

  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

    View Slide

  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

    View Slide