Basic 3D Math for ARKit

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