la réalité à l'assaut du web - 2eme session

La réalité virtuelle à l’assaut du Web Christophe Villeneuve @hellosct1
@[email protected] fgggg

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

RMLL 2018 - WebAR / WebVR / WebXR ? •
Apporter la réalité virtuelle performance dans web ouvert

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é ?

RMLL 2018 - De nombreux essais dans la Réalité Augmenté
Virtual Box Nintendo (1995) … Beaucoup de tentatives

RMLL 2018 - Stéréoscopie • Perception du relief

RMLL 2018 - Photo spheres

RMLL 2018 - Matériels VR

RMLL 2018 - Matériels AR

RMLL 2018 - Matériel Captation 360 °

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

RMLL 2018 - Compatibilité WebVR Navigateurs http://createwebvr.com / Mozilla Firefox
Microsoft Edge Chromium Servo Samsung internet Google Chrome Oculus Carmel

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

RMLL 2018 - Compatibilité WebVR Navigateurs Source: https://caniuse.com/#search=vr WebVR API
WebVR

RMLL 2018 - Compatibilité WebVR Navigateurs / Matériels Source :
https://webvr.rocks/

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.

RMLL 2018 - Frameworks WebVR A-Frame Primrose React VR Three
JS X3DOM

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

La pratique

RMLL 2018 - Page Web <!DOCTYPE html> <html> <head> <script
src="lib/a-frame/aframe-v0.8.2.min.js"></script> </head> <body> …. </body> </html>

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

RMLL 2018 - <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene>
Aframe : WebAR 2

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>

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>

RMLL 2018 - Objets • Demo – Simple – Animation
– Son 8

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>

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

RMLL - 2018 Objets : Son • Déclaration <a-assets> <audio
id="sound" src="music.mp3"></audio> </a-assets>

RMLL 2018 - A-Frame editor / inspector • Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector

miXte Réalité → WebXR

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

RMLL 2018 - Exemples

RMLL 2018 - Les métiers XR, la prochaine plateforme

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>  <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>

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>

Outils

RMLL 2018 - Outillage : contenu 3D • SketchUp •
Unity VR • Oculus • Dcatia • Blender • Unreal engine • Vive • Autodesk 3D mask • Babylon JS • Microsoft store

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

RMLL - 2018 Au final 22 • Association – AR
– VR – Frameworks / Librairies • A-Frame • Codef • Three JS •

RMLL - 2018 Merci Christophe Villeneuve @hellosct1 @[email protected]

la réalité à l'assaut du web - 2eme session

la réalité à l'assaut du web - 2eme session

More Decks by hellosct1

Other Decks in Programming

Featured

Transcript