SlideShare une entreprise Scribd logo
1  sur  70
Télécharger pour lire hors ligne
A la découverte de la réalité
augmentée avec ARCore
Christophe Jollivet @jollivetc
Jérémy Voisin @_JeremyVoisin_
1
A la découverte de la réalité
augmentée avec ARCore
service Google pour la réalité
augmentée
Christophe Jollivet @jollivetc
Jérémy Voisin @_JeremyVoisin_
2
@jollivetc - @_JeremyVoisin_3
Christophe Jollivet
@jollivetc
jollivetc
Jérémy Voisin
@_JeremyVoisin_
JeremyVoisin
@jollivetc - @_JeremyVoisin_4
Démo
@jollivetc - @_JeremyVoisin_5
Introduction / glossaire
@jollivetc - @_JeremyVoisin_
VR vs AR vs MR
6
Oculus Rift, Playstation VR
HTC Vive, Oculus Go
Samsung Gear VR
Lenovo Mirage Solo
XWing by Jim Reichert https://poly.google.com/view/1ykktCaJIum
Background by Jean Dean https://apod.nasa.gov/apod/ap190412.html
VR
Smartphones
Google Glass
Vuzix Blade AR
Everysight Raptor
AR
Microsoft Hololens
Magic Leap One
MR
@jollivetc - @_JeremyVoisin_
3DoF vs 6DoF
7
@jollivetc - @_JeremyVoisin_
Vertex, edge, mesh
8
Face
Edges
Vertices
@jollivetc - @_JeremyVoisin_
Texture, Shader, Material
9
@jollivetc - @_JeremyVoisin_
Pose
10
Combinaison de rotation et une translation par rapport à une
origine
Définit l’emplacement et l’orientation d’un élément de la scène
par rapport à un autre point de la scène
@jollivetc - @_JeremyVoisin_11
ARCore
@jollivetc - @_JeremyVoisin_
Introduction
12
Remplaçant du projet Tango
Sortie mars 2018, actuellement en 1.14
Des SDK pour les environnements les plus populaires
@jollivetc - @_JeremyVoisin_
Téléphones compatibles
13
Version Android 7 (API 24)
Liste téléphones compatibles :
https://developers.google.com/ar/discover/supported-devices
183 modèles le 23/01/2020
@jollivetc - @_JeremyVoisin_
Capacités d’ARCore
• Compréhension de
l’environnement
• les plans
• la lumière
• les visages
• les images
14
• le mouvement
• Cloud Anchors
@jollivetc - @_JeremyVoisin_
ARCore perception
15
• Nuage de points d’intérêt
• Plans
@jollivetc - @_JeremyVoisin_
La lumière
16
Basée sur les lighting cues :
• Estimation de l’intensité
• Correction de couleur à appliquer
• Ombres intelligentes
• Emulation des reflets
@jollivetc - @_JeremyVoisin_
Suivi de mouvement
17
VIO Algorithm : Visual-Inertial Odometry
Combine l’identification de points d’intérêts détectés par la
caméra et les informations des capteurs de mouvements
@jollivetc - @_JeremyVoisin_
Localisation du son
18
Binaural Audio via le SDK Resonance Audio
@jollivetc - @_JeremyVoisin_
Utilisation
19
4 modes d’utilisation
- model-viewer (depuis ARCore 1.9, précédemment WebXR)
- application Android
- iOS
- Unity/Unreal
@jollivetc - @_JeremyVoisin_20
<model-viewer>
@jollivetc - @_JeremyVoisin_21
Démo
@jollivetc - @_JeremyVoisin_
<model-viewer>
22
Intégration d’ARCore dans le navigateur
Sous forme de WebComponent

<model-viewer ar alt="A 3D model of an astronaut." src="Astronaut.gltf"></model-viewer>
Compatible avec la plupart des navigateurs
@jollivetc - @_JeremyVoisin_
<model-viewer> - limitations
23
Limitations sur la complexité du modèle 3D :
• 30000 vertices max
• 10 materials max
Une seule animation possible, jouée en boucle
Interaction limitée
@jollivetc - @_JeremyVoisin_24
Android
##JSC2019 @jollivetc - @_JeremyVoisin_
build.gradle
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.google.ar.sceneform.samples.hellosceneform"
minSdkVersion 24
targetSdkVersion 28
versionCode 1
versionName "1.0"
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation « com.google.ar.sceneform.ux:sceneform-ux:1.13.0 »
}
apply plugin: 'com.google.ar.sceneform.plugin'
sceneform.asset('sampledata/models/andy.obj',
'default',
'sampledata/models/andy.sfa',
'src/main/res/raw/andy')
25
##JSC2019 @jollivetc - @_JeremyVoisin_
build.gradle
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.google.ar.sceneform.samples.hellosceneform"
minSdkVersion 24
targetSdkVersion 28
versionCode 1
versionName "1.0"
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation « com.google.ar.sceneform.ux:sceneform-ux:1.13.0 »
}
apply plugin: 'com.google.ar.sceneform.plugin'
sceneform.asset('sampledata/models/andy.obj',
'default',
'sampledata/models/andy.sfa',
'src/main/res/raw/andy')
26
##JSC2019 @jollivetc - @_JeremyVoisin_
build.gradle
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.google.ar.sceneform.samples.hellosceneform"
minSdkVersion 24
targetSdkVersion 28
versionCode 1
versionName "1.0"
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation « com.google.ar.sceneform.ux:sceneform-ux:1.13.0 »
}
apply plugin: 'com.google.ar.sceneform.plugin'
sceneform.asset('sampledata/models/andy.obj',
'default',
'sampledata/models/andy.sfa',
'src/main/res/raw/andy')
27
##JSC2019 @jollivetc - @_JeremyVoisin_
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.google.ar.sceneform.samples.hellosceneform">
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.ar" android:required="true"/>
<application
android:allowBackup="false"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme"
android:usesCleartextTraffic="false"
tools:ignore="GoogleAppIndexingWarning">
<meta-data android:name="com.google.ar.core" android:value="required" />
<activity
android:name=".HelloSceneformActivity"
android:label="@string/app_name"
android:configChanges="orientation|screenSize"
android:theme="@style/Theme.AppCompat.NoActionBar"
android:screenOrientation="locked"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
28
##JSC2019 @jollivetc - @_JeremyVoisin_
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.google.ar.sceneform.samples.hellosceneform">
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.ar" android:required="true"/>
<application
android:allowBackup="false"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme"
android:usesCleartextTraffic="false"
tools:ignore="GoogleAppIndexingWarning">
<meta-data android:name="com.google.ar.core" android:value="required" />
<activity
android:name=".HelloSceneformActivity"
android:label="@string/app_name"
android:configChanges="orientation|screenSize"
android:theme="@style/Theme.AppCompat.NoActionBar"
android:screenOrientation="locked"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
29
@jollivetc - @_JeremyVoisin_
Anchor
30
Décrit une localisation fixe et orientation dans le monde réel
Peut évoluer quand la compréhension du monde réel par
ARCore évolue
Attention coûte continuellement du temps de calcul
@jollivetc - @_JeremyVoisin_
API basique
31
APi bas niveau avec OpenGL
On gère tout à la main :
- inviter l’utilisateur à scanner l’environnement
- affichage des plans
- affichage de modèle depuis un fichier obj
- gestion des interactions
@jollivetc - @_JeremyVoisin_
Sceneform
32
Permet le rendu réaliste de scène 3D en AR ou non sans
apprendre OpenGL
- API haut niveau
- Un moteur de rendu physique réaliste (Filament)
- Un plugin Android Studio pour les modèles 3D
@jollivetc - @_JeremyVoisin_
ARFragment
33
Gestion de la détection des plans et de l’affichage
Gestion des gestes de l’utilisateur (tap, drag, pinch, twist)
<fragment android:name="com.google.ar.sceneform.ux.ArFragment"
android:id="@+id/ux_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
@jollivetc - @_JeremyVoisin_
Scene / Node
34
Scene est un graph de Node
Tout est Node : AnchorNode, TransformableNode,
SkeletonNode, AugmentedFaceNode, Camera, Light
Scene fournit la détection de Hit
@jollivetc - @_JeremyVoisin_
Renderable
35
Fichier OBJ, FBX, gITF ainsi que les fichiers *.mat
Génération de fichier *.sfa et *.sfb pendant le build
https://poly.google.com/
##JSC2019 @jollivetc - @_JeremyVoisin_
private ModelRenderable andyRenderable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//...
ModelRenderable.builder()
.setSource(this, R.raw.andy)
.build()
.thenAccept(renderable -> andyRenderable = renderable)
.exceptionally(
throwable -> {
Log.e(TAG, "Unable to load Renderable.", throwable);
return null;
});
36
##JSC2019 @jollivetc - @_JeremyVoisin_
private ModelRenderable andyRenderable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//...
ModelRenderable.builder()
.setSource(this, R.raw.andy)
.build()
.thenAccept(renderable -> andyRenderable = renderable)
.exceptionally(
throwable -> {
Log.e(TAG, "Unable to load Renderable.", throwable);
return null;
});
37
##JSC2019 @jollivetc - @_JeremyVoisin_
private ModelRenderable andyRenderable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//...
ModelRenderable.builder()
.setSource(this, R.raw.andy)
.build()
.thenAccept(renderable -> andyRenderable = renderable)
.exceptionally(
throwable -> {
Log.e(TAG, "Unable to load Renderable.", throwable);
return null;
});
38
##JSC2019 @jollivetc - @_JeremyVoisin_
arFragment.setOnTapArPlaneListener(
(HitResult hitResult, Plane plane, MotionEvent motionEvent) -> {
Anchor anchor = hitResult.createAnchor();
AnchorNode anchorNode = new AnchorNode(anchor);
anchorNode.setParent(arFragment.getArSceneView().getScene());
TransformableNode andy = new
TransformableNode(arFragment.getTransformationSystem());
andy.setParent(anchorNode);
andy.setRenderable(andyRenderable);
});
39
##JSC2019 @jollivetc - @_JeremyVoisin_
arFragment.setOnTapArPlaneListener(
(HitResult hitResult, Plane plane, MotionEvent motionEvent) -> {
Anchor anchor = hitResult.createAnchor();
AnchorNode anchorNode = new AnchorNode(anchor);
anchorNode.setParent(arFragment.getArSceneView().getScene());
TransformableNode andy = new
TransformableNode(arFragment.getTransformationSystem());
andy.setParent(anchorNode);
andy.setRenderable(andyRenderable);
});
40
##JSC2019 @jollivetc - @_JeremyVoisin_
arFragment.setOnTapArPlaneListener(
(HitResult hitResult, Plane plane, MotionEvent motionEvent) -> {
Anchor anchor = hitResult.createAnchor();
AnchorNode anchorNode = new AnchorNode(anchor);
anchorNode.setParent(arFragment.getArSceneView().getScene());
TransformableNode andy = new
TransformableNode(arFragment.getTransformationSystem());
andy.setParent(anchorNode);
andy.setRenderable(andyRenderable);
});
41
@jollivetc - @_JeremyVoisin_42
https://github.com/jollivetc/demoAnimation
Démo
@jollivetc - @_JeremyVoisin_
AugmentedFace
43
Détection de visage
Renvoie un face mesh et des poses
@jollivetc - @_JeremyVoisin_
Augmented images
44
jusqu’a 20 images distinctes simultanées
arcoreimg en ligne de commande
@jollivetc - @_JeremyVoisin_
CloudAnchor
45
Permet le partage d’Anchor entre appareils
Sauvegarde pendant 24h
Nécessite le service sur Google Cloud Platform (clé à ajouter
dans le AndroidManifest.xml)
##JSC2019 @jollivetc - @_JeremyVoisin_
try {
session = new Session(this);
} catch (UnavailableArcoreNotInstalledException e) {
//handle error
} catch (UnavailableApkTooOldException e) {
//handle error
} catch (UnavailableSdkTooOldException e) {
//handle error
} catch (UnavailableDeviceNotCompatibleException e) {
//handle error
}
Config config = new Config(session);
config.setCloudAnchorMode(Config.CloudAnchorMode.ENABLED);
session.configure(config);
// ....
Anchor newAnchor = session.hostCloudAnchor(hit.createAnchor());
String cloudAnchorId = newAnchor.getCloudAnchorId();
46
##JSC2019 @jollivetc - @_JeremyVoisin_
try {
session = new Session(this);
} catch (UnavailableArcoreNotInstalledException e) {
//handle error
} catch (UnavailableApkTooOldException e) {
//handle error
} catch (UnavailableSdkTooOldException e) {
//handle error
} catch (UnavailableDeviceNotCompatibleException e) {
//handle error
}
Config config = new Config(session);
config.setCloudAnchorMode(Config.CloudAnchorMode.ENABLED);
session.configure(config);
// ....
Anchor newAnchor = session.hostCloudAnchor(hit.createAnchor());
String cloudAnchorId = newAnchor.getCloudAnchorId();
47
##JSC2019 @jollivetc - @_JeremyVoisin_
try {
session = new Session(this);
} catch (UnavailableArcoreNotInstalledException e) {
//handle error
} catch (UnavailableApkTooOldException e) {
//handle error
} catch (UnavailableSdkTooOldException e) {
//handle error
} catch (UnavailableDeviceNotCompatibleException e) {
//handle error
}
Config config = new Config(session);
config.setCloudAnchorMode(Config.CloudAnchorMode.ENABLED);
session.configure(config);
// ....
Anchor newAnchor = session.hostCloudAnchor(hit.createAnchor());
String cloudAnchorId = newAnchor.getCloudAnchorId();
48
##JSC2019 @jollivetc - @_JeremyVoisin_
Anchor resolvedAnchor = session.resolveCloudAnchor(cloudAnchorId);
AnchorNode anchorNode = new AnchorNode(resolvedAnchor);
anchorNode.setParent(arFragment.getArSceneView().getScene());
TransformableNode andy = new
TransformableNode(arFragment.getTransformationSystem());
andy.setParent(anchorNode);
andy.setRenderable(andyRenderable);
49
##JSC2019 @jollivetc - @_JeremyVoisin_
Anchor resolvedAnchor = session.resolveCloudAnchor(cloudAnchorId);
AnchorNode anchorNode = new AnchorNode(resolvedAnchor);
anchorNode.setParent(arFragment.getArSceneView().getScene());
TransformableNode andy = new
TransformableNode(arFragment.getTransformationSystem());
andy.setParent(anchorNode);
andy.setRenderable(andyRenderable);
50
##JSC2019 @jollivetc - @_JeremyVoisin_
Anchor resolvedAnchor = session.resolveCloudAnchor(cloudAnchorId);
AnchorNode anchorNode = new AnchorNode(resolvedAnchor);
anchorNode.setParent(arFragment.getArSceneView().getScene());
TransformableNode andy = new
TransformableNode(arFragment.getTransformationSystem());
andy.setParent(anchorNode);
andy.setRenderable(andyRenderable);
51
@jollivetc - @_JeremyVoisin_52
iOS
@jollivetc - @_JeremyVoisin_
ARKit
53
• Sur iOS, ARKit est le framework de réalité augmentée
• Interprétation de l’environnement, estimation de lumière,
tracking des mouvements
• Gestion d’un mode « multijoueur » avec le
MultipeerConnectivity
@jollivetc - @_JeremyVoisin_
ARKit
54
• Apparition de l’occlusion par les gens depuis la version 3
@jollivetc - @_JeremyVoisin_
ARKit & ARCore
55
• ARCore peut se positionner au dessus d’ARKit
• Apporte les Cloud Anchors sur iOS
@jollivetc - @_JeremyVoisin_56
Unity
@jollivetc - @_JeremyVoisin_
AR et Unity
57
• Framework Vuforia historiquement intégré à Unity
• Reconnaissance d’images et d’objets simples via RN
• Superposition d’images ou modèles 3D
@jollivetc - @_JeremyVoisin_
ARCore vs Vuforia
58
• Intégration dans Unity
• Images / Objets augmentés
• Détection du sol
• Licence commerciale
• Intégration dans Unity
• Suivi des mouvements
• Compréhension de l’environnement
• Estimation de la lumière
• Licence Apache 2.0
@jollivetc - @_JeremyVoisin_
Pourquoi Unity ?
59
• Un moteur de jeux vidéos, moteur physique, gestion réseau
• Un asset store riche
• Intégration de modèles 3D standards du marché
@jollivetc - @_JeremyVoisin_60
Démo
@jollivetc - @_JeremyVoisin_
Unity
61
Un coût d’entrée qui n’est cependant pas neutre pour ARCore :
• C# vs Java
• IDE à prendre en main
• Concepts à appréhender
• Nouveau mode de programmation
@jollivetc - @_JeremyVoisin_62
Open XR
@jollivetc - @_JeremyVoisin_
OpenXR
63
• Un standard pour l’AR et la VR annoncé en Février 2017
• Par le consortium Khronos Group
• Version 1.0 le 29 juillet 2019
@jollivetc - @_JeremyVoisin_
OpenXR
64
Standardisation d’APIs
https://www.khronos.org/openxr
@jollivetc - @_JeremyVoisin_
OpenXR
65
Création d’une couche d’abstraction du device
https://www.khronos.org/openxr
@jollivetc - @_JeremyVoisin_
OpenXR
66
Open XR résout le problème de fragmentation de l’XR
https://www.khronos.org/openxr
@jollivetc - @_JeremyVoisin_
Qui soutient OpenXR ?
67
https://www.khronos.org/openxr
@jollivetc - @_JeremyVoisin_
Qui soutient OpenXR ?
68
• Apple, membre du groupe OpenXR
• A l’heure actuelle ne le soutient pas officiellement
@jollivetc - @_JeremyVoisin_69
Questions ?
@jollivetc - @_JeremyVoisin_
Merci / Thank you
70

Contenu connexe

Similaire à A la découverte de la réalité augmentée avec ARCore - Snowcamp.io

La réalité mélangée dans vos applications
La réalité mélangée dans vos applicationsLa réalité mélangée dans vos applications
La réalité mélangée dans vos applicationsChristophe Villeneuve
 
Google glass droidcon - DroidCon Paris 2014
Google glass droidcon - DroidCon Paris 2014Google glass droidcon - DroidCon Paris 2014
Google glass droidcon - DroidCon Paris 2014Paris Android User Group
 
Introduction à Android - Mars 2012
Introduction à Android - Mars 2012Introduction à Android - Mars 2012
Introduction à Android - Mars 2012Aurélien Guillard
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013jeromevdl
 
Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)
Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)
Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)Microsoft
 
Les nouveautés d'Android 7.1 (Nougat)
Les nouveautés d'Android 7.1 (Nougat)Les nouveautés d'Android 7.1 (Nougat)
Les nouveautés d'Android 7.1 (Nougat)Edouard Marquez
 
XebiCon'17 : Réalité Augmentée pour les terminaux iOS - Julien Datour et S...
XebiCon'17 : Réalité Augmentée pour les terminaux iOS - Julien Datour et S...XebiCon'17 : Réalité Augmentée pour les terminaux iOS - Julien Datour et S...
XebiCon'17 : Réalité Augmentée pour les terminaux iOS - Julien Datour et S...Publicis Sapient Engineering
 
Creation de jeux en ligne suib-i.com
Creation de jeux en ligne suib-i.comCreation de jeux en ligne suib-i.com
Creation de jeux en ligne suib-i.compierota
 
Dans le Monorepo vous n'êtes jamais seul, le Park est ouvert... 🦖🦕🐢 (@BreizhC...
Dans le Monorepo vous n'êtes jamais seul, le Park est ouvert... 🦖🦕🐢 (@BreizhC...Dans le Monorepo vous n'êtes jamais seul, le Park est ouvert... 🦖🦕🐢 (@BreizhC...
Dans le Monorepo vous n'êtes jamais seul, le Park est ouvert... 🦖🦕🐢 (@BreizhC...François
 
Créer des photos HDR avec des logiciels libres
Créer des photos HDR avec des logiciels libresCréer des photos HDR avec des logiciels libres
Créer des photos HDR avec des logiciels libresRobert Viseur
 
Gew2013 algeria #webdays oran la technologie microsoft kinect pour les entrep...
Gew2013 algeria #webdays oran la technologie microsoft kinect pour les entrep...Gew2013 algeria #webdays oran la technologie microsoft kinect pour les entrep...
Gew2013 algeria #webdays oran la technologie microsoft kinect pour les entrep...Kofi Sika Franck Latzoo
 
What’s hot ? - Janvier 2015
What’s hot ? - Janvier 2015What’s hot ? - Janvier 2015
What’s hot ? - Janvier 2015onepoint x weave
 
altima° x VR expérience
altima° x VR expériencealtima° x VR expérience
altima° x VR expériencealtima°
 

Similaire à A la découverte de la réalité augmentée avec ARCore - Snowcamp.io (20)

Enseigner avec la 3d
Enseigner avec la 3dEnseigner avec la 3d
Enseigner avec la 3d
 
Prez web vr chtijs
Prez web vr chtijsPrez web vr chtijs
Prez web vr chtijs
 
La réalité mélangée dans vos applications
La réalité mélangée dans vos applicationsLa réalité mélangée dans vos applications
La réalité mélangée dans vos applications
 
la réalité mélangée de A a Z
la réalité mélangée de A a Zla réalité mélangée de A a Z
la réalité mélangée de A a Z
 
Google glass droidcon - DroidCon Paris 2014
Google glass droidcon - DroidCon Paris 2014Google glass droidcon - DroidCon Paris 2014
Google glass droidcon - DroidCon Paris 2014
 
Introduction à Android - Mars 2012
Introduction à Android - Mars 2012Introduction à Android - Mars 2012
Introduction à Android - Mars 2012
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013
 
AR / VR / XR dans les navigateurs
AR / VR / XR dans les navigateursAR / VR / XR dans les navigateurs
AR / VR / XR dans les navigateurs
 
Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)
Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)
Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)
 
La réalité augmentée
La réalité augmentéeLa réalité augmentée
La réalité augmentée
 
la realite a l assaut du web
la realite a l assaut du webla realite a l assaut du web
la realite a l assaut du web
 
Les nouveautés d'Android 7.1 (Nougat)
Les nouveautés d'Android 7.1 (Nougat)Les nouveautés d'Android 7.1 (Nougat)
Les nouveautés d'Android 7.1 (Nougat)
 
XebiCon'17 : Réalité Augmentée pour les terminaux iOS - Julien Datour et S...
XebiCon'17 : Réalité Augmentée pour les terminaux iOS - Julien Datour et S...XebiCon'17 : Réalité Augmentée pour les terminaux iOS - Julien Datour et S...
XebiCon'17 : Réalité Augmentée pour les terminaux iOS - Julien Datour et S...
 
Creation de jeux en ligne suib-i.com
Creation de jeux en ligne suib-i.comCreation de jeux en ligne suib-i.com
Creation de jeux en ligne suib-i.com
 
Dans le Monorepo vous n'êtes jamais seul, le Park est ouvert... 🦖🦕🐢 (@BreizhC...
Dans le Monorepo vous n'êtes jamais seul, le Park est ouvert... 🦖🦕🐢 (@BreizhC...Dans le Monorepo vous n'êtes jamais seul, le Park est ouvert... 🦖🦕🐢 (@BreizhC...
Dans le Monorepo vous n'êtes jamais seul, le Park est ouvert... 🦖🦕🐢 (@BreizhC...
 
Hands on drone challenge - xebicon'18
Hands on  drone challenge - xebicon'18Hands on  drone challenge - xebicon'18
Hands on drone challenge - xebicon'18
 
Créer des photos HDR avec des logiciels libres
Créer des photos HDR avec des logiciels libresCréer des photos HDR avec des logiciels libres
Créer des photos HDR avec des logiciels libres
 
Gew2013 algeria #webdays oran la technologie microsoft kinect pour les entrep...
Gew2013 algeria #webdays oran la technologie microsoft kinect pour les entrep...Gew2013 algeria #webdays oran la technologie microsoft kinect pour les entrep...
Gew2013 algeria #webdays oran la technologie microsoft kinect pour les entrep...
 
What’s hot ? - Janvier 2015
What’s hot ? - Janvier 2015What’s hot ? - Janvier 2015
What’s hot ? - Janvier 2015
 
altima° x VR expérience
altima° x VR expériencealtima° x VR expérience
altima° x VR expérience
 

Plus de jollivetc

Capteurs connectés et data visualisation pour mesurer la pénibilité au travai...
Capteurs connectés et data visualisation pour mesurer la pénibilité au travai...Capteurs connectés et data visualisation pour mesurer la pénibilité au travai...
Capteurs connectés et data visualisation pour mesurer la pénibilité au travai...jollivetc
 
Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projetjollivetc
 
JavaScript pour le développeur Java
JavaScript pour le développeur JavaJavaScript pour le développeur Java
JavaScript pour le développeur Javajollivetc
 
JavaScript dans l'usine logicielle
JavaScript dans l'usine logicielleJavaScript dans l'usine logicielle
JavaScript dans l'usine logiciellejollivetc
 
JavaScript pour le développeur Java
JavaScript pour le développeur JavaJavaScript pour le développeur Java
JavaScript pour le développeur Javajollivetc
 
Javascript pour le développeur Java
Javascript pour le développeur JavaJavascript pour le développeur Java
Javascript pour le développeur Javajollivetc
 
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScriptPourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScriptjollivetc
 
Guide javascript
Guide javascriptGuide javascript
Guide javascriptjollivetc
 

Plus de jollivetc (8)

Capteurs connectés et data visualisation pour mesurer la pénibilité au travai...
Capteurs connectés et data visualisation pour mesurer la pénibilité au travai...Capteurs connectés et data visualisation pour mesurer la pénibilité au travai...
Capteurs connectés et data visualisation pour mesurer la pénibilité au travai...
 
Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projet
 
JavaScript pour le développeur Java
JavaScript pour le développeur JavaJavaScript pour le développeur Java
JavaScript pour le développeur Java
 
JavaScript dans l'usine logicielle
JavaScript dans l'usine logicielleJavaScript dans l'usine logicielle
JavaScript dans l'usine logicielle
 
JavaScript pour le développeur Java
JavaScript pour le développeur JavaJavaScript pour le développeur Java
JavaScript pour le développeur Java
 
Javascript pour le développeur Java
Javascript pour le développeur JavaJavascript pour le développeur Java
Javascript pour le développeur Java
 
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScriptPourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
 
Guide javascript
Guide javascriptGuide javascript
Guide javascript
 

A la découverte de la réalité augmentée avec ARCore - Snowcamp.io

  • 1. A la découverte de la réalité augmentée avec ARCore Christophe Jollivet @jollivetc Jérémy Voisin @_JeremyVoisin_ 1
  • 2. A la découverte de la réalité augmentée avec ARCore service Google pour la réalité augmentée Christophe Jollivet @jollivetc Jérémy Voisin @_JeremyVoisin_ 2
  • 3. @jollivetc - @_JeremyVoisin_3 Christophe Jollivet @jollivetc jollivetc Jérémy Voisin @_JeremyVoisin_ JeremyVoisin
  • 6. @jollivetc - @_JeremyVoisin_ VR vs AR vs MR 6 Oculus Rift, Playstation VR HTC Vive, Oculus Go Samsung Gear VR Lenovo Mirage Solo XWing by Jim Reichert https://poly.google.com/view/1ykktCaJIum Background by Jean Dean https://apod.nasa.gov/apod/ap190412.html VR Smartphones Google Glass Vuzix Blade AR Everysight Raptor AR Microsoft Hololens Magic Leap One MR
  • 8. @jollivetc - @_JeremyVoisin_ Vertex, edge, mesh 8 Face Edges Vertices
  • 10. @jollivetc - @_JeremyVoisin_ Pose 10 Combinaison de rotation et une translation par rapport à une origine Définit l’emplacement et l’orientation d’un élément de la scène par rapport à un autre point de la scène
  • 12. @jollivetc - @_JeremyVoisin_ Introduction 12 Remplaçant du projet Tango Sortie mars 2018, actuellement en 1.14 Des SDK pour les environnements les plus populaires
  • 13. @jollivetc - @_JeremyVoisin_ Téléphones compatibles 13 Version Android 7 (API 24) Liste téléphones compatibles : https://developers.google.com/ar/discover/supported-devices 183 modèles le 23/01/2020
  • 14. @jollivetc - @_JeremyVoisin_ Capacités d’ARCore • Compréhension de l’environnement • les plans • la lumière • les visages • les images 14 • le mouvement • Cloud Anchors
  • 15. @jollivetc - @_JeremyVoisin_ ARCore perception 15 • Nuage de points d’intérêt • Plans
  • 16. @jollivetc - @_JeremyVoisin_ La lumière 16 Basée sur les lighting cues : • Estimation de l’intensité • Correction de couleur à appliquer • Ombres intelligentes • Emulation des reflets
  • 17. @jollivetc - @_JeremyVoisin_ Suivi de mouvement 17 VIO Algorithm : Visual-Inertial Odometry Combine l’identification de points d’intérêts détectés par la caméra et les informations des capteurs de mouvements
  • 18. @jollivetc - @_JeremyVoisin_ Localisation du son 18 Binaural Audio via le SDK Resonance Audio
  • 19. @jollivetc - @_JeremyVoisin_ Utilisation 19 4 modes d’utilisation - model-viewer (depuis ARCore 1.9, précédemment WebXR) - application Android - iOS - Unity/Unreal
  • 22. @jollivetc - @_JeremyVoisin_ <model-viewer> 22 Intégration d’ARCore dans le navigateur Sous forme de WebComponent
 <model-viewer ar alt="A 3D model of an astronaut." src="Astronaut.gltf"></model-viewer> Compatible avec la plupart des navigateurs
  • 23. @jollivetc - @_JeremyVoisin_ <model-viewer> - limitations 23 Limitations sur la complexité du modèle 3D : • 30000 vertices max • 10 materials max Une seule animation possible, jouée en boucle Interaction limitée
  • 25. ##JSC2019 @jollivetc - @_JeremyVoisin_ build.gradle android { compileSdkVersion 28 defaultConfig { applicationId "com.google.ar.sceneform.samples.hellosceneform" minSdkVersion 24 targetSdkVersion 28 versionCode 1 versionName "1.0" } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation « com.google.ar.sceneform.ux:sceneform-ux:1.13.0 » } apply plugin: 'com.google.ar.sceneform.plugin' sceneform.asset('sampledata/models/andy.obj', 'default', 'sampledata/models/andy.sfa', 'src/main/res/raw/andy') 25
  • 26. ##JSC2019 @jollivetc - @_JeremyVoisin_ build.gradle android { compileSdkVersion 28 defaultConfig { applicationId "com.google.ar.sceneform.samples.hellosceneform" minSdkVersion 24 targetSdkVersion 28 versionCode 1 versionName "1.0" } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation « com.google.ar.sceneform.ux:sceneform-ux:1.13.0 » } apply plugin: 'com.google.ar.sceneform.plugin' sceneform.asset('sampledata/models/andy.obj', 'default', 'sampledata/models/andy.sfa', 'src/main/res/raw/andy') 26
  • 27. ##JSC2019 @jollivetc - @_JeremyVoisin_ build.gradle android { compileSdkVersion 28 defaultConfig { applicationId "com.google.ar.sceneform.samples.hellosceneform" minSdkVersion 24 targetSdkVersion 28 versionCode 1 versionName "1.0" } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation « com.google.ar.sceneform.ux:sceneform-ux:1.13.0 » } apply plugin: 'com.google.ar.sceneform.plugin' sceneform.asset('sampledata/models/andy.obj', 'default', 'sampledata/models/andy.sfa', 'src/main/res/raw/andy') 27
  • 28. ##JSC2019 @jollivetc - @_JeremyVoisin_ AndroidManifest.xml <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.google.ar.sceneform.samples.hellosceneform"> <uses-permission android:name="android.permission.CAMERA" /> <uses-feature android:name="android.hardware.camera.ar" android:required="true"/> <application android:allowBackup="false" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" android:usesCleartextTraffic="false" tools:ignore="GoogleAppIndexingWarning"> <meta-data android:name="com.google.ar.core" android:value="required" /> <activity android:name=".HelloSceneformActivity" android:label="@string/app_name" android:configChanges="orientation|screenSize" android:theme="@style/Theme.AppCompat.NoActionBar" android:screenOrientation="locked" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> 28
  • 29. ##JSC2019 @jollivetc - @_JeremyVoisin_ AndroidManifest.xml <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.google.ar.sceneform.samples.hellosceneform"> <uses-permission android:name="android.permission.CAMERA" /> <uses-feature android:name="android.hardware.camera.ar" android:required="true"/> <application android:allowBackup="false" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" android:usesCleartextTraffic="false" tools:ignore="GoogleAppIndexingWarning"> <meta-data android:name="com.google.ar.core" android:value="required" /> <activity android:name=".HelloSceneformActivity" android:label="@string/app_name" android:configChanges="orientation|screenSize" android:theme="@style/Theme.AppCompat.NoActionBar" android:screenOrientation="locked" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> 29
  • 30. @jollivetc - @_JeremyVoisin_ Anchor 30 Décrit une localisation fixe et orientation dans le monde réel Peut évoluer quand la compréhension du monde réel par ARCore évolue Attention coûte continuellement du temps de calcul
  • 31. @jollivetc - @_JeremyVoisin_ API basique 31 APi bas niveau avec OpenGL On gère tout à la main : - inviter l’utilisateur à scanner l’environnement - affichage des plans - affichage de modèle depuis un fichier obj - gestion des interactions
  • 32. @jollivetc - @_JeremyVoisin_ Sceneform 32 Permet le rendu réaliste de scène 3D en AR ou non sans apprendre OpenGL - API haut niveau - Un moteur de rendu physique réaliste (Filament) - Un plugin Android Studio pour les modèles 3D
  • 33. @jollivetc - @_JeremyVoisin_ ARFragment 33 Gestion de la détection des plans et de l’affichage Gestion des gestes de l’utilisateur (tap, drag, pinch, twist) <fragment android:name="com.google.ar.sceneform.ux.ArFragment" android:id="@+id/ux_fragment" android:layout_width="match_parent" android:layout_height="match_parent" />
  • 34. @jollivetc - @_JeremyVoisin_ Scene / Node 34 Scene est un graph de Node Tout est Node : AnchorNode, TransformableNode, SkeletonNode, AugmentedFaceNode, Camera, Light Scene fournit la détection de Hit
  • 35. @jollivetc - @_JeremyVoisin_ Renderable 35 Fichier OBJ, FBX, gITF ainsi que les fichiers *.mat Génération de fichier *.sfa et *.sfb pendant le build https://poly.google.com/
  • 36. ##JSC2019 @jollivetc - @_JeremyVoisin_ private ModelRenderable andyRenderable; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //... ModelRenderable.builder() .setSource(this, R.raw.andy) .build() .thenAccept(renderable -> andyRenderable = renderable) .exceptionally( throwable -> { Log.e(TAG, "Unable to load Renderable.", throwable); return null; }); 36
  • 37. ##JSC2019 @jollivetc - @_JeremyVoisin_ private ModelRenderable andyRenderable; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //... ModelRenderable.builder() .setSource(this, R.raw.andy) .build() .thenAccept(renderable -> andyRenderable = renderable) .exceptionally( throwable -> { Log.e(TAG, "Unable to load Renderable.", throwable); return null; }); 37
  • 38. ##JSC2019 @jollivetc - @_JeremyVoisin_ private ModelRenderable andyRenderable; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //... ModelRenderable.builder() .setSource(this, R.raw.andy) .build() .thenAccept(renderable -> andyRenderable = renderable) .exceptionally( throwable -> { Log.e(TAG, "Unable to load Renderable.", throwable); return null; }); 38
  • 39. ##JSC2019 @jollivetc - @_JeremyVoisin_ arFragment.setOnTapArPlaneListener( (HitResult hitResult, Plane plane, MotionEvent motionEvent) -> { Anchor anchor = hitResult.createAnchor(); AnchorNode anchorNode = new AnchorNode(anchor); anchorNode.setParent(arFragment.getArSceneView().getScene()); TransformableNode andy = new TransformableNode(arFragment.getTransformationSystem()); andy.setParent(anchorNode); andy.setRenderable(andyRenderable); }); 39
  • 40. ##JSC2019 @jollivetc - @_JeremyVoisin_ arFragment.setOnTapArPlaneListener( (HitResult hitResult, Plane plane, MotionEvent motionEvent) -> { Anchor anchor = hitResult.createAnchor(); AnchorNode anchorNode = new AnchorNode(anchor); anchorNode.setParent(arFragment.getArSceneView().getScene()); TransformableNode andy = new TransformableNode(arFragment.getTransformationSystem()); andy.setParent(anchorNode); andy.setRenderable(andyRenderable); }); 40
  • 41. ##JSC2019 @jollivetc - @_JeremyVoisin_ arFragment.setOnTapArPlaneListener( (HitResult hitResult, Plane plane, MotionEvent motionEvent) -> { Anchor anchor = hitResult.createAnchor(); AnchorNode anchorNode = new AnchorNode(anchor); anchorNode.setParent(arFragment.getArSceneView().getScene()); TransformableNode andy = new TransformableNode(arFragment.getTransformationSystem()); andy.setParent(anchorNode); andy.setRenderable(andyRenderable); }); 41
  • 43. @jollivetc - @_JeremyVoisin_ AugmentedFace 43 Détection de visage Renvoie un face mesh et des poses
  • 44. @jollivetc - @_JeremyVoisin_ Augmented images 44 jusqu’a 20 images distinctes simultanées arcoreimg en ligne de commande
  • 45. @jollivetc - @_JeremyVoisin_ CloudAnchor 45 Permet le partage d’Anchor entre appareils Sauvegarde pendant 24h Nécessite le service sur Google Cloud Platform (clé à ajouter dans le AndroidManifest.xml)
  • 46. ##JSC2019 @jollivetc - @_JeremyVoisin_ try { session = new Session(this); } catch (UnavailableArcoreNotInstalledException e) { //handle error } catch (UnavailableApkTooOldException e) { //handle error } catch (UnavailableSdkTooOldException e) { //handle error } catch (UnavailableDeviceNotCompatibleException e) { //handle error } Config config = new Config(session); config.setCloudAnchorMode(Config.CloudAnchorMode.ENABLED); session.configure(config); // .... Anchor newAnchor = session.hostCloudAnchor(hit.createAnchor()); String cloudAnchorId = newAnchor.getCloudAnchorId(); 46
  • 47. ##JSC2019 @jollivetc - @_JeremyVoisin_ try { session = new Session(this); } catch (UnavailableArcoreNotInstalledException e) { //handle error } catch (UnavailableApkTooOldException e) { //handle error } catch (UnavailableSdkTooOldException e) { //handle error } catch (UnavailableDeviceNotCompatibleException e) { //handle error } Config config = new Config(session); config.setCloudAnchorMode(Config.CloudAnchorMode.ENABLED); session.configure(config); // .... Anchor newAnchor = session.hostCloudAnchor(hit.createAnchor()); String cloudAnchorId = newAnchor.getCloudAnchorId(); 47
  • 48. ##JSC2019 @jollivetc - @_JeremyVoisin_ try { session = new Session(this); } catch (UnavailableArcoreNotInstalledException e) { //handle error } catch (UnavailableApkTooOldException e) { //handle error } catch (UnavailableSdkTooOldException e) { //handle error } catch (UnavailableDeviceNotCompatibleException e) { //handle error } Config config = new Config(session); config.setCloudAnchorMode(Config.CloudAnchorMode.ENABLED); session.configure(config); // .... Anchor newAnchor = session.hostCloudAnchor(hit.createAnchor()); String cloudAnchorId = newAnchor.getCloudAnchorId(); 48
  • 49. ##JSC2019 @jollivetc - @_JeremyVoisin_ Anchor resolvedAnchor = session.resolveCloudAnchor(cloudAnchorId); AnchorNode anchorNode = new AnchorNode(resolvedAnchor); anchorNode.setParent(arFragment.getArSceneView().getScene()); TransformableNode andy = new TransformableNode(arFragment.getTransformationSystem()); andy.setParent(anchorNode); andy.setRenderable(andyRenderable); 49
  • 50. ##JSC2019 @jollivetc - @_JeremyVoisin_ Anchor resolvedAnchor = session.resolveCloudAnchor(cloudAnchorId); AnchorNode anchorNode = new AnchorNode(resolvedAnchor); anchorNode.setParent(arFragment.getArSceneView().getScene()); TransformableNode andy = new TransformableNode(arFragment.getTransformationSystem()); andy.setParent(anchorNode); andy.setRenderable(andyRenderable); 50
  • 51. ##JSC2019 @jollivetc - @_JeremyVoisin_ Anchor resolvedAnchor = session.resolveCloudAnchor(cloudAnchorId); AnchorNode anchorNode = new AnchorNode(resolvedAnchor); anchorNode.setParent(arFragment.getArSceneView().getScene()); TransformableNode andy = new TransformableNode(arFragment.getTransformationSystem()); andy.setParent(anchorNode); andy.setRenderable(andyRenderable); 51
  • 53. @jollivetc - @_JeremyVoisin_ ARKit 53 • Sur iOS, ARKit est le framework de réalité augmentée • Interprétation de l’environnement, estimation de lumière, tracking des mouvements • Gestion d’un mode « multijoueur » avec le MultipeerConnectivity
  • 54. @jollivetc - @_JeremyVoisin_ ARKit 54 • Apparition de l’occlusion par les gens depuis la version 3
  • 55. @jollivetc - @_JeremyVoisin_ ARKit & ARCore 55 • ARCore peut se positionner au dessus d’ARKit • Apporte les Cloud Anchors sur iOS
  • 57. @jollivetc - @_JeremyVoisin_ AR et Unity 57 • Framework Vuforia historiquement intégré à Unity • Reconnaissance d’images et d’objets simples via RN • Superposition d’images ou modèles 3D
  • 58. @jollivetc - @_JeremyVoisin_ ARCore vs Vuforia 58 • Intégration dans Unity • Images / Objets augmentés • Détection du sol • Licence commerciale • Intégration dans Unity • Suivi des mouvements • Compréhension de l’environnement • Estimation de la lumière • Licence Apache 2.0
  • 59. @jollivetc - @_JeremyVoisin_ Pourquoi Unity ? 59 • Un moteur de jeux vidéos, moteur physique, gestion réseau • Un asset store riche • Intégration de modèles 3D standards du marché
  • 61. @jollivetc - @_JeremyVoisin_ Unity 61 Un coût d’entrée qui n’est cependant pas neutre pour ARCore : • C# vs Java • IDE à prendre en main • Concepts à appréhender • Nouveau mode de programmation
  • 63. @jollivetc - @_JeremyVoisin_ OpenXR 63 • Un standard pour l’AR et la VR annoncé en Février 2017 • Par le consortium Khronos Group • Version 1.0 le 29 juillet 2019
  • 64. @jollivetc - @_JeremyVoisin_ OpenXR 64 Standardisation d’APIs https://www.khronos.org/openxr
  • 65. @jollivetc - @_JeremyVoisin_ OpenXR 65 Création d’une couche d’abstraction du device https://www.khronos.org/openxr
  • 66. @jollivetc - @_JeremyVoisin_ OpenXR 66 Open XR résout le problème de fragmentation de l’XR https://www.khronos.org/openxr
  • 67. @jollivetc - @_JeremyVoisin_ Qui soutient OpenXR ? 67 https://www.khronos.org/openxr
  • 68. @jollivetc - @_JeremyVoisin_ Qui soutient OpenXR ? 68 • Apple, membre du groupe OpenXR • A l’heure actuelle ne le soutient pas officiellement