Xebicon 2017 - Réalité augmentée sur les terminaux iOS

Transcript

1. La Réalité Augmentée pour les terminaux iOS
2. Simone Civetta Julien Datour
3. Juin 2017
5. –Tim Cook “Over time, I think [these features] will be as key as having a website”
6. ARKit
7. Augmented Reality Kit
8. Qu’est-ce que la Réalité Augmentée ?
9. –Wikipedia “La réalité augmentée est la superposition de la réalité et d'éléments (sons, images 2D, 3D, vidéos, etc.) calculés par un système informatique en temps réel”
18. Démo
19. Réalité
20. Virtuelle Augmentée Mixte Réalité
21. Source: Wired La VR immerge l’utilisateur dans un environnement totalement différent de la réalité. Que ce soit 3D ou capturé en vidéo, le contenu virtuel remplace complètement l’espace qui entoure l’utilisateur. Dans la réalité augmentée, une couche numérique se superpose au monde visible, sans l’occlure. Dans la réalité mixte, les objets virtuels sont intégrés - et interagissent - avec le monde naturel. Réalité Virtuelle Réalité Augmentée Réalité Mixte Un ballon virtuel en dessous d’une table, sera visible uniquement lorsque l’utilisateur se pliera pour la regarder.
22. La VR immerge l’utilisateur dans un environnement totalement différent de la réalité. Que ce soit 3D ou capturé en vidéo, le contenu virtuel remplace complètement l’espace qui entoure l’utilisateur. Dans la réalité mixte, les objets virtuels sont intégrés - et interagissent - avec le monde naturel. Réalité Virtuelle Réalité Augmentée
23. Aujourd’hui Réalité Augmentée
24. Demo
33. 44% Des smartphones iOS Source: MixPanel, 11 novembre 2017
34. Comment ça marche ?
35. •Visual Inertial Odometry •Feature Points •Plane Detection •Light Estimation •Rendering
36. WTF
37. Visual Inertial Odometry • L’odométrie utilise l’information envoyée aux actuateurs (p.e. moteurs) pour estimer le déplacement et l’orientation d’un acteur (p.e.) un robot dans le temps
38. Visual Inertial Odometry • L’odométrie utilise l’information envoyée aux actuateurs (p.e. moteurs) pour estimer le déplacement et l’orientation d’un acteur (p.e.) un robot dans le temps • L’odométrie visuelle utilise séquences d’images venant d’un flux vidéo pour estimer la distance parcourue. 
 L’O.V. calcule et suit les feature points dans la séquence et utilise algorithmes de projection 3D pour en déterminer la distance
40. Visual Inertial Odometry • L’odométrie utilise l’information envoyée aux actuateurs (p.e. moteurs) pour estimer le déplacement et l’orientation d’un acteur (p.e. un robot) dans le temps • L’odométrie visuelle utilise séquences d’images venant d’un flux vidéo pour estimer la distance parcourue. 
 L’O.V. calcule et suit les feature points dans la séquence et utilise algorithmes de projection 3D pour en déterminer la distance
41. Visual Inertial Odometry • L’odométrie utilise l’information envoyée aux actuateurs (p.e. moteurs) pour estimer le déplacement et l’orientation d’un acteur (p.e. un robot) dans le temps • L’odométrie visuelle inertielle se sert d’une unité de mesure inertielle (IMU) (gyroscope et accéléromètre p.e.) pour mieux calculer le déplacement • L’odométrie visuelle utilise séquences d’images venant d’un flux vidéo pour estimer la distance parcourue. 
 L’O.V. calcule et suit les feature points dans la séquence et utilise algorithmes de projection 3D pour en déterminer la distance
42. Visual Inertial Odometry • L’odométrie utilise l’information envoyée aux actuateurs (p.e. moteurs) pour estimer le déplacement et l’orientation d’un acteur (p.e. un robot) dans le temps • L’odométrie visuelle inertielle se sert d’une unité de mesure inertielle (IMU) (gyroscope et accéléromètre p.e.) pour mieux calculer le déplacement ARKit utilise aussi du Machine Learning pour prédire les mouvements du device dans l’espace + ML • L’odométrie visuelle utilise séquences d’images venant d’un flux vidéo pour estimer la distance parcourue. 
 L’O.V. calcule et suit les feature points dans la séquence et utilise algorithmes de projection 3D pour en déterminer la distance
43. Démo
44. Feature Points • Calculés à partir des images du flux vidéo • Positions en 3D • Dessinent le contour d’un objet
45. Plane Detection • Un nuage de feature point particulier: le plan horizontal • Correspond à une ancre dans le monde réel
46. Ambient Light Estimation • Capture de l’intensité de la lumière • Estime la source lumineuse la plus forte ou toutes les sources en même temps • Permet de dessiner des ombres et de dresser un décors cohérent
47. • Contenus 3D : SceneKit • Contenus 2D : SpriteKit • Renderer Custom (Metal, Unity, etc) Rendering
48. Implémentation
49. Quelques APIs
50. Quelques APIs ARKit class ARSession func run(ARConfiguration, options: ARSession.RunOptions) var configuration: ARConfiguration? class ARWorldTrackingConfiguration class var isSupported: Bool var isLightEstimationEnabled: Bool class ARDirectionalLightEstimate class ARSCNView var session: ARSession func hitTest(CGPoint, types: ARHitTestResult.ResultType)
51. if ARWorldTrackingConfiguration.isSupported { let configuration = ARWorldTrackingConfiguration() configuration.planeDetection = .horizontal sceneView.session.run(configuration) }
52. let location = /* Un point dans l’espace 2D */ let hitTestResults = sceneView.hitTest(location, types: .featurePoint)
53. func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) { guard let anchor = anchor as? ARPlaneAnchor else { return } let surface = SurfaceNode(anchor: anchor) surfaces[anchor] = surface if shouldDisplayPlaneDetection { node.addChildNode(surface) } }
56. class SCNView var session: ARSession var scene: SCNScene class SCNScene var rootNode: SCNNode class SCNNode func addChildNode(SCNNode) var position: SCNVector3 var rotation: SCNVector4 Quelques APIs SceneKit
57. let aNode = SCNNode(mdlObject: /* A model */) sceneView.scene.rootNode.addChildNode(aNode)
58. let location = /* A point in the 2D space */ let hitTestResults = sceneView.hitTest(location, types: .featurePoint) if let realWorldTransform = hitTestResults.first?.worldTransform { }
59. let location = /* A point in the 2D space */ let hitTestResults = sceneView.hitTest(location, types: .featurePoint) if let realWorldTransform = hitTestResults.first?.worldTransform { let node = SCNNode(mdlObject: /* A model */) node.transform = SCNMatrix4(realWorldTransform) sceneView.scene.rootNode.addChildNode(node) }
60. Aller plus loin…
62. CoreML + Vision
63. Démo
64. Détection de plan Détection de rectangle - Vision Détection de QR code - Vision Taille de la carte - ARKit
65. let barcodeDetectionRequest = VNDetectBarcodesRequest { request, _ in guard let barcodeObservations = request.results as? [VNBarcodeObservation] else { return } barcodeObservations.forEach { barcodeObservation in guard let payload = barcodeObservation.payloadStringValue else { return } // ... }` } let handler = VNImageRequestHandler(ciImage: CIImage(), options: [:]) try? handler.perform([barcodeDetectionRequest])
66. let tl = sceneView.hitTest(sceneView.convertFromCamera(rectangle.topLeft), types: .existingPlaneUsingExtent) let tr = sceneView.hitTest(sceneView.convertFromCamera(rectangle.topRight), types: .existingPlaneUsingExtent) let bl = sceneView.hitTest(sceneView.convertFromCamera(rectangle.bottomLeft), types: .existingPlaneUsingExtent) let br = sceneView.hitTest(sceneView.convertFromCamera(rectangle.bottomRight), types: .existingPlaneUsingExtent)
67. func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) { guard shouldStopVisionRequests == false, time - lastRefresh > refreshRate else { return } lastRefresh = time removeSceneLayers() guard let currentFrame = sceneView.session.currentFrame else { return } let detectRectangleRequest = VNDetectRectanglesRequest { [weak self] request, error in guard let rectangleObservations = request.results as? [VNRectangleObservation], rectangleObservations.count > 0 else { return } self?.handle(rectangleObservations: rectangleObservations) } DispatchQueue.global(qos: .userInteractive).async { detectRectangleRequest.maximumObservations = 0 let vnImage = VNImageRequestHandler(cvPixelBuffer: currentFrame.capturedImage, options: [:]) try? vnImage.perform([detectRectangleRequest]) } }
68. Compétences nécessaires
72. Autres plates-formes
73. Android
74. Multi plate-forme
75. Web Ar.js JSARToolkit Three.js
76. Cas d’usage
84. Conclusion