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

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)
CardboardCardboard
… 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