la realite a l assaut du web
•
2 likes•1,039 views
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
Recommended
More Related Content
Similar to la realite a l assaut du web
Similar to la realite a l assaut du web (20)
More from Christophe Villeneuve
More from Christophe Villeneuve (20)
la realite a l assaut du web
- 1. La réalité virtuelle à l’assaut du Web Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr fgggg
- 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. RMLL 2018 - WebAR / WebVR / WebXR ? ● Apporter la réalité virtuelle performance dans web ouvert
- 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é ?
- 6. RMLL 2018 - De nombreux essais dans la Réalité Augmenté Virtual Box Nintendo (1995) … Beaucoup de tentatives
- 7. RMLL 2018 - Stéréoscopie ● Perception du relief
- 8. RMLL 2018 - Photo spheres
- 9. RMLL 2018 - Matériels VR
- 10. RMLL 2018 - Matériels AR
- 11. RMLL 2018 - Matériel Captation 360 °
- 12. 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
- 13. RMLL 2018 - Compatibilité WebVR Navigateurs http://createwebvr.com / Mozilla Firefox Microsoft Edge Chromium Servo Samsung internet Google Chrome Oculus Carmel
- 14. 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
- 15. RMLL 2018 - Compatibilité WebVR Navigateurs Source: https://caniuse.com/#search=vr WebVR API WebVR
- 16. RMLL 2018 - Compatibilité WebVR Navigateurs / Matériels Source : https://webvr.rocks/
- 17. 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.
- 18. RMLL 2018 - Frameworks WebVR A-Frame Primrose React VR Three JS X3DOM
- 19. 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
- 20. La pratique
- 21. RMLL 2018 - Page Web <!DOCTYPE html> <html> <head> <script src="lib/a-frame/aframe-v0.8.2.min.js"></script> </head> <body> …. </body> </html>
- 22. 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
- 23. RMLL 2018 - <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene> Aframe : WebAR 2
- 24. 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>
- 25. 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>
- 26. RMLL 2018 - Objets ● Demo – Simple – Animation – Son 8
- 27. 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>
- 28. 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
- 29. RMLL - 2018 Objets : Son ● Déclaration <a-assets> <audio id="sound" src="music.mp3"></audio> </a-assets>
- 30. RMLL 2018 - A-Frame editor / inspector ● Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector
- 32. 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
- 34. RMLL 2018 - Les métiers XR, la prochaine plateforme
- 35. 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>
- 36. 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>
- 37. Outils
- 38. RMLL 2018 - Outillage : contenu 3D ● SketchUp ● Unity VR ● Oculus ● Dcatia ● Blender ● Unreal engine ● Vive ● Autodesk 3D mask ● Babylon JS ● Microsoft store
- 39. 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
- 40. RMLL - 2018 Au final 22 ● Association – AR – VR – Frameworks / Librairies ● A-Frame ● Codef ● Three JS ●
- 41. RMLL - 2018 Merci Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr