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

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