la réalité mélangée de A a Z

La réalité mélangée
De A à Z
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Root66 – 7 décembre 2019

Atos open source - afup – lemug.fr – mariadb – drupal – mozilla - firefox – lemugfr - sumo – webextensions – VR – AR – XR - Cause commune 93.1 FM - TechSpeaker - Lizard - eyrolles – editions eni – programmez – linux pratique – webriver – elephpant - CommonVoice – Sécurité - Cybersécurité
Christophe Villeneuve ?
●
Consultant
●
Dresseur animaux Free Software

ATOS OpenSource - @hellosct1 – Root 66
Sommaire
●
La situation
●
Les ... réalités ...
●
Web XR
●
Outillages / UI
→ Réalité Augmenté
→ Réalité Virtuelle
→ AR + VR

La situation
Les ... réalités ...
Web XR
Outillages / UI

WebAR / WebVR / WebXR
●
Apporter la réalité virtuelle performance
dans web ouvert

Réellement...

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 ?

Origine du commencement

Science fiction

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

Où encore...

Le matériel d'aujourd'hui
●
Quelques exemples
Oculus HTC
Samsung Google

Matériels

Actuellement… plusieurs familles
http://www.createwebxr.com/webVR.html

WebVR supportés par les navigateurs
http://createwebvr.com/
Mozilla Firefox Microsoft Edge Google Chrome
Brave
Desktop & mobile Desktop
Servo
Mobile Mobile & HMD
Samsung internet
HMD
Brave Firefox Reality Oculus Browser Supermedium

Compatibilité WebVR : Navigateur / Matériels
https://webvr.rocks/

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

Réalité augmenté → WebAR

Stéréoscopie
●
Perception du relief

Photo spheres

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

Framework AR

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>

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>

La réalité augmentée
●
Utilisation
– Framework A-frame
</a-scene>

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

Réalité virtuelle → WebVR

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

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.

Vue 360°
<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>
04 / 05 https://animation-vr-booth.glitch.me/05-VR-panorama.html

Vue panoramique
<a-scene>
<a-curvedimage
src="panoramique.jpg"
height="140"
radius="100"
thete-length="300"
Rotation="0 0 0">
</a-curvedimage>
</a-scene>
06 https://animation-vr-booth.glitch.me/06-VR-panorama.html

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-assets>
<img id="my-image" src="assets/media/garden.png">
</a-assets>
<a-curvedimage
src="#my-image"
height="140"
radius="100"
thete-length="300"
rotation="0 0 0"
>
</a-curvedimage>
</a-scene>
</body>
</html>

Vue 360°
07
<a-scene>
<a-assets>
<img id="my-image" src="assets/media/garden.png">
</a-assets>
<a-sky src="#my-image" rotation="0 -130 0" height="140" radius="100"
thete-length="300" scale="0.8 0.8 0.8"></a-sky>
<a-text color="#FF0000" font="kelsonsans" value="Welcome"
width="6" position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text>
</a-scene>
https://animation-vr-booth.glitch.me/07-VR-360.html

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

Objets
●
Demo
08 https://animation-vr-booth.glitch.me/08-VR-objet.html

Objets fixes
<a-text position="0 0.25 -1" height="10" depth="2" color="#FF0000" value="Root 66">
</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>
08

Objets : animation
●
Déclaration
●
Animation
<a-assets>

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

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

Objets animés
12 Démo en ligne : https://glitch.com/~reality-virtuel-demo

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

AR + VR

AR + VR ?
●
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

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>

Animation XR
<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="Programmez">
<a-animation attribute="position" from="12 -4 1" to="3 -6 -8" repeat="indefinite"></a-
animation>
</a-text>
10

Animation XR
<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>
11

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

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

A-Frame + Open Street Map (1/2)
https://vrmap.kairo.at/

A-Frame + Open Street Map(2/2)
●
Technique
– Utilisation projection mercator,
– Rendu "mapnik" à partir de l'OSM
●
via le serveur de mise en cache des tuiles de Kairo
●
Arbres et bâtiments
– données OSM en direct via l'API Overpass
●
Configuration de la caméra / contrôleur
– pour prendre en charge plusieurs appareils pour la navigation
de la scène
●
Bibliothèque A-frame de Mozilla

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 : 5 Décembre 2019

Les métiers XR

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

Cross-platform des navigateurs WebXR
●
Engagements des standards WebXR proposés par W3C
●
Les navigateurs prennent déjà en charge divers degrés pour l'écosystème
Mozilla Firefox Chromium

Concrètement
●
Libraries JS
●
Frameworks
●
Polyfill
→ comblent les lacunes

Exemples

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

Interfaces utilisateurs
http://www.createwebxr.com/webVR.html

A-Frame editor / inspector
●
Github.com/aframevr/aframe-editor
https://github.com/aframevr/aframe-inspector

Editeur de scène 3D : Spoke
https://hubs.mozilla.com/spoke
●
Création de son propre espace
– De Réalité virtuelle
●
Import objets au format GLTF
– Runtime 3D Asset Felivry

Spoke
https://hubs.mozilla.com/spoke/projects

Plus loin
●
Exemples :
– https://aframe.io/
●
Docs
– http://aframe.io/docs/guide
●
Plugins & showcases
– http://github.com/aframevr/awesome-aframe#guides-and-tu
torials
●
MDN Web docs
– https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API
●
A-frame doc
– https://aframe.io/docs
●
ThreeJS docs
– https://threejs.org/docs
●
W3C
– https://www.w3.org/TR/we
bxr

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

XR : Aframe + ThreeJS
22

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

la réalité mélangée de A a Z

Contenu connexe

Similaire à la réalité mélangée de A a Z

Plus de Christophe Villeneuve

la réalité mélangée de A a Z