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.

Créer votre expérience de réalite virtuelle avec drupal

406 views

Published on

2 démos :
* https://glitch.com/~reality-virtuel-demo
* https://glitch.com/~xr-a-frame-and-drupal

Présentation effectuée au DrupalCamp Paris 2019 sur "Créer uvotre expérience de réalité virtuelle avec Drupal" par Christophe Villeneuve .
La conférence montrera AR / VR / XR ou la WebAR / WebVR / WebXR qui affichera du contenu venant du CMS Drupal avec le framework aframeVR

Published in: Internet
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Créer votre expérience de réalite virtuelle avec drupal

  1. 1. Créer votre expérience de réalité virtuelle avec drupal Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr DrupalCamp 2019 – le 16 février 2019
  2. 2. La réalité virtuelle…??xx!?& !!?? ● Réalité Augmenté ● Réalité Virtuelle ● MiXte Réalité API UX Design
  3. 3. Drupalcamp Paris 2019 - Christophe Villeneuve ? ● Consultant ● Dresseur animaux Free Software
  4. 4. Drupalcamp Paris 2019 - WebAR / WebVR / WebXR ? ● Apporter la réalité virtuelle performante dans web ouvert
  5. 5. Drupalcamp Paris 2019 - La réalité ? ● Etre dans la scène 3D ● Immersion ● Positionnement objet 3D – Environnement réel ● Ajouter des éléments réel – Champ de vision Réalité Virtuelle Réalité Augmentée
  6. 6. Drupalcamp Paris 2019 - Actualité ● Annonce de Google ● Relais par la presse écrite – Le futur de Google Maps sera en réalité augmentée ● Annonce vidéo – https://www.youtube.com/watch?v=QW1QT7DOOdA ® Titre article de frenchweb
  7. 7. Drupalcamp Paris 2019 - Drupal 3 solutions : - Modules ReactVR / a-frame / VR - WebServices - Back / Front
  8. 8. Drupalcamp Paris 2019 - Origine du commencement
  9. 9. Drupalcamp Paris 2019 - De nombreux essais dans la Réalité Augmenté Virtual Box Nintendo (1995) CardboardCardboard … Beaucoup de tentatives
  10. 10. Drupalcamp Paris 2019 - Où encore...
  11. 11. Drupalcamp Paris 2019 - Matériels VR : quelques exemples :
  12. 12. Drupalcamp Paris 2019 - Périphériques possibles…
  13. 13. Drupalcamp Paris 2019 - Matériel Captation 360 °
  14. 14. Drupalcamp Paris 2019 - Pourquoi la WebAR / WebVR / WebXR ? ● Facilité la distribution ● Solution Cross-Platform ● Code accessible ● Facilité d’accès, de découverte et de partage ● Liens entre projets
  15. 15. Drupalcamp Paris 2019 - WebVR supportés par les navigateurs http://createwebvr.com / Mozilla Firefox Microsoft Edge Chromium Servo Samsung internet Google Chrome Oculus Carmel
  16. 16. Drupalcamp Paris 2019 - Stéréoscopie ● Perception du relief
  17. 17. Drupalcamp Paris 2019 - Photo spheres
  18. 18. Drupalcamp Paris 2019 - Compatibilité WebVR Navigateurs Mozilla Firefox Microsoft Edge Chromium Servo Samsung internet Google Chrome Oculus Carmel http://createwebvr.com
  19. 19. Drupalcamp Paris 2019 - Compatibilité WebVR Navigateurs : Web XR ● API WebVR pour les … – Réalité virtuelle – Réalité augmenté – Réalité mixte ● Combiner les standards et XR dans les navigateurs ● Polyfill ● Outils
  20. 20. Drupalcamp Paris 2019 - Compatibilité WebVR Navigateurs Source: https://caniuse.com/#search=vr WebVR API WebVR
  21. 21. Drupalcamp Paris 2019 - Compatibilité WebVR Navigateurs / Matériels WebVR Browsers Source : https://webvr.rocks/
  22. 22. Drupalcamp Paris 2019 - Framework WebVR A-Frame Primrose React VR Three JS X3DOM
  23. 23. Drupalcamp Paris 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
  24. 24. La pratique
  25. 25. Drupalcamp Paris 2019 - Page web <!DOCTYPE html> <html> <head> <script src="lib/a-frame/aframe-v0.x.x.min.js"></script> </head> <body> …. </body> </html>
  26. 26. Drupalcamp Paris 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>
  27. 27. Drupalcamp Paris 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="image.png" width="300px"> </div> <a-scene embedded arjs='sourceType: webcam;'> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene>
  28. 28. Drupalcamp Paris 2019 - Vue 360° 02 <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>
  29. 29. Drupalcamp Paris 2019 - Avec Drupal ● Back office – Type de contenu – Views – 04
  30. 30. Drupalcamp Paris 2019 - Réalité Virtuelle VR
  31. 31. Drupalcamp Paris 2019 - Objets ● Demo 10
  32. 32. Drupalcamp Paris 2019 - Objets fixes <a-text position="0 0.25 -1" height="10" depth="2" color="#FF0000" value="Drupalcamp 2019"> </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>
  33. 33. Drupalcamp Paris 2019 - Objets animés (1/2) ● Animation ● Vidéo ● Son ● Objet 11
  34. 34. Drupalcamp Paris 2019 - Objet animé 22 ● Demo
  35. 35. Drupalcamp Paris 2019 - A-Frame editor / inspector ● Github.com/aframevr/aframe-editor https://github.com/aframevr/aframe-inspector
  36. 36. miXte Réalité → WebXR
  37. 37. Drupalcamp Paris 2019 - Compatibilité WebXR Navigateurs Source: https://caniuse.com/#search=webxr
  38. 38. Drupalcamp Paris 2019 - WebXR ? ● API WebVR – pour la réalité virtuelle – Augmentée – Mixte ● Combiné les standards et XR dans les navigateurs – Polyfill – Outils ● Cas utilisation – Voyage, chat, B2B/B2C… – QR code
  39. 39. Drupalcamp Paris 2019 - Exemples
  40. 40. Drupalcamp Paris 2019 - Les métiers XR, la prochaine plateforme
  41. 41. Drupalcamp Paris 2019 - Animation XR : Aframe + ThreeJS 22
  42. 42. Outils
  43. 43. Drupalcamp Paris 2019 - Outillage : contenu 3 D ● SketchUp ● Unity VR ● Oculus ● Dcatia ● Blender ● Unreal engine ● Vive ● Autodesk 3D mask ● Babylon JS ● Microsoft store
  44. 44. Drupalcamp Paris 2019 - Plus loin ● Exemple : – https://aframe.io/ ● Docs : – http://aframe.io/docs/g uide ● Plugins & showcases – http://github.com/afr amevr/awesome-aframe# guides-and-tutorials ● MDN Web docs ● A-frame doc – https://aframe.io/docs ● ThreeJS docs – https://threejs.org/doc s ● W3C https://www.w3.org/community/webvr/ https://w3c.github.io/webvr
  45. 45. Drupalcamp Paris 2019 - 24 XR & Drupal
  46. 46. Drupalcamp Paris 2019 - Au final ● Association – AR – VR – Frameworks / libraries ● A-frame ● Codef ● ThreeJS
  47. 47. Drupalcamp Paris 2019 - Merci Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Scripts sources : https://github.com/hellosct1/drupalcamp2019

×