La réalité melangée dans vos applications

@hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve
La réalité mélangée dans vos applications
Open Source Summit 2019

ATOS OpenSource - @hellosct1 –
La réalité…??xx!?& !!??
● Réalité Augmenté
● Réalité Virtuelle
● MiXte Réalité

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

Les fondamentaux
La pratique
Interface utilisateur

La réalité mélangée ?
●
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 : 5 Décembre 2019

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

Frameworks AR

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>

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>

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

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

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

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>

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

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

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

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

La réalité melangée dans vos applications

Recommandé

Recommandé

Contenu connexe

Similaire à La réalité melangée dans vos applications

Similaire à La réalité melangée dans vos applications (20)

Plus de Christophe Villeneuve

Plus de Christophe Villeneuve (20)

Dernier

Dernier (6)

La réalité melangée dans vos applications