SlideShare une entreprise Scribd logo
La réalité mélangée dans vos applications
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Confoo.ca 26 février 2020
Atos open source - afup – lemug.fr – mariadb – drupal – mozilla - firefox – lemugfr - sumo – webextensions – VR – AR – XR - Cause commune 93.1 FM - TechSpeaker - Lizard - eyrolles – editions eni – programmez – linux pratique – webriver – elephpant - CommonVoice – Sécurité - Cybersécurité
Christophe Villeneuve ?
●
Consultant
●
Dresseur animaux Free Software
- @hellosct1 –
La réalité…??xx!?& !!??
● Réalité Augmenté
● Réalité Virtuelle
● MiXte Réalité
- @hellosct1 –
Aujourd’hui
●
On reprend l’origine
●
Les bases
●
La pratique
●
Interface utilisateur
- @hellosct1 –
L’origine
Les fondamentaux
La pratique
Interface utilisateur
- @hellosct1 –
De nombreux essais dans la Réalité Augmenté
Virtual Box
Nintendo (1995)
CardboardCardboard
… Beaucoup de tentatives
- @hellosct1 –
Où encore
- @hellosct1 –
Actuellement… plusieurs familles
http://www.createwebxr.com/webVR.html
- @hellosct1 –
WebVR supportés par les navigateurs
http://createwebvr.com/
Mozilla Firefox Microsoft Edge Google Chrome
Brave
Desktop & mobile Desktop
Servo
Mobile Mobile & HMD
Samsung internet
HMD
Brave Firefox Reality Oculus Browser Supermedium
- @hellosct1 –
Compatibilité WebVR : Navigateur / Matériels
https://webvr.rocks/
- @hellosct1 –
Les métiers...
- @hellosct1 –
L’origine
Les fondamentaux
La pratique
Interface utilisateur
- @hellosct1 –
La réalité mélangée ?
●
Etre dans la scène 3D
●
Immersion
●
Transporte l'utilisateur dans
un environnement
numérique
●
Positionnement objet 3D
– Environnement réel
●
Ajouter des éléments réels
– Champ de vision
●
Intègre le contenu
numérique dans notre
monde physique
Réalité Virtuelle Réalité Augmentée
- @hellosct1 –
Réalité Amplifiée
Réalité Augmentée
Réalité Mélangée
Virtualité Augmentée
Réalité Virtuelle
Réalité Virtualisée
Réalité Réelle Réel
Réalité mixte
Virtuel
Où se positionne-t-on ?
- @hellosct1 –
WebXR (1/2)
●
Nouveau standard web VR / MR / XR
●
Périphériques / matériels (devices)
●
Couverture
●
Interraction des utilisateurs
●
Rendu
https://www.w3.org/TR/webxr
Draft : 10 février 2020
- @hellosct1 –
WebXR (2/2)
●
Soutenu par
– Mozilla, Google, Microsoft, Amazon, Samsung…
●
Remplacera l’API WebVR
●
Actuellement compatible
– Chrome
– Firefox Reality
●
Prochainement : Firefox
– Emulator WebXR
- @hellosct1 –
Puissance et Extensible
jQuery React Redux Vue.js ...
DOM
A-Frame
A-Frame
Components
Entity-component
Gamepad
A
C
C
E
S
S
I
B
L
E
Navigateurs
WebGL Web Audio WebVR Web Speech
webXR
- @hellosct1 –
L’origine
Les fondamentaux
La pratique
Interface utilisateur
- @hellosct1 –
Page web
<!DOCTYPE html>
<html>
<head>
<script src="librairy.min.js"></script>
</head>
<body>
...
</body>
</html>
- @hellosct1 –
Frameworks AR
- @hellosct1 –
La réalité augmentée
●
Utilisation
– Framework A-frame
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
- @hellosct1 –
La réalité augmentée… pas vraiment
02
<div style='position: fixed; top: 10px; width:100%; text-align: left; z-index: 1;'>
<img src= "assets/image.png" width="300px">
</div>
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
- @hellosct1 –
Avec un CMS / Framework (1/2)
●
Back office
– Type de contenu
– Views
08
- @hellosct1 –
Avec un CMS / Framework (2/2)
●
Texte Wysiwyg
●
Librairie : aframe-html-shader
<a-scene>
<a-plane
position="0 2 -6"
height="3"
width="3"
rotation="-45 0 0"
material="shader: html; target: #planeHTML; ratio: height;transparent: true; »>
</a-plane>
</a-scene>
<div style="width: 1px; height: 1px; overflow: hidden">
<div id="planeHTML">
<h2>Welcome!</h2>
<p>Circa hos dies anuginis adulescens,</p>
<p>Lampadi <strong>manu</strong>….</p>
</div>
</div>
- @hellosct1 –
Frameworks (avec extensions)
A-Frame React 360
Three JS Babylon JS 4.0
- @hellosct1 –
Vue 360° (en background)
10
<a-scene>
<a-assets>
<img id="my-image" src="assets/media/garden.png">
</a-assets>
<a-sky src="#my-image" rotation="0 -130 0" height="140" radius="100"
thete-length="300" scale="0.8 0.8 0.8"></a-sky>
<a-text color="#FF0000" font="kelsonsans" value="Welcome"
width="6" position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text>
</a-scene>
- @hellosct1 –
Par le code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="lib/a-frame/aframe-v0.8.2.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="my-image" src="assets/media/garden.png">
</a-assets>
<a-sky src="#my-image" rotation="0 -130 0"
height="140"
radius="100"
thete-length="300"
scale="0.8 0.8 0.8"
></a-sky>
</a-scene>
</body>
</html>
- @hellosct1 –
Objets en VR
●
Objets fixes
●
Objets animés
●
Animation
●
Vidéo
●
Son
●
Texture
●
Objets externes
15
- @hellosct1 –
Outillage : objet / 3 D
●
SketchUp
●
Unity VR
●
Oculus
●
Dcatia
●
Blender
●
Unreal engine
●
Vive
●
Autodesk 3D mask
●
Microsoft store
- @hellosct1 –
XR : A-Frame + CMS Drupal (1/2)
24
Démo en ligne : https://glitch.com/~xr-a-frame-and-drupal
- @hellosct1 –
XR : A-Frame + CMS Drupal (2/2)
3 solutions :
- Modules
ReactVR / a-frame / VR
- WebServices
- Back / Front
- @hellosct1 –
Geo-Localisation
Démo en ligne https://glitch.com/~l10n-poi31
- @hellosct1 –
XR : A-Frame + Open Street Map (1/2)
https://vrmap.kairo.at/
- @hellosct1 –
XR : A-Frame + Open Street Map(2/2)
●
Technique
– Utilisation projection mercator,
– Rendu "mapnik" à partir de l'OSM
●
via le serveur de mise en cache des tuiles de Kairo
●
Arbres et bâtiments
– données OSM en direct via l'API Overpass
●
Configuration de la caméra / contrôleur
– pour prendre en charge plusieurs appareils pour la navigation
de la scène
●
Bibliothèque A-frame de Mozilla
- @hellosct1 –
L’origine
Les fondamentaux
La pratique
Interface utilisateur
- @hellosct1 –
Interfaces utilisateurs
http://www.createwebxr.com/webVR.html
- @hellosct1 –
A-Frame editor / inspector
https://github.com/aframevr/aframe-inspector●
Télécharger Inspecteur
●
Activé l’inspecteur (CTRL + ALT + I)
- @hellosct1 –
L’avenir
●
Les vêtements et les
intégrations vocales
offrent des opportunités
pour de nouveaux
modèles d'interaction
●
Hardware (matériels)
– Dispositifs à moindre coût,
matériel autonome, champs
de vision plus larges,
camears de profondeur plus
disponibles
●
(plus de) Web
– Wasm, webRTC, Speech to
text, temps réel, traduction,
robots, communication
multimodale
●
Framework
– Réduire les obstacles
au développement et à
la création de contenu
AR & VR
- @hellosct1 –
Plus loin
●
Exemples :
– https://aframe.io/
●
Docs
– http://aframe.io/docs/guide
●
Plugins & showcases
– http://github.com/aframevr/awesome-aframe#guides-and-t
utorials
●
MDN Web docs
●
A-frame doc
– https://aframe.io/docs
●
ThreeJS docs
– https://threejs.org/docs
●
W3C
– https://www.w3.org/TR/
webxr
- @hellosct1 –
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Demo scripts :Merci
https://github.com/hellosct1/mixte-realitySources :
- Liv Erickson
- Hellosct1

Contenu connexe

Similaire à La réalité mélangée dans vos applications

ADT SOFAVR jesnault 01-10-12 final presentation 2
ADT SOFAVR jesnault 01-10-12 final presentation 2ADT SOFAVR jesnault 01-10-12 final presentation 2
ADT SOFAVR jesnault 01-10-12 final presentation 2
Jérôme Esnault
 
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
Christophe Villeneuve
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtools
Christophe Villeneuve
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
Christophe Villeneuve
 
Une plateforme moderne pour le groupe SIPA/Ouest-France 
Une plateforme moderne pour le groupe SIPA/Ouest-France Une plateforme moderne pour le groupe SIPA/Ouest-France 
Une plateforme moderne pour le groupe SIPA/Ouest-France 
François-Guillaume Ribreau
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
MBA Multimedia
 
BreizhCamp 2019 - IoT et open source hardware pour la collecte de timeseries
BreizhCamp 2019 - IoT et open source hardware pour la collecte de timeseriesBreizhCamp 2019 - IoT et open source hardware pour la collecte de timeseries
BreizhCamp 2019 - IoT et open source hardware pour la collecte de timeseries
Xavier MARIN
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
Julien LE THUAUT
 
La réalité melangée dans vos applications
La réalité melangée dans vos applicationsLa réalité melangée dans vos applications
La réalité melangée dans vos applications
Christophe Villeneuve
 
Serveur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des ObjetsServeur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des Objets
Christophe Villeneuve
 
Tester et configurer vos profils avec les containers
Tester et configurer vos profils avec les containersTester et configurer vos profils avec les containers
Tester et configurer vos profils avec les containers
Christophe Villeneuve
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
davrous
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
Christophe Villeneuve
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
goldoraf
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Raphaël Goetter
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
Christophe Villeneuve
 
Open source et microsoft azure reve ou realite ?
Open source et microsoft azure reve ou realite ?Open source et microsoft azure reve ou realite ?
Open source et microsoft azure reve ou realite ?
Christophe Villeneuve
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
Sacha Leprêtre
 
Les outils et compétences nécessaires pour le développement en remote - Ce...
Les outils et compétences nécessaires pour le développement en remote - Ce...Les outils et compétences nécessaires pour le développement en remote - Ce...
Les outils et compétences nécessaires pour le développement en remote - Ce...
GDG Bujumbura
 

Similaire à La réalité mélangée dans vos applications (20)

ADT SOFAVR jesnault 01-10-12 final presentation 2
ADT SOFAVR jesnault 01-10-12 final presentation 2ADT SOFAVR jesnault 01-10-12 final presentation 2
ADT SOFAVR jesnault 01-10-12 final presentation 2
 
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
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtools
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
 
Une plateforme moderne pour le groupe SIPA/Ouest-France 
Une plateforme moderne pour le groupe SIPA/Ouest-France Une plateforme moderne pour le groupe SIPA/Ouest-France 
Une plateforme moderne pour le groupe SIPA/Ouest-France 
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
 
BreizhCamp 2019 - IoT et open source hardware pour la collecte de timeseries
BreizhCamp 2019 - IoT et open source hardware pour la collecte de timeseriesBreizhCamp 2019 - IoT et open source hardware pour la collecte de timeseries
BreizhCamp 2019 - IoT et open source hardware pour la collecte de timeseries
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
 
La réalité melangée dans vos applications
La réalité melangée dans vos applicationsLa réalité melangée dans vos applications
La réalité melangée dans vos applications
 
Serveur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des ObjetsServeur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des Objets
 
Tester et configurer vos profils avec les containers
Tester et configurer vos profils avec les containersTester et configurer vos profils avec les containers
Tester et configurer vos profils avec les containers
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
 
Open source et microsoft azure reve ou realite ?
Open source et microsoft azure reve ou realite ?Open source et microsoft azure reve ou realite ?
Open source et microsoft azure reve ou realite ?
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Les outils et compétences nécessaires pour le développement en remote - Ce...
Les outils et compétences nécessaires pour le développement en remote - Ce...Les outils et compétences nécessaires pour le développement en remote - Ce...
Les outils et compétences nécessaires pour le développement en remote - Ce...
 

Plus de Christophe Villeneuve

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
Christophe Villeneuve
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
Christophe Villeneuve
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
Christophe Villeneuve
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
Christophe Villeneuve
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
Christophe Villeneuve
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
Christophe Villeneuve
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
Christophe Villeneuve
 
Foxfooding
FoxfoodingFoxfooding
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
Christophe Villeneuve
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
Christophe Villeneuve
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
Christophe Villeneuve
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
Christophe Villeneuve
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
Christophe Villeneuve
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
Christophe Villeneuve
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
Christophe Villeneuve
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
Christophe Villeneuve
 
Souverainte des données
Souverainte des donnéesSouverainte des données
Souverainte des données
Christophe Villeneuve
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
Christophe Villeneuve
 
Controler vos donnees dans le web
Controler vos donnees dans le webControler vos donnees dans le web
Controler vos donnees dans le web
Christophe Villeneuve
 
La sécurité au coeur des projets webs de demain
La sécurité au coeur des projets webs de demainLa sécurité au coeur des projets webs de demain
La sécurité au coeur des projets webs de demain
Christophe Villeneuve
 

Plus de Christophe Villeneuve (20)

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
 
Foxfooding
FoxfoodingFoxfooding
Foxfooding
 
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
 
Souverainte des données
Souverainte des donnéesSouverainte des données
Souverainte des données
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 
Controler vos donnees dans le web
Controler vos donnees dans le webControler vos donnees dans le web
Controler vos donnees dans le web
 
La sécurité au coeur des projets webs de demain
La sécurité au coeur des projets webs de demainLa sécurité au coeur des projets webs de demain
La sécurité au coeur des projets webs de demain
 

La réalité mélangée dans vos applications

  • 1. La réalité mélangée dans vos applications Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Confoo.ca 26 février 2020
  • 2. Atos open source - afup – lemug.fr – mariadb – drupal – mozilla - firefox – lemugfr - sumo – webextensions – VR – AR – XR - Cause commune 93.1 FM - TechSpeaker - Lizard - eyrolles – editions eni – programmez – linux pratique – webriver – elephpant - CommonVoice – Sécurité - Cybersécurité Christophe Villeneuve ? ● Consultant ● Dresseur animaux Free Software
  • 3. - @hellosct1 – La réalité…??xx!?& !!?? ● Réalité Augmenté ● Réalité Virtuelle ● MiXte Réalité
  • 4. - @hellosct1 – Aujourd’hui ● On reprend l’origine ● Les bases ● La pratique ● Interface utilisateur
  • 5. - @hellosct1 – L’origine Les fondamentaux La pratique Interface utilisateur
  • 6. - @hellosct1 – De nombreux essais dans la Réalité Augmenté Virtual Box Nintendo (1995) CardboardCardboard … Beaucoup de tentatives
  • 8. - @hellosct1 – Actuellement… plusieurs familles http://www.createwebxr.com/webVR.html
  • 9. - @hellosct1 – WebVR supportés par les navigateurs http://createwebvr.com/ Mozilla Firefox Microsoft Edge Google Chrome Brave Desktop & mobile Desktop Servo Mobile Mobile & HMD Samsung internet HMD Brave Firefox Reality Oculus Browser Supermedium
  • 10. - @hellosct1 – Compatibilité WebVR : Navigateur / Matériels https://webvr.rocks/
  • 11. - @hellosct1 – Les métiers...
  • 12. - @hellosct1 – L’origine Les fondamentaux La pratique Interface utilisateur
  • 13. - @hellosct1 – La réalité mélangée ? ● Etre dans la scène 3D ● Immersion ● Transporte l'utilisateur dans un environnement numérique ● Positionnement objet 3D – Environnement réel ● Ajouter des éléments réels – Champ de vision ● Intègre le contenu numérique dans notre monde physique Réalité Virtuelle Réalité Augmentée
  • 14. - @hellosct1 – Réalité Amplifiée Réalité Augmentée Réalité Mélangée Virtualité Augmentée Réalité Virtuelle Réalité Virtualisée Réalité Réelle Réel Réalité mixte Virtuel Où se positionne-t-on ?
  • 15. - @hellosct1 – WebXR (1/2) ● Nouveau standard web VR / MR / XR ● Périphériques / matériels (devices) ● Couverture ● Interraction des utilisateurs ● Rendu https://www.w3.org/TR/webxr Draft : 10 février 2020
  • 16. - @hellosct1 – WebXR (2/2) ● Soutenu par – Mozilla, Google, Microsoft, Amazon, Samsung… ● Remplacera l’API WebVR ● Actuellement compatible – Chrome – Firefox Reality ● Prochainement : Firefox – Emulator WebXR
  • 17. - @hellosct1 – Puissance et Extensible jQuery React Redux Vue.js ... DOM A-Frame A-Frame Components Entity-component Gamepad A C C E S S I B L E Navigateurs WebGL Web Audio WebVR Web Speech webXR
  • 18. - @hellosct1 – L’origine Les fondamentaux La pratique Interface utilisateur
  • 19. - @hellosct1 – Page web <!DOCTYPE html> <html> <head> <script src="librairy.min.js"></script> </head> <body> ... </body> </html>
  • 21. - @hellosct1 – La réalité augmentée ● Utilisation – Framework A-frame <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene>
  • 22. - @hellosct1 – La réalité augmentée… pas vraiment 02 <div style='position: fixed; top: 10px; width:100%; text-align: left; z-index: 1;'> <img src= "assets/image.png" width="300px"> </div> <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene>
  • 23. - @hellosct1 – Avec un CMS / Framework (1/2) ● Back office – Type de contenu – Views 08
  • 24. - @hellosct1 – Avec un CMS / Framework (2/2) ● Texte Wysiwyg ● Librairie : aframe-html-shader <a-scene> <a-plane position="0 2 -6" height="3" width="3" rotation="-45 0 0" material="shader: html; target: #planeHTML; ratio: height;transparent: true; »> </a-plane> </a-scene> <div style="width: 1px; height: 1px; overflow: hidden"> <div id="planeHTML"> <h2>Welcome!</h2> <p>Circa hos dies anuginis adulescens,</p> <p>Lampadi <strong>manu</strong>….</p> </div> </div>
  • 25. - @hellosct1 – Frameworks (avec extensions) A-Frame React 360 Three JS Babylon JS 4.0
  • 26. - @hellosct1 – Vue 360° (en background) 10 <a-scene> <a-assets> <img id="my-image" src="assets/media/garden.png"> </a-assets> <a-sky src="#my-image" rotation="0 -130 0" height="140" radius="100" thete-length="300" scale="0.8 0.8 0.8"></a-sky> <a-text color="#FF0000" font="kelsonsans" value="Welcome" width="6" position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text> </a-scene>
  • 27. - @hellosct1 – Par le code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="lib/a-frame/aframe-v0.8.2.min.js"></script> </head> <body> <a-scene> <a-assets> <img id="my-image" src="assets/media/garden.png"> </a-assets> <a-sky src="#my-image" rotation="0 -130 0" height="140" radius="100" thete-length="300" scale="0.8 0.8 0.8" ></a-sky> </a-scene> </body> </html>
  • 28. - @hellosct1 – Objets en VR ● Objets fixes ● Objets animés ● Animation ● Vidéo ● Son ● Texture ● Objets externes 15
  • 29. - @hellosct1 – Outillage : objet / 3 D ● SketchUp ● Unity VR ● Oculus ● Dcatia ● Blender ● Unreal engine ● Vive ● Autodesk 3D mask ● Microsoft store
  • 30. - @hellosct1 – XR : A-Frame + CMS Drupal (1/2) 24 Démo en ligne : https://glitch.com/~xr-a-frame-and-drupal
  • 31. - @hellosct1 – XR : A-Frame + CMS Drupal (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  • 32. - @hellosct1 – Geo-Localisation Démo en ligne https://glitch.com/~l10n-poi31
  • 33. - @hellosct1 – XR : A-Frame + Open Street Map (1/2) https://vrmap.kairo.at/
  • 34. - @hellosct1 – XR : A-Frame + Open Street Map(2/2) ● Technique – Utilisation projection mercator, – Rendu "mapnik" à partir de l'OSM ● via le serveur de mise en cache des tuiles de Kairo ● Arbres et bâtiments – données OSM en direct via l'API Overpass ● Configuration de la caméra / contrôleur – pour prendre en charge plusieurs appareils pour la navigation de la scène ● Bibliothèque A-frame de Mozilla
  • 35. - @hellosct1 – L’origine Les fondamentaux La pratique Interface utilisateur
  • 36. - @hellosct1 – Interfaces utilisateurs http://www.createwebxr.com/webVR.html
  • 37. - @hellosct1 – A-Frame editor / inspector https://github.com/aframevr/aframe-inspector● Télécharger Inspecteur ● Activé l’inspecteur (CTRL + ALT + I)
  • 38. - @hellosct1 – L’avenir ● Les vêtements et les intégrations vocales offrent des opportunités pour de nouveaux modèles d'interaction ● Hardware (matériels) – Dispositifs à moindre coût, matériel autonome, champs de vision plus larges, camears de profondeur plus disponibles ● (plus de) Web – Wasm, webRTC, Speech to text, temps réel, traduction, robots, communication multimodale ● Framework – Réduire les obstacles au développement et à la création de contenu AR & VR
  • 39. - @hellosct1 – Plus loin ● Exemples : – https://aframe.io/ ● Docs – http://aframe.io/docs/guide ● Plugins & showcases – http://github.com/aframevr/awesome-aframe#guides-and-t utorials ● MDN Web docs ● A-frame doc – https://aframe.io/docs ● ThreeJS docs – https://threejs.org/docs ● W3C – https://www.w3.org/TR/ webxr
  • 40. - @hellosct1 – Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Demo scripts :Merci https://github.com/hellosct1/mixte-realitySources : - Liv Erickson - Hellosct1