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.

Construire le web en AR - VR

756 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×