Slide 1

Slide 1 text

@rompelstilchen ENRICHED UI WITH ARKIT HUGUES BERNET-ROLLANDE @ROMPELSTILCHEN GITHUB.COM/HUGUESBR FREELANCE IOS DEVELOPER 1

Slide 2

Slide 2 text

@rompelstilchen ENRICHED UI WITH ARKIT TOPICS ARKit Overview / Primer SceneKit Primer Sample UI Demo Limitations Going further 2

Slide 3

Slide 3 text

@rompelstilchen ENRICHED UI WITH ARKIT ARKIT OVERVIEW Inertial Measurement Unit Visual Inertial Odometry Dead reckoning 6D (3D translation/3D rotation) 3

Slide 4

Slide 4 text

@rompelstilchen ENRICHED UI WITH ARKIT ARKIT OVERVIEW 2D Plane detection Metric scale Light estimation Integration with SpriteKit, SceneKit or Metal 4

Slide 5

Slide 5 text

@rompelstilchen 5

Slide 6

Slide 6 text

@rompelstilchen ENRICHED UI WITH ARKIT ARKIT PRIMER ARSessionConfiguration ARSession ARFrame ARAnchor 6

Slide 7

Slide 7 text

@rompelstilchen ENRICHED UI WITH ARKIT ARKIT PRIMER - ARSESSION Manage AR processing Reset Tracking Session Updates 7

Slide 8

Slide 8 text

@rompelstilchen ENRICHED UI WITH ARKIT ARKIT PRIMER - ARFRAME Camera image to render the background of the scene Tracking informations to find device's location, orientation and state Scene informations such as light estimate and location in space 8

Slide 9

Slide 9 text

@rompelstilchen ENRICHED UI WITH ARKIT ARKIT PRIMER - ARANCHOR Real-world position and orientation Managed via ARSession Mainly created for you by ARKit 9

Slide 10

Slide 10 text

@rompelstilchen ENRICHED UI WITH SCENEKIT HUGUES BERNET-ROLLANDE @ROMPELSTILCHEN GITHUB.COM/HUGUESBR FREELANCE IOS DEVELOPER 10

Slide 11

Slide 11 text

@rompelstilchen ENRICHED UI WITH ARKIT SCENEKIT - PRIMER SCNView SCNScene SCNNode (SCNSprite, SCNTextNode, …) SCNGeometry, SCNMaterial 11

Slide 12

Slide 12 text

@rompelstilchen ENRICHED UI WITH ARKIT SCENEKIT / ARKIT ARSCNView > SCNView + ARSession ARAnchor <> SCNNode That’s pretty much it (again) 12

Slide 13

Slide 13 text

@rompelstilchen DEMO ENRICHED UI WITH ARKIT / SCENEKIT 13

Slide 14

Slide 14 text

@rompelstilchen ENRICHED UI WITH ARKIT SCENEKIT / ARKIT - STEPS Position content using ARAnchor and/or the rootNode (initial camera position) Interact with content using UIGesture or the device FOV/position Convert point back and forth ARKit do the rest 14

Slide 15

Slide 15 text

@rompelstilchen ENRICHED UI WITH ARKIT POSITION CONTENT - FIX POSITION // fix position relative to the point of view // kind of useless let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0) box.firstMaterial?.diffuse.contents = UIColor.red let node = SCNNode(geometry: box) node.position = SCNVector3(0, 0, -1) sceneView.pointOfView?.addChildNode( node) // it’s a UIView subclass let label = UILabel() view.addSubview(label) 15 @rompelstilchen

Slide 16

Slide 16 text

@rompelstilchen ENRICHED UI WITH ARKIT POSITION CONTENT - RELATIVE TO INITIAL CAMERA POSITION 16 @rompelstilchen // the root node is updated relative to camera by ARKit let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0) box.firstMaterial?.diffuse.contents = UIColor.red let node = SCNNode(geometry: box) node.position = SCNVector3(0, 0, -1) sceneView.scene.rootNode.addChildNod e(node)

Slide 17

Slide 17 text

@rompelstilchen ENRICHED UI WITH ARKIT POSITION CONTENT - RELATIVE TO REAL WORLD (PLANE) sceneView.session.delegate = self let configuration = ARWorldTrackingConfiguration() configuration.planeDetection = .horizontal sceneView.session.run(configuration) func session(_ session: ARSession, didAdd anchors: [ARAnchor]) { for case _ as ARPlaneAnchor in anchors { print("plane detected") } } @objc func tap(gesture: UITapGestureRecognizer) { let location = sceneView.center let results = sceneView.hitTest(location, types: .existingPlane) if let anchor = results.first?.anchor { let node = box() // !!!: this transform is the center of the plane node.position = SCNVector3Make(anchor.transform.columns.3.x, anchor.transform.columns.3.y, anchor.transform.columns.3.z) sceneView.scene.rootNode.addChildNode(node) } } 17 @rompelstilchen

Slide 18

Slide 18 text

@rompelstilchen ENRICHED UI WITH ARKIT INTERACT WITH CONTENT - SCENEKIT 18 @rompelstilchen let location = gesture.location(in: sceneView) let results = sceneView.hitTest(location, options: nil) if let result = results.first?.node { ... }

Slide 19

Slide 19 text

@rompelstilchen ENRICHED UI WITH ARKIT INTERACT WITH CONTENT - ARKIT 19 @rompelstilchen // find the current nodes in the field of view if let pov = sceneView.pointOfView { let nodes = sceneView.nodesInsideFrustum(of: pov) for node in nodes { ... } }

Slide 20

Slide 20 text

@rompelstilchen ENRICHED UI WITH ARKIT LIMITATIONS Horizontal Plane detection only No scene reconstruction (occlusion) Hard to test (session reset, simulator) Real-world position can be jumpy No persistance (session based) 20

Slide 21

Slide 21 text

@rompelstilchen ENRICHED UI WITH ARKIT GOING FURTHER Apple HIG for AR @madewitharkit WWDC :) 21

Slide 22

Slide 22 text

@rompelstilchen THANK YOU! SLIDES AVAILABLE ON SPEAKER DECK: HTTP://BIT.LY/2JLOJWX HUGUES BERNET-ROLLANDE @ROMPELSTILCHEN GITHUB.COM/HUGUESBR FREELANCE IOS DEVELOPER 22