AR / VR / XR dans les navigateurs

Présentation effectuée au "Programmez meetup #1" par Christophe Villeneuve sur "AR / VR / XR dans les navigateurs".

La conférence a pour but de montrer les possibilités d'utiliser la technologie "Réalité augmenté / Réalité virtuelle" dans les navigateurs en utilisant le framework A-Frame de Mozilla

Transcript

1. 3 AR / VR / XR dans le navigateur Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Meetup Programmez #1 – le 24 avril 2018
2. Programmez #1 – 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
3. Programmez #1 – Sommaire • Avant VS maintenant • VR concept • Web...AR/VR/XR → API • UX Design •
4. Programmez #1 – WebAR / WebVR / WebXR ? • Apporter la réalité virtuelle performance dans web ouvert
5. Programmez #1 – Origine du commencement
6. Programmez #1 – Science fiction
7. Programmez #1 – De nombreux essais dans la Réalité Augmenté Virtual Box Nintendo (1995) Cardboard Cardboard … Beaucoup de tentatives
8. Programmez #1 – Où encore...
9. Programmez #1 – Le matériel d'aujourd'hui • Quelques exemples Oculus HTC Samsung Google
10. Programmez #1 – WebVR supportés par les navigateurs http://createwebvr.com / Mozilla Firefox Microsoft Edge Chromium Servo Samsung internet Google Chrome Oculus Carmel
11. Programmez #1 – Compatibilité WebVR
12. Programmez #1 – Compatibilité API WebVR https://caniuse.com/#search=vr W3C : https://www.w3.org/community/webvr/ https://w3c.github.io/webvr
13. Programmez #1 – Compatibilité WebVR : Navigateur / Matériels https://webvr.rocks/
14. Programmez #1 – Réalité augmenté → WebAR
15. Programmez #1 – Web AR ? • Realité augmentée dans le Web • Positionner un objet 3D – Dans un environnement réél • Ajouter des élément numériques – Dans un champ de vision •
16. Programmez #1 – Périphériques possibles…
17. Programmez #1 – La réalité augmentée • Utilisation – Framework A-frame 1 <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene>
18. Programmez #1 – La réalité augmentée… pas vraiment 2 <div style='position: fixed; top: 10px; width:100%; text-align: left; z-index: 1;'> <img src="fxvr.png" width="300px"> </div> <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene>
19. Programmez #1 – Réalité virtuelle → WebVR
20. Programmez #1 – Web VR ? • 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.
21. Programmez #1 – 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
22. Programmez #1 – Stéréoscopie • Perception du relief
23. Programmez #1 – Photo spheres
24. Programmez #1 – 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. Programmez #1 – 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. Programmez #1 – Objets • Demo 8
27. Programmez #1 – Objets fixes 8 <a-text position="0 0.25 -1" height="10" depth="2" color="#FF0000" value="Programmez"> </a-text> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"> </a-plane>
28. Programmez #1 – Objets : animation • Déclaration • Animation <a-assets> <!-- Texture --> <img id="boxTexture" src="texture.jpg"> </a-assets> <a-cylinder src="#boxTexture" position="2 1.75 -3" radius="0.5" height="1.5" color="#FFC6FD" > <a-animation attribute="position" to="5 2.99 1" direction="alternateReverse" dur="3000" repeat="indefinite"></a-animation> </a-cylinder>
29. Programmez #1 – Objets : Son • Déclaration <a-assets> <audio id="sound" src="music.mp3"></audio> </a-assets>
30. Programmez #1 – Objets (avancé) <a-scene> <a-assets> <a-mixin id="cube" geometry="primitive: box" material="color: red" rotation="0 45 0"></a-mixin> <a-mixin id="sphere" geometry="primitive: sphere" material="color: blue"></a-mixin> </a-assets> <a-entity mixin="cube" position="-3.5 1 -4" material="color: blue"></a-entity> <a-entity mixin="cube" position="0 1 -4"></a-entity> <a-entity mixin="cube" position="3.5 1 -4"></a-entity> <a-entity mixin="red cube"></a-entity> </a-scene> 9
31. Programmez #1 – miXte Réalité → WebXR
32. Programmez #1 – 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
33. Programmez #1 – Exemples
34. Programmez #1 – 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="Programmez"> <a-animation attribute="position" from="12 -4 1" to="3 -6 -8" repeat="indefinite"></a- animation> </a-text>
35. Programmez #1 – 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. Programmez #1 – Outils
37. Programmez #1 – Outillage : contenu 3 D • SketchUp • Unity VR • Oculus • Dcatia • Blender • Unreal engine • Vive • Autodesk 3D mask • Babylon JS • Microsoft store
38. Programmez #1 – A-Frame editor / inspector • Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector 30
39. Programmez #1 – Documentations • MDN Web docs • A-Frame doc – https://aframe.io/docs/ • ThreeJS docs – https://threejs.org/docs/ https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API
40. Programmez #1 – Framework WebVR A-Frame Primrose React VR Three JS X3DOM
41. Programmez #1 – Plus loin avec A-frame • Exemple : – https://aframe.io/ • Docs : – http://aframe.io/docs/guide • Plugins & showcases – http://github.com/aframevr/awesome-aframe#guides- and-tutorials
42. Programmez #1 – • A-Frame inspector • WebGL inspector • SharerEditor • Three.js – https://threejs.org/ • SceneJS – http://scenejs.org/ • BabylonJS – https://www.babylonjs.c om/ • Vizi – https://github.com/tparisi /Vizi • PhiliGL – http://www.senchalabs.org /philogl/ Toolkits Librairies
43. Programmez #1 – Au final 22 • Association – AR – VR – Frameworks / Librairies • A-Frame • Codef • Three JS •
44. Programmez #1 – Dossier : Réalité Augmentée • Magazine Programmez (mai 2018) https://www.programmez.com/magazine/programmez-218-pdf
45. Programmez #1 – Merci Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Scripts disponible sur https://github.com/hellosct1/ar-vr-xr