La realite mixte

La réalité mixte
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Geek FaërIes 2019 – le 9 juin 2019

@hellosct1 Geek FaërIes 2019
La réalité…??xx!?& !!??
● Réalité Augmenté
● Réalité Virtuelle
● MiXte Réalité
API
UX Design

Christophe Villeneuve ?
●
Consultant
●
Dresseur animaux Free Software

Geek FaërIes 2019
Informations

Réalité mixte ?
●
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 ?

Matériels

Matériels VR

Les métiers XR

WebXR
●
Périphériques / matériels (devices)
●
Couverture
●
Interraction des utilisateurs
●
Rendu
https://www.w3.org/TR/webxr
Draft : 21 May 2019

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

Compatibilité API Navigateurs WebXR
Source: https://caniuse.com/#search=xr
API WebXR

Mais...

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

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

Geek FaërIes 2019
Réalité augmenté

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>

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

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>

Avec un CMS / Framework (1/2)
●
Back office
– Type de contenu
– Views
02

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>

Realite virtuelle

Vue 360°
10
<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>

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/rayon-magasin.jpg"
height="140"
radius="100"
thete-length="300"
rotation="0 0 0"
>
</a-curvedimage>
<a-sky color="darkgrey"></a-sky>
</a-scene>
</body>
</html>

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

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)

Mixte realite

XR : Aframe + ThreeJS
22

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

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

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

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
●

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-tutorials
●
MDN Web docs
●
A-frame doc
– https://aframe.io/docs
●
ThreeJS docs
– https://threejs.org/docs
●
W3C
– https://www.w3.org/TR
/webxr

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

Geek FaërIes 2019
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Demo Scripts :Merci https://github.com/hellosct1/mixte-realitySources :
- Liv Erickson
- Rober kaiser

La realite mixte

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a La realite mixte

Semelhante a La realite mixte (20)

Mais de Christophe Villeneuve

Mais de Christophe Villeneuve (20)

La realite mixte