O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

la realite a l assaut du web

678 visualizações

Publicada em

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

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×