$30 off During Our Annual Pro Sale. View Details »

Basic 3D Math for ARKit

KBOY
September 15, 2018

Basic 3D Math for ARKit

KBOY

September 15, 2018
Tweet

More Decks by KBOY

Other Decks in Technology

Transcript

  1. Basic
    3D Mathematics
    for ARKit
    Kei Fujikawa
    2018.9.15@Tokyo iOS Meetup

    View Slide

  2. Who?

    View Slide

  3. Who?

    View Slide

  4. Why is ے೑?

    View Slide







  5. Spajam 2nd Prized
    Best Body Japan
    Held ے೑.swift
    Showing in Article
    Smooth-sailing?

    View Slide

  6. Not so easy.

    View Slide

  7. A bunch of ے೑

    View Slide

  8. ے೑
    4FOHPLV1FSJPE

    View Slide

  9. AR!

    View Slide

  10. Question!

    View Slide







  11. Spajam 2nd Prized
    Best Body Japan
    Held ے೑.swift
    Showing in Article

    View Slide

  12. I have to ride
    on this big wave.

    View Slide

  13. So,

    View Slide

  14. I joined AR startup
    this January

    View Slide

  15. Graffity Inc.

    View Slide

  16. Apps we’re making

    View Slide

  17. I studied ARKit
    for so much time

    View Slide

  18. Not so easy.

    View Slide

  19. Let’s think about
    this example.

    View Slide

  20. Place an airplane
    at the 30cm
    in front of screen’s
    touched point.

    View Slide

  21. View Slide

  22. Looks way too easy

    View Slide

  23. Getting x,y from touch gesture
    and
    Z is 0.3?

    View Slide

  24. Finally

    View Slide

  25. View Slide

  26. It does not show

    View Slide

  27. Ideal

    View Slide

  28. View Slide

  29. Real

    View Slide

  30. View Slide

  31. Not so easy

    View Slide

  32. So,

    View Slide

  33. I studied
    3D programming.

    View Slide

  34. Books I read for study
    IUUQTBN[OUP.4V.F( IUUQTBN[OUP1,'Z5

    View Slide

  35. So,

    View Slide

  36. Today
    I will explain
    3D Programming
    clearly.

    View Slide

  37. Basic
    3D Mathematics
    for ARKit
    Kei Fujikawa
    2018.9.15@Tokyo iOS Meetup

    View Slide

  38. Today’s goal

    View Slide

  39. Place an airplane
    at the 30cm
    in front of screen’s
    touched point.

    View Slide

  40. View Slide

  41. We will study
    •Coordinate systems
    •Method for coordinate
    transformation

    View Slide

  42. Coordinate system
    for ARKit

    View Slide

  43. Coordinates
    World
    Object
    Camera
    Screen
    Drawn by iPad Pro

    View Slide

  44. World Coordinate system
    The biggest coordinates
    In your iPhone

    View Slide

  45. Object Coordinate system
    Airplane’s own
    coordinate

    View Slide

  46. Camera coordinate system
    ΧϝϥͷϩʔΧϧ࠲ඪ

    View Slide

  47. Camera

    View Slide

  48. Screen

    View Slide

  49. Screen

    View Slide

  50. Coordinates
    World
    Object
    Camera
    Screen
    Drawn by iPad Pro

    View Slide

  51. Let’s check the Goal

    View Slide

  52. Place an airplane
    at the 30cm
    in front of screen’s
    touched point.

    View Slide

  53. 30cm
    Get x,y
    from tap gesture
    Place the object
    In the world.
    Place at 30cm
    In front of camera
    Convert to world
    ᶃ ᶄ

    Convert to Screen

    ᶄ’
    Convert to screen

    View Slide

  54. ᶃPlace at 30cm
    in front of camera
    Minus
    30cm

    View Slide

  55. View Slide

  56. ᶄConvert to World

    View Slide

  57. Convert from
    a coordinate
    to
    a coordinate

    View Slide

  58. ᶄ’Convert to screen

    View Slide

  59. World <-> Screen

    View Slide

  60. ᶅGet x,y from tap gesture

    View Slide

  61. ᶆPlace in the world

    View Slide

  62. Screen <-> World

    View Slide

  63. At 30cm
    Tapped
    position
    Convert
    Convert

    View Slide

  64. Calculate at
    easy coordinate system

    View Slide

  65. By the way

    View Slide

  66. You can do it all
    in the screen coordinate

    View Slide

  67. 30cm
    Get x,y
    from tap gesture
    Place the object
    In the world.
    Place at 30cm
    In front of camera
    Convert to world
    ᶃ ᶄ

    Convert to Screen

    ᶄ’
    Convert to screen
    Removable

    View Slide

  68. Removabl

    View Slide

  69. It looks easier!!

    View Slide

  70. Yes

    View Slide

  71. You can code shorter

    View Slide

  72. View Slide

  73. But

    View Slide


  74. View Slide

  75. In fact

    View Slide

  76. This 0.996 is
    Same with 0.3m in
    camera coordinate

    View Slide

  77. What is 0.996?

    View Slide

  78. Review for
    coordinate system

    View Slide

  79. 0.0
    1.0
    Screen’s
    z
    0.001m
    1000m
    Camera’s
    z

    View Slide

  80. Screen’s Z

    View Slide

  81. https://developer.apple.com/documentation/scenekit/scnscenerenderer/1522631-unprojectpoint
    Z is 0.0~1.0

    View Slide

  82. Camera’s Z?

    View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. debug

    View Slide

  87. View Slide

  88. Z is 0.01~1000

    View Slide

  89. Let’s change zNear.

    View Slide

  90. View Slide

  91. 0.0
    1.0
    Screen’s
    z
    0.001m
    1000m
    Camera’s
    z

    View Slide

  92. Screen’s z
    vs
    Camera’s z

    View Slide

  93. http://www.alecjacobson.com/weblog/?p=3835
    -0.001
    -1000
    0.996
    screenZ = f(n + cameraZ)/((f − n)cameraZ)
    -0.3
    screenZ
    cameraZ

    View Slide

  94. screenZ = f(n + cameraZ)/((f − n)cameraZ)
    screenZ = 1000(0.001 + (−0.3))/((1000 − 0.002)(−0.3))
    f = 1000
    n = 0.001
    cameraZ = − 0.3
    screenZ = 0.9966...

    View Slide

  95. Way too hassle

    View Slide

  96. Removable?

    View Slide

  97. Must

    View Slide

  98. So,

    View Slide

  99. Understanding
    Coordinate’s system
    And..

    View Slide

  100. View Slide

  101. Make sense?

    View Slide

  102. Let’s study more?

    View Slide

  103. Make a airplane
    Bigger or Rotation

    View Slide

  104. Scale

    View Slide

  105. Rotate by SCNVector4
    Axis
    Degree

    View Slide

  106. Rotate by Euler angle

    View Slide

  107. Rotate by Euler angle
    x

    View Slide

  108. Rotate by Euler angle
    Y

    View Slide

  109. Rotate by Euler angle
    Z

    View Slide

  110. x Y Z

    View Slide

  111. That’s it

    View Slide

  112. One more thing.

    View Slide

  113. Making
    ARKit 2.0 repository

    View Slide

  114. End

    View Slide