Constuire le web en AR/VR

A51a19db1e861ad9e007de8a955d5141?s=47 hellosct1
November 15, 2019

Constuire le web en AR/VR

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

A51a19db1e861ad9e007de8a955d5141?s=128

hellosct1

November 15, 2019
Tweet

Transcript

  1. 2.

    Firefox France User groupe – 15 novembre 2019 La réalité…??xx!?&

    !!?? • Réalité Augmenté • Réalité Virtuelle • MiXte Réalité
  2. 3.

    Firefox France User groupe – 15 novembre 2019 Aujourd’hui •

    Les fondamentaux / Les bases • La pratique
  3. 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
  4. 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 ?
  5. 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
  6. 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
  7. 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
  8. 10.

    Firefox France User groupe – 15 novembre 2019 Frameworks (avec

    extensions) A-Frame React 360 Three JS Babylon JS 4.0
  9. 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>
  10. 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>
  11. 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>
  12. 15.

    @hellosct1 Geek FaërIes 2019 Avec un CMS / Framework (1/2)

    • Back office – Type de contenu – Views 03
  13. 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>
  14. 17.

    Firefox France User groupe – 15 novembre 2019 Objets en

    VR • Objets fixes • Objets animés • Animation • Vidéo • Son • Texture • Objets externes 11
  15. 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>
  16. 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
  17. 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
  18. 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)
  19. 22.

    @hellosct1 Geek FaërIes 2019 XR : A-Frame + CMS Drupal

    (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  20. 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
  21. 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
  22. 25.

    Firefox France User groupe – 15 novembre 2019 Christophe Villeneuve

    @hellosct1 @hellosct1@mamot.fr Demo Scripts : Merci https://github.com/hellosct1/mixte-reality Sources : - Liv Erickson - Hellosct1