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

La réalité mélangée De A à Z Christophe Villeneuve @hellosct1
@[email protected] 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

ATOS OpenSource - @hellosct1 – Root 66 WebAR / WebVR
/ WebXR • Apporter la réalité virtuelle performance dans web ouvert

ATOS OpenSource - @hellosct1 – Root 66 Réellement...

ATOS OpenSource - @hellosct1 – Root 66 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 ?

ATOS OpenSource - @hellosct1 – Root 66 Origine du commencement

ATOS OpenSource - @hellosct1 – Root 66 Science fiction

ATOS OpenSource - @hellosct1 – Root 66 De nombreux essais
dans la Réalité Augmenté Virtual Box Nintendo (1995) Cardboard Cardboard … Beaucoup de tentatives

ATOS OpenSource - @hellosct1 – Root 66 Où encore...

ATOS OpenSource - @hellosct1 – Root 66 Le matériel d'aujourd'hui
• Quelques exemples Oculus HTC Samsung Google

ATOS OpenSource - @hellosct1 – Root 66 Matériels

ATOS OpenSource - @hellosct1 – Root 66 Actuellement… plusieurs familles
http://www.createwebxr.com/webVR.html

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 Compatibilité WebVR :
Navigateur / Matériels https://webvr.rocks/

ATOS OpenSource - @hellosct1 – Root 66 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

UI

ATOS OpenSource - @hellosct1 – Root 66 Réalité augmenté →
WebAR

ATOS OpenSource - @hellosct1 – Root 66 Stéréoscopie • Perception
du relief

ATOS OpenSource - @hellosct1 – Root 66 Photo spheres

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 Framework AR

ATOS OpenSource - @hellosct1 – Root 66 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>

ATOS OpenSource - @hellosct1 – Root 66 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>

ATOS OpenSource - @hellosct1 – Root 66 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>

ATOS OpenSource - @hellosct1 – Root 66 Page web <!DOCTYPE
html> <html> <head> <script src="assets/lib/aframe-x.x.x.min.js"></script> </head> <body> ... </body> </html>

ATOS OpenSource - @hellosct1 – Root 66 Réalité virtuelle →
WebVR

ATOS OpenSource - @hellosct1 – Root 66 Frameworks (avec extensions)
A-Frame React 360 Three JS Babylon JS 4.0

ATOS OpenSource - @hellosct1 – Root 66 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.

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 Vue panoramique <a-scene>
<a-curvedimage src="panoramique.jpg" height="140" radius="100" thete-length="300" Rotation="0 0 0"> </a-curvedimage> <a-sky color="darkgrey"></a-sky> </a-scene> 06 https://animation-vr-booth.glitch.me/06-VR-panorama.html

ATOS OpenSource - @hellosct1 – Root 66 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-sky color="darkgrey"></a-sky> </a-scene> </body> </html>

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 Objets en VR
• Objets fixes • Objets animés • Animation • Vidéo • Son • Texture • Objets externes 11

ATOS OpenSource - @hellosct1 – Root 66 Objets • Demo
08 https://animation-vr-booth.glitch.me/08-VR-objet.html

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 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>

ATOS OpenSource - @hellosct1 – Root 66 Objets : Son
• Déclaration <a-assets> <audio id="sound" src="music.mp3"></audio> </a-assets>

ATOS OpenSource - @hellosct1 – Root 66 Objets animés 12
Démo en ligne : https://glitch.com/~reality-virtuel-demo

ATOS OpenSource - @hellosct1 – Root 66 A-Frame editor /
inspector https://github.com/aframevr/aframe-inspector • Télécharger Inspecteur • Activé l’inspecteur (CTRL + ALT + I)

ATOS OpenSource - @hellosct1 – Root 66 AR + VR

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 Avec un CMS
/ Framework (1/2) • Back office – Type de contenu – Views 03

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

ATOS OpenSource - @hellosct1 – Root 66 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-marker-camera preset='hiro'></a-marker-camera> <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

ATOS OpenSource - @hellosct1 – Root 66 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

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

ATOS OpenSource - @hellosct1 – Root 66 XR : A-Frame
+ CMS Drupal (2/2) 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front

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

ATOS OpenSource - @hellosct1 – Root 66 A-Frame + Open
Street Map (1/2) https://vrmap.kairo.at/

ATOS OpenSource - @hellosct1 – Root 66 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

UI

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 Les métiers XR

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 Concrètement • Libraries
JS • Frameworks • Polyfill → comblent les lacunes

ATOS OpenSource - @hellosct1 – Root 66 Exemples

UI

ATOS OpenSource - @hellosct1 – Root 66 Outillage : contenu
3 D • SketchUp • Unity VR • Oculus • Dcatia • Blender • Unreal engine • Vive • Autodesk 3D mask • Microsoft store

ATOS OpenSource - @hellosct1 – Root 66 Interfaces utilisateurs http://www.createwebxr.com/webVR.html

ATOS OpenSource - @hellosct1 – Root 66 A-Frame editor /
inspector • Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 Spoke https://hubs.mozilla.com/spoke/projects

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 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

ATOS OpenSource - @hellosct1 – Root 66 XR : Aframe
+ ThreeJS 22

Christophe Villeneuve @hellosct1 @[email protected] Demo Scripts : Merci https://github.com/hellosct1/mixte-reality Sources
: - Liv Erickson - Hellosct1

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

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

More Decks by hellosct1

Other Decks in Technology

Featured

Transcript