XR et Animation

XR & Animation Christophe Villeneuve @hellosct1 @[email protected] Very Important Party
2019

@hellosct1 - Very Important Party 2019 La réalité…??xx!?& !!?? •
Réalité Augmenté • Réalité Virtuelle • MiXte Réalité API UX Design

@hellosct1 - Very Important Party 2019 Aujourd’hui • Les fondamentaux
/ Les bases • Les … réalités … • L’interface utilisateur 3

Christophe Villeneuve ? • Consultant • Dresseur animaux Free Software

@hellosct1 - Very Important Party 2019 WebAR / WebVR /
WebXR • Apporter la réalité virtuelle performance dans web ouvert

Les fondamentaux Les réalités Interface utilisateur

@hellosct1 - Very Important Party 2019 miXte Réalité ? •
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 - Very Important Party 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 - Very Important Party 2019 De nombreux essais →
Réalité Augmenté Virtual Box Nintendo (1995) Cardboard Cardboard … Beaucoup de tentatives

@hellosct1 - Very Important Party 2019 Où encore...

@hellosct1 - Very Important Party 2019 Matériels

@hellosct1 - Very Important Party 2019 WebXR • Périphériques /
matériels (devices) • Couverture • Interraction des utilisateurs • Rendu https://www.w3.org/TR/webxr Draft : 21 May 2019

@hellosct1 - Very Important Party 2019 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

@hellosct1 - Very Important Party 2019 Frameworks (avec extensions) A-Frame
React 360 Three JS Babylon JS 4.0

Les fondamentaux Les … réalités... Interface utilisateur

Réalité augmenté

@hellosct1 - Very Important Party 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 - Very Important Party 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 - Very Important Party 2019 Page web <!DOCTYPE html>
<html> <head> <script src="assets/lib/aframe-x.x.x.min.js"></script> </head> <body> ... </body> </html>

@hellosct1 - Very Important Party 2019 Réalite virtuelle

@hellosct1 - Very Important Party 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 - Very Important Party 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/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>

@hellosct1 - Very Important Party 2019 Objets en VR •
Objets fixes • Objets animés • Animation • Vidéo • Son • Texture • Objets externes 11

@hellosct1 - Very Important Party 2019 Mixte realite

@hellosct1 - Very Important Party 2019 Objets animés 14 Demo
: https://glitch.com/~4-anim-1-plane-xr

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

@hellosct1 - Very Important Party 2019 XR : Aframe +
ThreeJS 22

Les fondamentaux Les … réalités... Interface utilisateur

@hellosct1 - Very Important Party 2019 Outillage : contenu 3
D • SketchUp • Unity VR • Oculus • Dcatia • Blender • Unreal engine • Vive • Autodesk 3D mask • Microsoft store

@hellosct1 - Very Important Party 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 – Runtime 3D Asset Felivry

@hellosct1 - Very Important Party 2019 Spoke https://hubs.mozilla.com/spoke/projects

@hellosct1 - Very Important Party 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 - Very Important Party 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

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

XR et Animation

XR et Animation

More Decks by hellosct1

Other Decks in Technology

Featured

Transcript