La realite virtuelle à l'assaut du web

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

Transcript

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. Qui ? • Roman Miletitch • Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr @aporagen
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é ?
5. Geek Faeries De nombreux essais dans la Réalité Augmenté Virtual Box Nintendo (1995) … Beaucoup de tentatives
6. Geek Faeries Matériels VR
7. Geek Faeries Matériels AR
8. Geek Faeries Matériel Captation 360 °
9. 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
10. Geek Faeries Compatibilité WebVR Navigateurs http://createwebvr.com / Mozilla Firefox Microsoft Edge Chromium Servo Samsung internet Google Chrome Oculus Carmel
11. 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
12. Geek Faeries Compatibilité WebVR Navigateurs Source: https://caniuse.com/#search=vr WebVR API WebVR
13. Geek Faeries Compatibilité WebVR Navigateurs / Matériels Source : https://webvr.rocks/
14. 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.
15. Geek Faeries Frameworks WebVR A-Frame Primrose React VR Three JS X3DOM
16. 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
17. 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>
18. Geek Faeries <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene> Aframe : WebAR
19. 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>
20. Geek Faeries A-Frame editor / inspector • Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector
21. miXte Réalité → WebXR
22. Geek Faeries Exemples
23. Geek Faeries Les métiers XR, la prochaine plateforme
24. Geek Faeries Outillage : contenu 3D • SketchUp • Unity VR • Oculus • Dcatia • Blender • Unreal engine • Vive • Autodesk 3D mask • Babylon JS • Microsoft store
25. 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
26. La réalité virtuelle à l’assaut du Web Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr @aporagen aporagen.com Roman Miletitch