Télécharger pour lire hors ligne
Téléchargé parChristophe Villeneuve
La réalité melangée dans vos applications
Le document présente un aperçu des réalités augmentée, virtuelle et mixte, en mettant en avant des technologies comme WebXR et des frameworks tels qu'A-Frame pour le développement d'applications immersives. Il aborde également les fondamentaux de l'interface utilisateur, l'intégration de contenu numérique et des exemples pratiques d'utilisation de ces technologies. Enfin, le document souligne les tendances futures et les opportunités dans le domaine des interactions et du matériel associé.
La réalité melangée dans vos applications
- 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-realitySources : - Liv Erickson - Hellosct1