La réalité melangée dans vos applications

A51a19db1e861ad9e007de8a955d5141?s=47 hellosct1
December 11, 2019

La réalité melangée dans vos applications

Présentation effectuée au Paris Open Source Summit 2019 (11 décembre 2019) par Christophe Villeneuve sur "La réalité mélangée dans vos applications".
Vous allez voir en associant la réalité augmentée et la réalité virtuelle la possibilité de manipuler les objets virtuelles pour les affichés dans les applications webs comme avec Drupal.

A51a19db1e861ad9e007de8a955d5141?s=128

hellosct1

December 11, 2019
Tweet

Transcript

  1. @hellosct1 @hellosct1@mamot.fr Christophe Villeneuve La réalité mélangée dans vos applications

    Open Source Summit 2019
  2. ATOS OpenSource - @hellosct1 – La réalité…??xx!?& !!?? • Réalité

    Augmenté • Réalité Virtuelle • MiXte Réalité
  3. ATOS OpenSource - @hellosct1 – Aujourd’hui • Les fondamentaux /

    Les bases • La pratique • Interface utilisateur
  4. ATOS OpenSource - @hellosct1 – Les fondamentaux La pratique Interface

    utilisateur
  5. ATOS OpenSource - @hellosct1 – La réalité mélangée ? •

    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. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – 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
  9. ATOS OpenSource - @hellosct1 – WebXR (2/2) • Soutenu par

    – Mozilla, Google, Microsoft, Amazon, Samsung… • Remplacera l’API WebVR • Actuellement compatible – Chrome – Firefox Réality • Prochainement : Firefox – Emulator WebXR
  10. ATOS OpenSource - @hellosct1 – Les fondamentaux La pratique Interface

    utilisateur
  11. ATOS OpenSource - @hellosct1 – Frameworks AR

  12. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – Page web <!DOCTYPE html> <html>

    <head> <script src="assets/lib/aframe-x.x.x.min.js"></script> </head> <body> ... </body> </html>
  15. ATOS OpenSource - @hellosct1 – Avec un CMS / Framework

    (1/2) • Back office – Type de contenu – Views 03
  16. ATOS OpenSource - @hellosct1 – 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. ATOS OpenSource - @hellosct1 – Frameworks (avec extensions) A-Frame React

    360 Three JS Babylon JS 4.0
  18. ATOS OpenSource - @hellosct1 – Objets en VR • Objets

    fixes • Objets animés • Animation • Vidéo • Son • Texture • Objets externes 11
  19. ATOS OpenSource - @hellosct1 – Outillage : objet / 3

    D • SketchUp • Unity VR • Oculus • Dcatia • Blender • Unreal engine • Vive • Autodesk 3D mask • Microsoft store
  20. ATOS OpenSource - @hellosct1 – 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>
  21. ATOS OpenSource - @hellosct1 – XR : A-Frame + CMS

    Drupal (1/2) 24 Démo en ligne : https://glitch.com/~xr-a-frame-and-drupal
  22. ATOS OpenSource - @hellosct1 – XR : A-Frame + CMS

    Drupal (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  23. ATOS OpenSource - @hellosct1 – Les fondamentaux La pratique Interface

    utilisateur
  24. ATOS OpenSource - @hellosct1 – Interfaces utilisateurs http://www.createwebxr.com/webVR.html

  25. ATOS OpenSource - @hellosct1 – A-Frame editor / inspector https://github.com/aframevr/aframe-inspector

    • Télécharger Inspecteur • Activé l’inspecteur (CTRL + ALT + I)
  26. ATOS OpenSource - @hellosct1 – 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
  27. ATOS OpenSource - @hellosct1 – 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
  28. ATOS OpenSource - @hellosct1 – Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Demo

    scripts : Merci https://github.com/hellosct1/mixte-reality Sources : - Liv Erickson - Hellosct1