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 a l assaut du web

667 views

Published on

Présentation effectuée au RMLL 2018 sur "La réalité virtuelle à l'assaut du Web" par Christophe Villeneuve .
La conférence montrera AR / VR / XR ou la WebAR / WebVR / WebXR, ces avancés et les possibilités d'utilisées ces technologies dans le navigateur avec le framework aframeVR

Published in: Internet
  • Be the first to comment

  • Be the first to like this

la realite a l assaut du web

  1. 1. La réalité virtuelle à l’assaut du Web Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr fgggg
  2. 2. RMLL 2018 - Qui ??? Christophe Villeneuve mozilla reps - firefox os - B2GOS - ausy - afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – Libre@toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – elephpant - owasp -security 93
  3. 3. RMLL 2018 - WebAR / WebVR / WebXR ? ● Apporter la réalité virtuelle performance dans web ouvert
  4. 4. RMLL 2018 - Réalité Virtuelle ● Être dans la scène 3D ● Immersion Réalité Augmentée ● Positionnement d’objet 3D – Environnement réél ● Ajouter des éléments au réel – Champ de vision La réalité ?
  5. 5. RMLL 2018 - De nombreux essais dans la Réalité Augmenté Virtual Box Nintendo (1995) … Beaucoup de tentatives
  6. 6. RMLL 2018 - Stéréoscopie ● Perception du relief
  7. 7. RMLL 2018 - Photo spheres
  8. 8. RMLL 2018 - Matériels VR
  9. 9. RMLL 2018 - Matériels AR
  10. 10. RMLL 2018 - Matériel Captation 360 °
  11. 11. RMLL 2018 - 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
  12. 12. RMLL 2018 - Compatibilité WebVR Navigateurs http://createwebvr.com / Mozilla Firefox Microsoft Edge Chromium Servo Samsung internet Google Chrome Oculus Carmel
  13. 13. RMLL 2018 - 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
  14. 14. RMLL 2018 - Compatibilité WebVR Navigateurs Source: https://caniuse.com/#search=vr WebVR API WebVR
  15. 15. RMLL 2018 - Compatibilité WebVR Navigateurs / Matériels Source : https://webvr.rocks/
  16. 16. RMLL 2018 - 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.
  17. 17. RMLL 2018 - Frameworks WebVR A-Frame Primrose React VR Three JS X3DOM
  18. 18. RMLL 2018 - 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
  19. 19. La pratique
  20. 20. RMLL 2018 - Page Web <!DOCTYPE html> <html> <head> <script src="lib/a-frame/aframe-v0.8.2.min.js"></script> </head> <body> …. </body> </html>
  21. 21. RMLL 2018 - 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> 1
  22. 22. RMLL 2018 - <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene> Aframe : WebAR 2
  23. 23. RMLL 2018 - Vue 360° 4 5 <a-scene> <a-curvedimage src="photo.jpg" height="140" radius="100" thete-length="360" Rotation="0 0 0"> </a-curvedimage> <a-sky color="darkgrey"></a-sky> </a-scene>
  24. 24. RMLL 2018 - Vue panoramique 6 <a-scene> <a-curvedimage src="panoramique.jpg" height="140" radius="100" thete-length="300" Rotation="0 0 0"> </a-curvedimage> <a-sky color="darkgrey"></a-sky> </a-scene>
  25. 25. RMLL 2018 - Objets ● Demo – Simple – Animation – Son 8
  26. 26. RMLL 2018 - Objets fixes <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-text position="0 0.25 -1" height="10" depth="2" color="#FF0000" value="RMLL 2018"></a- text> <a-sky color="#ECECEC"></a-sky> </a-scene>
  27. 27. RMLL 2018 - Objet animé <a-cylinder src="#boxTexture" color="#FFC6FD" position="2 1.75 -3" radius="0.5"  height="1.5"> <a-animation attribute="position" to="5 2.99 1" direction="alternateReverse" dur="3000" repeat="indefinite" > </a-animation> </a-cylinder>8
  28. 28. RMLL - 2018 Objets : Son ● Déclaration <a-assets> <audio id="sound" src="music.mp3"></audio> </a-assets>
  29. 29. RMLL 2018 - A-Frame editor / inspector ● Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector
  30. 30. miXte Réalité → WebXR
  31. 31. RMLL 2018 - Web XR ? ● API WebVR – pour la réalité virtuelle – Augmentée – Mixte ● Combiné les standards et XR dans les navigateurs ● Polyfill ● Outils ● Cas utilisation ● Voyage, chat, B2B/B2C… ● QR code
  32. 32. RMLL 2018 - Exemples
  33. 33. RMLL 2018 - Les métiers XR, la prochaine plateforme
  34. 34. RMLL 2018 - Animation XR 10 <a-sphere position="0 -4.25 -5" radius="1.25" color="#002DC9"> <a-animation attribute="position" from="2 -4 1" to="3 -6 -8" repeat="indefinite"> </a-animation> </a-sphere> <a-assets> <!-- Texture --> <img id="boxTexture" src="texture.jpg"> </a-assets> <a-marker-camera preset='hiro'></a-marker-camera> <a-text position="10 -4.25 -1" height="10" color="#FF0000" value="RMLL 2018"> <a-animation attribute="position" from="12 -4 1" to="3 -6 -8" repeat="indefinite"></a- animation> </a-text>
  35. 35. RMLL 2018 - Animation XR 11 <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" xr="ar: false" shadow> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow xr="magicWindow: false"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow xr="vr: false"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow xr="ar: false; vr: false;"></a-plane> <a-sky color="#ECECEC" side="back" xr="ar: false"></a-sky> </a-scene>
  36. 36. Outils
  37. 37. RMLL 2018 - Outillage : contenu 3D ● SketchUp ● Unity VR ● Oculus ● Dcatia ● Blender ● Unreal engine ● Vive ● Autodesk 3D mask ● Babylon JS ● Microsoft store
  38. 38. RMLL 2018 - 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
  39. 39. RMLL - 2018 Au final 22 ● Association – AR – VR – Frameworks / Librairies ● A-Frame ● Codef ● Three JS ●
  40. 40. RMLL - 2018 Merci Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr

×