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

A51a19db1e861ad9e007de8a955d5141?s=47 hellosct1
December 07, 2019

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

A51a19db1e861ad9e007de8a955d5141?s=128

hellosct1

December 07, 2019
Tweet

Transcript

  1. La réalité mélangée De A à Z Christophe Villeneuve @hellosct1

    @hellosct1@mamot.fr Root66 – 7 décembre 2019
  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. 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. La situation Les ... réalités ... Web XR Outillages /

    UI
  5. ATOS OpenSource - @hellosct1 – Root 66 WebAR / WebVR

    / WebXR • Apporter la réalité virtuelle performance dans web ouvert
  6. ATOS OpenSource - @hellosct1 – Root 66 Réellement...

  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. ATOS OpenSource - @hellosct1 – Root 66 Origine du commencement

  9. ATOS OpenSource - @hellosct1 – Root 66 Science fiction

  10. ATOS OpenSource - @hellosct1 – Root 66 De nombreux essais

    dans la Réalité Augmenté Virtual Box Nintendo (1995) Cardboard Cardboard … Beaucoup de tentatives
  11. ATOS OpenSource - @hellosct1 – Root 66 Où encore...

  12. ATOS OpenSource - @hellosct1 – Root 66 Le matériel d'aujourd'hui

    • Quelques exemples Oculus HTC Samsung Google
  13. ATOS OpenSource - @hellosct1 – Root 66 Matériels

  14. ATOS OpenSource - @hellosct1 – Root 66 Actuellement… plusieurs familles

    http://www.createwebxr.com/webVR.html
  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. ATOS OpenSource - @hellosct1 – Root 66 Compatibilité WebVR :

    Navigateur / Matériels https://webvr.rocks/
  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. La situation Les ... réalités ... Web XR Outillages /

    UI
  19. ATOS OpenSource - @hellosct1 – Root 66 Réalité augmenté →

    WebAR
  20. ATOS OpenSource - @hellosct1 – Root 66 Stéréoscopie • Perception

    du relief
  21. ATOS OpenSource - @hellosct1 – Root 66 Photo spheres

  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. ATOS OpenSource - @hellosct1 – Root 66 Framework AR

  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. 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. 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. 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. ATOS OpenSource - @hellosct1 – Root 66 Réalité virtuelle →

    WebVR
  29. ATOS OpenSource - @hellosct1 – Root 66 Frameworks (avec extensions)

    A-Frame React 360 Three JS Babylon JS 4.0
  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. 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. 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. 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. 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. ATOS OpenSource - @hellosct1 – Root 66 Objets en VR

    • Objets fixes • Objets animés • Animation • Vidéo • Son • Texture • Objets externes 11
  36. ATOS OpenSource - @hellosct1 – Root 66 Objets • Demo

    08 https://animation-vr-booth.glitch.me/08-VR-objet.html
  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. 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. ATOS OpenSource - @hellosct1 – Root 66 Objets : Son

    • Déclaration <a-assets> <audio id="sound" src="music.mp3"></audio> </a-assets>
  40. ATOS OpenSource - @hellosct1 – Root 66 Objets animés 12

    Démo en ligne : https://glitch.com/~reality-virtuel-demo
  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. ATOS OpenSource - @hellosct1 – Root 66 AR + VR

  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. ATOS OpenSource - @hellosct1 – Root 66 Avec un CMS

    / Framework (1/2) • Back office – Type de contenu – Views 03
  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. 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. 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. 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. ATOS OpenSource - @hellosct1 – Root 66 XR : A-Frame

    + CMS Drupal (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  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. ATOS OpenSource - @hellosct1 – Root 66 A-Frame + Open

    Street Map (1/2) https://vrmap.kairo.at/
  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. La situation Les ... réalités ... Web XR Outillages /

    UI
  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. ATOS OpenSource - @hellosct1 – Root 66 Les métiers XR

  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. 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. ATOS OpenSource - @hellosct1 – Root 66 Concrètement • Libraries

    JS • Frameworks • Polyfill → comblent les lacunes
  59. ATOS OpenSource - @hellosct1 – Root 66 Exemples

  60. La situation Les ... réalités ... Web XR Outillages /

    UI
  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. ATOS OpenSource - @hellosct1 – Root 66 Interfaces utilisateurs http://www.createwebxr.com/webVR.html

  63. ATOS OpenSource - @hellosct1 – Root 66 A-Frame editor /

    inspector • Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector
  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. ATOS OpenSource - @hellosct1 – Root 66 Spoke https://hubs.mozilla.com/spoke/projects

  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. 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. ATOS OpenSource - @hellosct1 – Root 66 XR : Aframe

    + ThreeJS 22
  69. Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Demo Scripts : Merci https://github.com/hellosct1/mixte-reality Sources

    : - Liv Erickson - Hellosct1