la realite a l assaut du web

La réalité virtuelle à l’assaut du Web
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
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 -
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

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

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

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
@hellosct1@mamot.fr

la realite a l assaut du web

Contenu connexe

Similaire à la realite a l assaut du web

Plus de Christophe Villeneuve

la realite a l assaut du web