Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

XR and animation

698 views

Published on

Présentation effectuée à la VIP (Very important party) (29 juin 2019) par Christophe Villeneuve sur "XR and Animation".
Vous allez voir en associant la réalité augmentée et la réalité virtuelle, vous obtenez la mixte réalité.
La présentation montre comment associé d'autres projets avec A-Frame et les animations demomaker

Published in: Internet
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

XR and animation

  1. 1. XR & Animation Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Very Important Party 2019
  2. 2. @hellosct1 - Very Important Party 2019 La réalité…??xx!?& !!?? ● Réalité Augmenté ● Réalité Virtuelle ● MiXte Réalité API UX Design
  3. 3. @hellosct1 - Very Important Party 2019 Aujourd’hui ● Les fondamentaux / Les bases ● Les … réalités … ● L’interface utilisateur 3
  4. 4. Christophe Villeneuve ? ● Consultant ● Dresseur animaux Free Software
  5. 5. @hellosct1 - Very Important Party 2019 WebAR / WebVR / WebXR ● Apporter la réalité virtuelle performance dans web ouvert
  6. 6. Les fondamentaux Les réalités Interface utilisateur
  7. 7. @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
  8. 8. @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 ?
  9. 9. @hellosct1 - Very Important Party 2019 De nombreux essais → Réalité Augmenté Virtual Box Nintendo (1995) CardboardCardboard … Beaucoup de tentatives
  10. 10. @hellosct1 - Very Important Party 2019 Où encore...
  11. 11. @hellosct1 - Very Important Party 2019 Matériels
  12. 12. @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
  13. 13. @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
  14. 14. @hellosct1 - Very Important Party 2019 Frameworks (avec extensions) A-Frame React 360 Three JS Babylon JS 4.0
  15. 15. Les fondamentaux Les … réalités... Interface utilisateur
  16. 16. Réalité augmenté
  17. 17. @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>
  18. 18. @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>
  19. 19. @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>
  20. 20. @hellosct1 - Very Important Party 2019 Réalite virtuelle
  21. 21. @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>
  22. 22. @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>
  23. 23. @hellosct1 - Very Important Party 2019 Objets en VR ● Objets fixes ● Objets animés ● Animation ● Vidéo ● Son ● Texture ● Objets externes 11
  24. 24. @hellosct1 - Very Important Party 2019 Mixte realite
  25. 25. @hellosct1 - Very Important Party 2019 Objets animés 14 Demo : https://glitch.com/~4-anim-1-plane-xr
  26. 26. @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)
  27. 27. @hellosct1 - Very Important Party 2019 XR : Aframe + ThreeJS 22
  28. 28. Les fondamentaux Les … réalités... Interface utilisateur
  29. 29. @hellosct1 - Very Important Party 2019 Outillage : contenu 3 D ● SketchUp ● Unity VR ● Oculus ● Dcatia ● Blender ● Unreal engine ● Vive ● Autodesk 3D mask ● Microsoft store
  30. 30. @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
  31. 31. @hellosct1 - Very Important Party 2019 Spoke https://hubs.mozilla.com/spoke/projects
  32. 32. @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
  33. 33. @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
  34. 34. Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Demo Scripts :Merci https://github.com/hellosct1/mixte-realitySources : - Liv Erickson - Hellosct1

×