Construire le web en AR - VR

@hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve
Construire le Web
en AR/VR
Firefox France User groupe – 15 novembre 2019

La réalité…??xx!?& !!??
● Réalité Augmenté
● Réalité Virtuelle
● MiXte Réalité

Aujourd’hui
●
Les fondamentaux / Les bases
●
La pratique

Les fondamentaux
La pratique

La Réalité ?
●
Etre dans la scène 3D
●
Immersion
●
Transporte l'utilisateur dans
un environnement
numérique
●
Positionnement objet 3D
– Environnement réel
●
Ajouter des éléments réels
– Champ de vision
●
Intègre le contenu
numérique dans notre
monde physique
Réalité Virtuelle Réalité Augmentée

Réalité Amplifiée
Réalité Augmentée
Réalité Mélangée
Virtualité Augmentée
Réalité Virtuelle
Réalité Virtualisée
Réalité Réelle Réel
Réalité mixte
Virtuel
Où se positionne-t-on ?

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
webXR

WebXR (1/2)
●
Nouveau standard web VR / MR / XR
●
Périphériques / matériels (devices)
●
Couverture
●
Interraction des utilisateurs
●
Rendu
https://www.w3.org/TR/webxr
Draft : 10 octobre 2019

WebXR (2/2)
●
Soutenu par
– Mozilla, Google, Microsoft, Amazon, Samsung…
●
Remplacera l’API WebVR
●
Actuellement compatible
– Chrome
– Firefox Réality
●
Prochainement : Firefox 71 (10 décembre)
– Emulator WebXR

Frameworks (avec extensions)
A-Frame React 360
Three JS Babylon JS 4.0

La réalité augmentée… pas vraiment
01
<div style='position: fixed; top: 10px; width:100%; text-align: left; z-index: 1;'>
<img src= "assets/image.png" width="300px">
</div>
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>

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>

Page web
<!DOCTYPE html>
<html>
<head>
<script src="assets/lib/aframe-x.x.x.min.js"></script>
</head>
<body>
...
</body>
</html>

@hellosct1 Geek FaërIes 2019
Avec un CMS / Framework (1/2)
●
Back office
– Type de contenu
– Views
03

Avec un CMS / Framework (2/2)
●
Texte Wysiwyg
●
Librairie : aframe-html-shader
<a-scene>
<a-plane
position="0 2 -6"
height="3"
width="3"
rotation="-45 0 0"
material="shader: html; target: #planeHTML; ratio: height;transparent: true; »>
</a-plane>
</a-scene>
<div style="width: 1px; height: 1px; overflow: hidden">
<div id="planeHTML">
<h2>Welcome!</h2>
<p>Circa hos dies anuginis adulescens,</p>
<p>Lampadi <strong>manu</strong>….</p>
</div>
</div>

Objets en VR
●
Objets fixes
●
Objets animés
●
Animation
●
Vidéo
●
Son
●
Texture
●
Objets externes
11

Par le code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="lib/a-frame/aframe-v0.8.2.min.js"></script>
</head>
<body>
<a-scene>
<a-curvedimage
src="media/image.jpg"
height="140"
radius="100"
thete-length="300"
rotation="0 0 0"
>
</a-curvedimage>
<a-sky color="darkgrey"></a-sky>
</a-scene>
</body>
</html>

Outillage : contenu 3 D
●
SketchUp
●
Unity VR
●
Oculus
●
Dcatia
●
Blender
●
Unreal engine
●
Vive
●
Autodesk 3D mask
●
Microsoft store

XR : A-Frame + CMS Drupal (1/2)
24
Démo en ligne : https://glitch.com/~xr-a-frame-and-drupal

A-Frame editor / inspector
https://github.com/aframevr/aframe-inspector●
Télécharger Inspecteur
●
Activé l’inspecteur (CTRL + ALT + I)

XR : A-Frame + CMS Drupal (2/2)
3 solutions :
- Modules
ReactVR / a-frame / VR
- WebServices
- Back / Front

L’avenir
●
Les vêtements et les
intégrations vocales
offrent des opportunités
pour de nouveaux
modèles d'interaction
●
Hardware (matériels)
– Dispositifs à moindre coût,
matériel autonome, champs
de vision plus larges,
camears de profondeur plus
disponibles
●
(plus de) Web
– Wasm, webRTC, Speech to
text, temps réel, traduction,
robots, communication
multimodale
●
Framework
– Réduire les obstacles
au développement et à
la création de contenu
AR & VR

Plus loin
●
Exemples :
– https://aframe.io/
●
Docs
– http://aframe.io/docs/guide
●
Plugins & showcases
– http://github.com/aframevr/awesome-aframe#guides-and-t
utorials
●
MDN Web docs
●
A-frame doc
– https://aframe.io/docs
●
ThreeJS docs
– https://threejs.org/docs
●
W3C
– https://www.w3.org/TR/
webxr

Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Demo Scripts :Merci
https://github.com/hellosct1/mixte-realitySources :
- Liv Erickson
- Hellosct1

Construire le web en AR - VR

Recommandé

Recommandé

Contenu connexe

Similaire à Construire le web en AR - VR

Similaire à Construire le web en AR - VR (20)

Plus de Christophe Villeneuve

Plus de Christophe Villeneuve (20)

Construire le web en AR - VR