Successfully reported this slideshow.
Your SlideShare is downloading. ×

Construire le web en AR - VR

Construire le web en AR - VR

Download to read offline

Présentation effectuée à Meetup Firefox (15 novembre 2019) par Christophe Villeneuve sur "Construire le Web en AR / VR".
Une occasion pour voir les possibilités qu'offre le framework aframe de Mozilla dans le web

Présentation effectuée à Meetup Firefox (15 novembre 2019) par Christophe Villeneuve sur "Construire le Web en AR / VR".
Une occasion pour voir les possibilités qu'offre le framework aframe de Mozilla dans le web

Advertisement
Advertisement

More Related Content

Advertisement

Construire le web en AR - VR

  1. 1. @hellosct1 @hellosct1@mamot.fr Christophe Villeneuve Construire le Web en AR/VR Firefox France User groupe – 15 novembre 2019
  2. 2. Firefox France User groupe – 15 novembre 2019 La réalité…??xx!?& !!?? ● Réalité Augmenté ● Réalité Virtuelle ● MiXte Réalité
  3. 3. Firefox France User groupe – 15 novembre 2019 Aujourd’hui ● Les fondamentaux / Les bases ● La pratique
  4. 4. Firefox France User groupe – 15 novembre 2019 Les fondamentaux La pratique
  5. 5. Firefox France User groupe – 15 novembre 2019 La Réalité ? ● 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. Firefox France User groupe – 15 novembre 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. Firefox France User groupe – 15 novembre 2019 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
  8. 8. Firefox France User groupe – 15 novembre 2019 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 octobre 2019
  9. 9. Firefox France User groupe – 15 novembre 2019 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
  10. 10. Firefox France User groupe – 15 novembre 2019 Frameworks (avec extensions) A-Frame React 360 Three JS Babylon JS 4.0
  11. 11. Firefox France User groupe – 15 novembre 2019 Les fondamentaux La pratique
  12. 12. Firefox France User groupe – 15 novembre 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>
  13. 13. Firefox France User groupe – 15 novembre 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>
  14. 14. Firefox France User groupe – 15 novembre 2019 Page web <!DOCTYPE html> <html> <head> <script src="assets/lib/aframe-x.x.x.min.js"></script> </head> <body> ... </body> </html>
  15. 15. @hellosct1 Geek FaërIes 2019 Avec un CMS / Framework (1/2) ● Back office – Type de contenu – Views 03
  16. 16. @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>
  17. 17. Firefox France User groupe – 15 novembre 2019 Objets en VR ● Objets fixes ● Objets animés ● Animation ● Vidéo ● Son ● Texture ● Objets externes 11
  18. 18. Firefox France User groupe – 15 novembre 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/image.jpg" height="140" radius="100" thete-length="300" rotation="0 0 0" > </a-curvedimage> <a-sky color="darkgrey"></a-sky> </a-scene> </body> </html>
  19. 19. Firefox France User groupe – 15 novembre 2019 Outillage : contenu 3 D ● SketchUp ● Unity VR ● Oculus ● Dcatia ● Blender ● Unreal engine ● Vive ● Autodesk 3D mask ● Microsoft store
  20. 20. @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
  21. 21. Firefox France User groupe – 15 novembre 2019 A-Frame editor / inspector https://github.com/aframevr/aframe-inspector● Télécharger Inspecteur ● Activé l’inspecteur (CTRL + ALT + I)
  22. 22. @hellosct1 Geek FaërIes 2019 XR : A-Frame + CMS Drupal (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  23. 23. Firefox France User groupe – 15 novembre 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
  24. 24. Firefox France User groupe – 15 novembre 2019 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
  25. 25. Firefox France User groupe – 15 novembre 2019 Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Demo Scripts :Merci https://github.com/hellosct1/mixte-realitySources : - Liv Erickson - Hellosct1

×