La mixte réalité

La réalité mixte Christophe Villeneuve @hellosct1 @[email protected] 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

@hellosct1 Geek FaërIes 2019 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

@hellosct1 Geek FaërIes 2019 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 ?

@hellosct1 Geek FaërIes 2019 Matériels

@hellosct1 Geek FaërIes 2019 Matériels VR

@hellosct1 Geek FaërIes 2019 Les métiers XR

@hellosct1 Geek FaërIes 2019 WebXR • Périphériques / matériels (devices)
• Couverture • Interraction des utilisateurs • Rendu https://www.w3.org/TR/webxr Draft : 21 May 2019

@hellosct1 Geek FaërIes 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

@hellosct1 Geek FaërIes 2019 Compatibilité API Navigateurs WebXR Source: https://caniuse.com/#search=xr
API WebXR

@hellosct1 Geek FaërIes 2019 Mais...

@hellosct1 Geek FaërIes 2019 Concrètement • Libraries JS • Frameworks
• Polyfill → comblent les lacunes

@hellosct1 Geek FaërIes 2019 Frameworks (avec extensions) A-Frame React 360
Three JS Babylon JS 4.0

La pratique

Geek FaërIes 2019 Réalité augmenté

@hellosct1 Geek FaërIes 2019 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>

@hellosct1 Geek FaërIes 2019 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 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>

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

@hellosct1 Geek FaërIes 2019 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>

@hellosct1 Geek FaërIes 2019 Realite virtuelle

@hellosct1 Geek FaërIes 2019 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>

@hellosct1 Geek FaërIes 2019 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>

@hellosct1 Geek FaërIes 2019 Objets en VR • Objets fixes
• Objets animés • Animation • Vidéo • Son • Texture • Objets externes 11

@hellosct1 Geek FaërIes 2019 Objets animés 12 Démo en ligne
: https://glitch.com/~reality-virtuel-demo

@hellosct1 Geek FaërIes 2019 A-Frame editor / inspector https://github.com/aframevr/aframe-inspector •
Télécharger Inspecteur • Activé l’inspecteur (CTRL + ALT + I)

@hellosct1 Geek FaërIes 2019 Mixte realite

@hellosct1 Geek FaërIes 2019 XR : Aframe + ThreeJS 22

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

@hellosct1 Geek FaërIes 2019 XR : A-Frame + CMS Drupal
(2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front

@hellosct1 Geek FaërIes 2019 XR : A-Frame + Open Street
Map (1/2) https://vrmap.kairo.at/

@hellosct1 Geek FaërIes 2019 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

Geek FaërIes 2019

@hellosct1 Geek FaërIes 2019 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 •

@hellosct1 Geek FaërIes 2019 Spoke https://hubs.mozilla.com/spoke/projects

@hellosct1 Geek FaërIes 2019 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

@hellosct1 Geek FaërIes 2019 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 @[email protected] Demo Scripts :
Merci https://github.com/hellosct1/mixte-reality Sources : - Liv Erickson - Rober kaiser

La mixte réalité

La mixte réalité

More Decks by hellosct1

Other Decks in Technology

Featured

Transcript