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 realite mixte

1,055 views

Published on

Présentation effectuée au Geek Faëries 2019 (9 juin 2019) par Christophe Villeneuve sur "La mixte réalité".
Vous allez voir en associant la réalité augmentée et la réalité virtuelle, vous obtenez la mixte réalité.
La présentation montre comment associé d'autres projets avec A-Frame comme un CMS Drupal, Open Street Map, Spoke

Published in: Internet
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

La realite mixte

  1. 1. La réalité mixte Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Geek FaërIes 2019 – le 9 juin 2019
  2. 2. @hellosct1 Geek FaërIes 2019 La réalité…??xx!?& !!?? ● Réalité Augmenté ● Réalité Virtuelle ● MiXte Réalité API UX Design
  3. 3. Christophe Villeneuve ? ● Consultant ● Dresseur animaux Free Software
  4. 4. Geek FaërIes 2019 Informations
  5. 5. @hellosct1 Geek FaërIes 2019 Réalité mixte ? ● 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
  6. 6. @hellosct1 Geek FaërIes 2019 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 ?
  7. 7. @hellosct1 Geek FaërIes 2019 Matériels
  8. 8. @hellosct1 Geek FaërIes 2019 Matériels VR
  9. 9. @hellosct1 Geek FaërIes 2019 Les métiers XR
  10. 10. @hellosct1 Geek FaërIes 2019 WebXR ● Périphériques / matériels (devices) ● Couverture ● Interraction des utilisateurs ● Rendu https://www.w3.org/TR/webxr Draft : 21 May 2019
  11. 11. @hellosct1 Geek FaërIes 2019 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
  12. 12. @hellosct1 Geek FaërIes 2019 Compatibilité API Navigateurs WebXR Source: https://caniuse.com/#search=xr API WebXR
  13. 13. @hellosct1 Geek FaërIes 2019 Mais...
  14. 14. @hellosct1 Geek FaërIes 2019 Concrètement ● Libraries JS ● Frameworks ● Polyfill → comblent les lacunes
  15. 15. @hellosct1 Geek FaërIes 2019 Frameworks (avec extensions) A-Frame React 360 Three JS Babylon JS 4.0
  16. 16. La pratique
  17. 17. Geek FaërIes 2019 Réalité augmenté
  18. 18. @hellosct1 Geek FaërIes 2019 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>
  19. 19. @hellosct1 Geek FaërIes 2019 Page web <!DOCTYPE html> <html> <head> <script src="assets/lib/aframe-x.x.x.min.js"></script> </head> <body> ... </body> </html>
  20. 20. @hellosct1 Geek FaërIes 2019 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>
  21. 21. @hellosct1 Geek FaërIes 2019 Avec un CMS / Framework (1/2) ● Back office – Type de contenu – Views 02
  22. 22. @hellosct1 Geek FaërIes 2019 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>
  23. 23. @hellosct1 Geek FaërIes 2019 Realite virtuelle
  24. 24. @hellosct1 Geek FaërIes 2019 Vue 360° 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>
  25. 25. @hellosct1 Geek FaërIes 2019 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-curvedimage src="media/rayon-magasin.jpg" height="140" radius="100" thete-length="300" rotation="0 0 0" > </a-curvedimage> <a-sky color="darkgrey"></a-sky> </a-scene> </body> </html>
  26. 26. @hellosct1 Geek FaërIes 2019 Objets en VR ● Objets fixes ● Objets animés ● Animation ● Vidéo ● Son ● Texture ● Objets externes 11
  27. 27. @hellosct1 Geek FaërIes 2019 Objets animés 12 Démo en ligne : https://glitch.com/~reality-virtuel-demo
  28. 28. @hellosct1 Geek FaërIes 2019 A-Frame editor / inspector https://github.com/aframevr/aframe-inspector● Télécharger Inspecteur ● Activé l’inspecteur (CTRL + ALT + I)
  29. 29. @hellosct1 Geek FaërIes 2019 Mixte realite
  30. 30. @hellosct1 Geek FaërIes 2019 XR : Aframe + ThreeJS 22
  31. 31. @hellosct1 Geek FaërIes 2019 XR : A-Frame + CMS Drupal (1/2) 24 Démo en ligne : https://glitch.com/~xr-a-frame-and-drupal
  32. 32. @hellosct1 Geek FaërIes 2019 XR : A-Frame + CMS Drupal (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  33. 33. @hellosct1 Geek FaërIes 2019 XR : A-Frame + Open Street Map (1/2) https://vrmap.kairo.at/
  34. 34. @hellosct1 Geek FaërIes 2019 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. 35. Geek FaërIes 2019
  36. 36. @hellosct1 Geek FaërIes 2019 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 ●
  37. 37. @hellosct1 Geek FaërIes 2019 Spoke https://hubs.mozilla.com/spoke/projects
  38. 38. @hellosct1 Geek FaërIes 2019 Plus loin ● Exemples : – https://aframe.io/ ● Docs – http://aframe.io/docs/guide ● Plugins & showcases – http://github.com/aframevr/awesome-aframe#guides -and-tutorials ● MDN Web docs ● A-frame doc – https://aframe.io/docs ● ThreeJS docs – https://threejs.org/docs ● W3C – https://www.w3.org/TR /webxr
  39. 39. @hellosct1 Geek FaërIes 2019 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
  40. 40. Geek FaërIes 2019 Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Demo Scripts :Merci https://github.com/hellosct1/mixte-realitySources : - Liv Erickson - Rober kaiser

×