Upgrade to Pro — share decks privately, control downloads, hide ads and more …

La réalité melangée dans vos applications

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.

hellosct1

December 11, 2019
Tweet

More Decks by hellosct1

Other Decks in Technology

Transcript

  1. ATOS OpenSource - @hellosct1 – La réalité…??xx!?& !!?? • Réalité

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

    Les bases • La pratique • Interface utilisateur
  3. 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
  4. 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 ?
  5. 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
  6. 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
  7. 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
  8. 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>
  9. 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>
  10. ATOS OpenSource - @hellosct1 – Page web <!DOCTYPE html> <html>

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

    (1/2) • Back office – Type de contenu – Views 03
  12. 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>
  13. ATOS OpenSource - @hellosct1 – Objets en VR • Objets

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

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

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

    Drupal (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  18. ATOS OpenSource - @hellosct1 – A-Frame editor / inspector https://github.com/aframevr/aframe-inspector

    • Télécharger Inspecteur • Activé l’inspecteur (CTRL + ALT + I)
  19. 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
  20. 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
  21. ATOS OpenSource - @hellosct1 – Christophe Villeneuve @hellosct1 @[email protected] Demo

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