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.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

La réalité melangée dans vos applications

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

La réalité melangée dans vos applications

  1. 1. @hellosct1 @hellosct1@mamot.fr Christophe Villeneuve La réalité mélangée dans vos applications Open Source Summit 2019
  2. 2. ATOS OpenSource - @hellosct1 – La réalité…??xx!?& !!?? ● Réalité Augmenté ● Réalité Virtuelle ● MiXte Réalité
  3. 3. ATOS OpenSource - @hellosct1 – Aujourd’hui ● Les fondamentaux / Les bases ● La pratique ● Interface utilisateur
  4. 4. ATOS OpenSource - @hellosct1 – Les fondamentaux La pratique Interface utilisateur
  5. 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. 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. 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. 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. 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. 10. ATOS OpenSource - @hellosct1 – Les fondamentaux La pratique Interface utilisateur
  11. 11. ATOS OpenSource - @hellosct1 – Frameworks AR
  12. 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. 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. 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. 15. ATOS OpenSource - @hellosct1 – Avec un CMS / Framework (1/2) ● Back office – Type de contenu – Views 03
  16. 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. 17. ATOS OpenSource - @hellosct1 – Frameworks (avec extensions) A-Frame React 360 Three JS Babylon JS 4.0
  18. 18. ATOS OpenSource - @hellosct1 – Objets en VR ● Objets fixes ● Objets animés ● Animation ● Vidéo ● Son ● Texture ● Objets externes 11
  19. 19. ATOS OpenSource - @hellosct1 – Outillage : objet / 3 D ● SketchUp ● Unity VR ● Oculus ● Dcatia ● Blender ● Unreal engine ● Vive ● Autodesk 3D mask ● Microsoft store
  20. 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. 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. 22. ATOS OpenSource - @hellosct1 – XR : A-Frame + CMS Drupal (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  23. 23. ATOS OpenSource - @hellosct1 – Les fondamentaux La pratique Interface utilisateur
  24. 24. ATOS OpenSource - @hellosct1 – Interfaces utilisateurs http://www.createwebxr.com/webVR.html
  25. 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. 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. 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. 28. ATOS OpenSource - @hellosct1 – Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Demo scripts :Merci https://github.com/hellosct1/mixte-realitySources : - Liv Erickson - Hellosct1

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.

Views

Total views

202

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×