Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

la réalité mélangée de A a Z

Présentation effectuée sur "La réalité mélangée de A à Z" par Christophe Villeneuve à l'association Root66 (7 décembre 2019)
Un tour général sur la réalité virtuelle, réalité augmentée, réalité virtuelle associé à la réalité mélangée pour les utiliser dans les applications webs

  • Login to see the comments

  • Be the first to like this

la réalité mélangée de A a Z

  1. 1. La réalité mélangée De A à Z Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Root66 – 7 décembre 2019
  2. 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. 3. ATOS OpenSource - @hellosct1 – Root 66 Sommaire ● La situation ● Les ... réalités ... ● Web XR ● Outillages / UI → Réalité Augmenté → Réalité Virtuelle → AR + VR
  4. 4. La situation Les ... réalités ... Web XR Outillages / UI
  5. 5. ATOS OpenSource - @hellosct1 – Root 66 WebAR / WebVR / WebXR ● Apporter la réalité virtuelle performance dans web ouvert
  6. 6. ATOS OpenSource - @hellosct1 – Root 66 Réellement...
  7. 7. ATOS OpenSource - @hellosct1 – Root 66 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 ?
  8. 8. ATOS OpenSource - @hellosct1 – Root 66 Origine du commencement
  9. 9. ATOS OpenSource - @hellosct1 – Root 66 Science fiction
  10. 10. ATOS OpenSource - @hellosct1 – Root 66 De nombreux essais dans la Réalité Augmenté Virtual Box Nintendo (1995) CardboardCardboard … Beaucoup de tentatives
  11. 11. ATOS OpenSource - @hellosct1 – Root 66 Où encore...
  12. 12. ATOS OpenSource - @hellosct1 – Root 66 Le matériel d'aujourd'hui ● Quelques exemples Oculus HTC Samsung Google
  13. 13. ATOS OpenSource - @hellosct1 – Root 66 Matériels
  14. 14. ATOS OpenSource - @hellosct1 – Root 66 Actuellement… plusieurs familles http://www.createwebxr.com/webVR.html
  15. 15. ATOS OpenSource - @hellosct1 – Root 66 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
  16. 16. ATOS OpenSource - @hellosct1 – Root 66 Compatibilité WebVR : Navigateur / Matériels https://webvr.rocks/
  17. 17. ATOS OpenSource - @hellosct1 – Root 66 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 Web XR
  18. 18. La situation Les ... réalités ... Web XR Outillages / UI
  19. 19. ATOS OpenSource - @hellosct1 – Root 66 Réalité augmenté → WebAR
  20. 20. ATOS OpenSource - @hellosct1 – Root 66 Stéréoscopie ● Perception du relief
  21. 21. ATOS OpenSource - @hellosct1 – Root 66 Photo spheres
  22. 22. ATOS OpenSource - @hellosct1 – Root 66 Web AR ? ● Realité augmentée dans le Web ● Positionner un objet 3D – Dans un environnement réél ● Ajouter des élément numériques – Dans un champ de vision
  23. 23. ATOS OpenSource - @hellosct1 – Root 66 Framework AR
  24. 24. ATOS OpenSource - @hellosct1 – Root 66 La réalité augmentée ● Utilisation – Framework A-frame 1 <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene>
  25. 25. ATOS OpenSource - @hellosct1 – Root 66 La réalité augmentée… pas vraiment 01 <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>
  26. 26. ATOS OpenSource - @hellosct1 – Root 66 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>
  27. 27. ATOS OpenSource - @hellosct1 – Root 66 Page web <!DOCTYPE html> <html> <head> <script src="assets/lib/aframe-x.x.x.min.js"></script> </head> <body> ... </body> </html>
  28. 28. ATOS OpenSource - @hellosct1 – Root 66 Réalité virtuelle → WebVR
  29. 29. ATOS OpenSource - @hellosct1 – Root 66 Frameworks (avec extensions) A-Frame React 360 Three JS Babylon JS 4.0
  30. 30. ATOS OpenSource - @hellosct1 – Root 66 Web VR ? ● API JavaScript expérimentale dans la navigateur web ● Prend en charge les périphériques de réalité virtuelle – HTC Vive, Oculus Rift, Google Cardboard ou OSVR ● Objectifs de l'API : – Détecter les périphériques de réalité virtuelle disponibles. – Interrogez les capacités des périphériques. – Sondez la position et l'orientation de l'appareil – Afficher les images sur l'appareil à la fréquence d'images appropriée.
  31. 31. ATOS OpenSource - @hellosct1 – Root 66 Vue 360° <a-scene> <a-curvedimage src="photo.jpg" height="140" radius="100" thete-length="360" Rotation="0 0 0"> </a-curvedimage> <a-sky color="darkgrey"></a-sky> </a-scene> 04 / 05 https://animation-vr-booth.glitch.me/05-VR-panorama.html
  32. 32. ATOS OpenSource - @hellosct1 – Root 66 Vue panoramique <a-scene> <a-curvedimage src="panoramique.jpg" height="140" radius="100" thete-length="300" Rotation="0 0 0"> </a-curvedimage> <a-sky color="darkgrey"></a-sky> </a-scene> 06 https://animation-vr-booth.glitch.me/06-VR-panorama.html
  33. 33. ATOS OpenSource - @hellosct1 – Root 66 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-curvedimage src="#my-image" height="140" radius="100" thete-length="300" rotation="0 0 0" > </a-curvedimage> <a-sky color="darkgrey"></a-sky> </a-scene> </body> </html>
  34. 34. ATOS OpenSource - @hellosct1 – Root 66 Vue 360° 07 <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> https://animation-vr-booth.glitch.me/07-VR-360.html
  35. 35. ATOS OpenSource - @hellosct1 – Root 66 Objets en VR ● Objets fixes ● Objets animés ● Animation ● Vidéo ● Son ● Texture ● Objets externes 11
  36. 36. ATOS OpenSource - @hellosct1 – Root 66 Objets ● Demo 08 https://animation-vr-booth.glitch.me/08-VR-objet.html
  37. 37. ATOS OpenSource - @hellosct1 – Root 66 Objets fixes <a-text position="0 0.25 -1" height="10" depth="2" color="#FF0000" value="Root 66"> </a-text> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"> </a-plane> 08
  38. 38. ATOS OpenSource - @hellosct1 – Root 66 Objets : animation ● Déclaration ● Animation <a-assets> <!-- Texture --> <img id="boxTexture" src="texture.jpg"> </a-assets> <a-cylinder src="#boxTexture" position="2 1.75 -3" radius="0.5" height="1.5" color="#FFC6FD" > <a-animation attribute="position" to="5 2.99 1" direction="alternateReverse" dur="3000" repeat="indefinite"></a-animation> </a-cylinder>
  39. 39. ATOS OpenSource - @hellosct1 – Root 66 Objets : Son ● Déclaration <a-assets> <audio id="sound" src="music.mp3"></audio> </a-assets>
  40. 40. ATOS OpenSource - @hellosct1 – Root 66 Objets animés 12 Démo en ligne : https://glitch.com/~reality-virtuel-demo
  41. 41. ATOS OpenSource - @hellosct1 – Root 66 A-Frame editor / inspector https://github.com/aframevr/aframe-inspector● Télécharger Inspecteur ● Activé l’inspecteur (CTRL + ALT + I)
  42. 42. ATOS OpenSource - @hellosct1 – Root 66 AR + VR
  43. 43. ATOS OpenSource - @hellosct1 – Root 66 AR + VR ? ● 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
  44. 44. ATOS OpenSource - @hellosct1 – Root 66 Avec un CMS / Framework (1/2) ● Back office – Type de contenu – Views 03
  45. 45. ATOS OpenSource - @hellosct1 – Root 66 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>
  46. 46. ATOS OpenSource - @hellosct1 – Root 66 Animation XR <a-sphere position="0 -4.25 -5" radius="1.25" color="#002DC9"> <a-animation attribute="position" from="2 -4 1" to="3 -6 -8" repeat="indefinite"> </a-animation> </a-sphere> <a-assets> <!-- Texture --> <img id="boxTexture" src="texture.jpg"> </a-assets> <a-marker-camera preset='hiro'></a-marker-camera> <a-text position="10 -4.25 -1" height="10" color="#FF0000" value="Programmez"> <a-animation attribute="position" from="12 -4 1" to="3 -6 -8" repeat="indefinite"></a- animation> </a-text> 10
  47. 47. ATOS OpenSource - @hellosct1 – Root 66 Animation XR <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" xr="ar: false" shadow> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow xr="magicWindow: false"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow xr="vr: false"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow xr="ar: false; vr: false;"></a-plane> <a-sky color="#ECECEC" side="back" xr="ar: false"></a-sky> </a-scene> 11
  48. 48. ATOS OpenSource - @hellosct1 – Root 66 XR : A-Frame + CMS Drupal (1/2) 24 Démo en ligne : https://glitch.com/~xr-a-frame-and-drupal
  49. 49. ATOS OpenSource - @hellosct1 – Root 66 XR : A-Frame + CMS Drupal (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  50. 50. ATOS OpenSource - @hellosct1 – Root 66 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>
  51. 51. ATOS OpenSource - @hellosct1 – Root 66 A-Frame + Open Street Map (1/2) https://vrmap.kairo.at/
  52. 52. ATOS OpenSource - @hellosct1 – Root 66 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
  53. 53. La situation Les ... réalités ... Web XR Outillages / UI
  54. 54. ATOS OpenSource - @hellosct1 – Root 66 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 : 5 Décembre 2019
  55. 55. ATOS OpenSource - @hellosct1 – Root 66 Les métiers XR
  56. 56. ATOS OpenSource - @hellosct1 – Root 66 WebXR (2/2) ● Soutenu par – Mozilla, Google, Microsoft, Amazon, Samsung… ● Remplacera l’API WebVR ● Actuellement compatible – Chrome – Firefox Réality ● Prochainement : Firefox 71 (10 décembre) – Emulator WebXR
  57. 57. ATOS OpenSource - @hellosct1 – Root 66 Cross-platform des navigateurs WebXR ● Engagements des standards WebXR proposés par W3C ● Les navigateurs prennent déjà en charge divers degrés pour l'écosystème Mozilla Firefox Chromium
  58. 58. ATOS OpenSource - @hellosct1 – Root 66 Concrètement ● Libraries JS ● Frameworks ● Polyfill → comblent les lacunes
  59. 59. ATOS OpenSource - @hellosct1 – Root 66 Exemples
  60. 60. La situation Les ... réalités ... Web XR Outillages / UI
  61. 61. ATOS OpenSource - @hellosct1 – Root 66 Outillage : contenu 3 D ● SketchUp ● Unity VR ● Oculus ● Dcatia ● Blender ● Unreal engine ● Vive ● Autodesk 3D mask ● Microsoft store
  62. 62. ATOS OpenSource - @hellosct1 – Root 66 Interfaces utilisateurs http://www.createwebxr.com/webVR.html
  63. 63. ATOS OpenSource - @hellosct1 – Root 66 A-Frame editor / inspector ● Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector
  64. 64. ATOS OpenSource - @hellosct1 – Root 66 Editeur de scène 3D : Spoke https://hubs.mozilla.com/spoke ● Création de son propre espace – De Réalité virtuelle ● Import objets au format GLTF – Runtime 3D Asset Felivry
  65. 65. ATOS OpenSource - @hellosct1 – Root 66 Spoke https://hubs.mozilla.com/spoke/projects
  66. 66. ATOS OpenSource - @hellosct1 – Root 66 Plus loin ● Exemples : – https://aframe.io/ ● Docs – http://aframe.io/docs/guide ● Plugins & showcases – http://github.com/aframevr/awesome-aframe#guides-and-tu torials ● MDN Web docs – https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API ● A-frame doc – https://aframe.io/docs ● ThreeJS docs – https://threejs.org/docs ● W3C – https://www.w3.org/TR/we bxr
  67. 67. ATOS OpenSource - @hellosct1 – Root 66 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
  68. 68. ATOS OpenSource - @hellosct1 – Root 66 XR : Aframe + ThreeJS 22
  69. 69. Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Demo Scripts :Merci https://github.com/hellosct1/mixte-realitySources : - Liv Erickson - Hellosct1

×