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.

La realite virtuelle à l'assaut du web

925 views

Published on

L' AR / VR / XR ou la WebAR / WebVR / WebXR montrera les avancés et les possibilités d'utilisées ces technologies dans le navigateur avec le framework aframeVR. La conférence à été présentée au Geek Faeries 2018

Published in: Internet
  • Be the first to comment

  • Be the first to like this

La realite virtuelle à l'assaut du web

  1. 1. La réalité virtuelle à l’assaut du Web Geek Faeries – 2 juin 2018 Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr @aporagen aporagen.com Roman Miletitch
  2. 2. Qui ? ● Roman Miletitch ● Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr @aporagen
  3. 3. Geek Faeries Réalité Virtuelle ● Être dans la scène 3D ● Immersion Réalité Augmentée ● Positionnement d’objet 3D ● Ajouter des éléments au réel La réalité ?
  4. 4. Geek Faeries De nombreux essais dans la Réalité Augmenté Virtual Box Nintendo (1995) … Beaucoup de tentatives
  5. 5. Geek Faeries Matériels VR
  6. 6. Geek Faeries Matériels AR
  7. 7. Geek Faeries Matériel Captation 360 °
  8. 8. Geek Faeries Pourquoi la WebAR / WebVR / WebXR ? ● Facilité de distribution ● Solution Cross-Platform ● Code accessible ● Facilité d’accès, de découverte et de partage ● Liens entre projets
  9. 9. Geek Faeries Compatibilité WebVR Navigateurs http://createwebvr.com / Mozilla Firefox Microsoft Edge Chromium Servo Samsung internet Google Chrome Oculus Carmel
  10. 10. Geek Faeries Compatibilité WebVR Navigateurs : Web XR ● API WebVR pour les ... – Réalité virtuelle – Réalité augmentée – Réalité Mixte ● Combiner les standards et XR dans les navigateurs – Polyfill – Outils
  11. 11. Geek Faeries Compatibilité WebVR Navigateurs Source: https://caniuse.com/#search=vr WebVR API WebVR
  12. 12. Geek Faeries Compatibilité WebVR Navigateurs / Matériels Source : https://webvr.rocks/
  13. 13. Geek Faeries Web VR Technique ● API JavaScript expérimentale dans la navigateur web ● Prend en charge les périphériques de réalité virtuelle – HTC Vive, Oculus Rift, Google Cardboard ou OSVR ● Objectifs de l'API : – Détecter les périphériques de réalité virtuelle disponibles. – Interrogez les capacités des périphériques. – Sondez la position et l'orientation de l'appareil – Afficher les images sur l'appareil à la fréquence d'images appropriée.
  14. 14. Geek Faeries Frameworks WebVR A-Frame Primrose React VR Three JS X3DOM
  15. 15. Geek Faeries 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
  16. 16. Geek Faeries Aframe : WebVR <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" shadow></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene>
  17. 17. Geek Faeries <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene> Aframe : WebAR
  18. 18. Geek Faeries Les possibilités <a-curvedimage src="photo.jpg"> </a-curvedimage> ● 360° ● Animation ● Son <a-animation attribute="position" to="5 2.99 1" direction="alternateReverse" dur="3000"> </a-animation> <audio id="sound" src="music.mp3"></audio>
  19. 19. Geek Faeries A-Frame editor / inspector ● Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector
  20. 20. miXte Réalité → WebXR
  21. 21. Geek Faeries Exemples
  22. 22. Geek Faeries Les métiers XR, la prochaine plateforme
  23. 23. Geek Faeries Outillage : contenu 3D ● SketchUp ● Unity VR ● Oculus ● Dcatia ● Blender ● Unreal engine ● Vive ● Autodesk 3D mask ● Babylon JS ● Microsoft store
  24. 24. Geek Faeries Plus loin... ● Exemple : – https://aframe.io/ ● Docs : – http://aframe.io/docs/ guide ● Plugins & showcases – http://github.com/afr amevr/awesome-aframe# guides-and-tutorials https://www.w3.org/community/webvr/ https://w3c.github.io/webvr ● MDN Web docs ● A-Frame doc – https://aframe.io/docs ● ThreeJS docs – https://threejs.org/docs / ● w3c
  25. 25. La réalité virtuelle à l’assaut du Web Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr @aporagen aporagen.com Roman Miletitch

×