Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

378 vues

Publié le

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

Publié dans : Internet
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ▲▲▲ https://tinyurl.com/rockhardxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Soyez le premier à aimer ceci

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

×