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éalité
virtuelle avec drupal
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
DrupalCamp 20...
La réalité virtuelle…??xx!?& !!??
●
Réalité Augmenté
●
Réalité Virtuelle
●
MiXte Réalité
API
UX Design
Drupalcamp Paris 2019 -
Christophe Villeneuve ?
●
Consultant
●
Dresseur animaux Free Software
Drupalcamp Paris 2019 -
WebAR / WebVR / WebXR ?
●
Apporter la réalité virtuelle performante
dans web ouvert
Drupalcamp Paris 2019 -
La réalité ?
●
Etre dans la scène 3D
●
Immersion
●
Positionnement objet 3D
– Environnement réel
●
...
Drupalcamp Paris 2019 -
Actualité
●
Annonce de Google
●
Relais par la presse écrite
– Le futur de Google Maps sera en réal...
Drupalcamp Paris 2019 -
Drupal
3 solutions :
- Modules
ReactVR / a-frame / VR
- WebServices
- Back / Front
Drupalcamp Paris 2019 -
Origine du commencement
Drupalcamp Paris 2019 -
De nombreux essais dans la Réalité Augmenté
Virtual Box
Nintendo (1995)
CardboardCardboard
… Beauc...
Drupalcamp Paris 2019 -
Où encore...
Drupalcamp Paris 2019 -
Matériels VR : quelques exemples :
Drupalcamp Paris 2019 -
Périphériques possibles…
Drupalcamp Paris 2019 -
Matériel Captation 360 °
Drupalcamp Paris 2019 -
Pourquoi la WebAR / WebVR / WebXR ?
●
Facilité la distribution
●
Solution Cross-Platform
●
Code ac...
Drupalcamp Paris 2019 -
WebVR supportés par les navigateurs
http://createwebvr.com
/
Mozilla Firefox Microsoft Edge Chromi...
Drupalcamp Paris 2019 -
Stéréoscopie
●
Perception du relief
Drupalcamp Paris 2019 -
Photo spheres
Drupalcamp Paris 2019 -
Compatibilité WebVR Navigateurs
Mozilla Firefox Microsoft Edge Chromium Servo
Samsung internet Goo...
Drupalcamp Paris 2019 -
Compatibilité WebVR Navigateurs : Web XR
●
API WebVR pour les …
– Réalité virtuelle
– Réalité augm...
Drupalcamp Paris 2019 -
Compatibilité WebVR Navigateurs
Source: https://caniuse.com/#search=vr
WebVR
API WebVR
Drupalcamp Paris 2019 -
Compatibilité WebVR Navigateurs / Matériels
WebVR Browsers
Source : https://webvr.rocks/
Drupalcamp Paris 2019 -
Framework WebVR
A-Frame Primrose React VR
Three JS X3DOM
Drupalcamp Paris 2019 -
Puissance et Extensible
jQuery React Redux Vue.js ...
DOM
A-Frame
A-Frame
Components
Entity-compon...
La pratique
Drupalcamp Paris 2019 -
Page web
<!DOCTYPE html>
<html>
<head>
<script src="lib/a-frame/aframe-v0.x.x.min.js"></script>
</...
Drupalcamp Paris 2019 -
La réalité augmentée
●
Utilisation
– Framework A-frame
<a-scene embedded arjs='sourceType: webcam;...
Drupalcamp Paris 2019 -
La réalité augmentée… pas vraiment
01
<div style='position: fixed; top: 10px; width:100%; text-ali...
Drupalcamp Paris 2019 -
Vue 360°
02
<a-scene>
<a-curvedimage
src="photo.jpg"
height="140"
radius="100"
thete-length="360"
...
Drupalcamp Paris 2019 -
Avec Drupal
●
Back office
– Type de contenu
– Views
–
04
Drupalcamp Paris 2019 -
Réalité Virtuelle
VR
Drupalcamp Paris 2019 -
Objets
●
Demo
10
Drupalcamp Paris 2019 -
Objets fixes
<a-text position="0 0.25 -1" height="10" depth="2" color="#FF0000" value="Drupalcamp
...
Drupalcamp Paris 2019 -
Objets animés (1/2)
●
Animation
●
Vidéo
●
Son
●
Objet
11
Drupalcamp Paris 2019 -
Objet animé
22
●
Demo
Drupalcamp Paris 2019 -
A-Frame editor / inspector
●
Github.com/aframevr/aframe-editor
https://github.com/aframevr/aframe-...
miXte Réalité → WebXR
Drupalcamp Paris 2019 -
Compatibilité WebXR Navigateurs
Source: https://caniuse.com/#search=webxr
Drupalcamp Paris 2019 -
WebXR ?
●
API WebVR
– pour la réalité virtuelle
– Augmentée
– Mixte
●
Combiné les standards et XR ...
Drupalcamp Paris 2019 -
Exemples
Drupalcamp Paris 2019 -
Les métiers XR, la prochaine plateforme
Drupalcamp Paris 2019 -
Animation XR : Aframe + ThreeJS
22
Outils
Drupalcamp Paris 2019 -
Outillage : contenu 3 D
●
SketchUp
●
Unity VR
●
Oculus
●
Dcatia
●
Blender
●
Unreal engine
●
Vive
●...
Drupalcamp Paris 2019 -
Plus loin
●
Exemple :
– https://aframe.io/
●
Docs :
– http://aframe.io/docs/g
uide
●
Plugins & sho...
Drupalcamp Paris 2019 -
24
XR & Drupal
Drupalcamp Paris 2019 -
Au final
●
Association
– AR
– VR
– Frameworks / libraries
●
A-frame
●
Codef
●
ThreeJS
Drupalcamp Paris 2019 -
Merci
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Scripts sources :
https://github.com/he...
Upcoming SlideShare
Loading in …5
×

of

Créer votre expérience de réalite virtuelle avec drupal Slide 1 Créer votre expérience de réalite virtuelle avec drupal Slide 2 Créer votre expérience de réalite virtuelle avec drupal Slide 3 Créer votre expérience de réalite virtuelle avec drupal Slide 4 Créer votre expérience de réalite virtuelle avec drupal Slide 5 Créer votre expérience de réalite virtuelle avec drupal Slide 6 Créer votre expérience de réalite virtuelle avec drupal Slide 7 Créer votre expérience de réalite virtuelle avec drupal Slide 8 Créer votre expérience de réalite virtuelle avec drupal Slide 9 Créer votre expérience de réalite virtuelle avec drupal Slide 10 Créer votre expérience de réalite virtuelle avec drupal Slide 11 Créer votre expérience de réalite virtuelle avec drupal Slide 12 Créer votre expérience de réalite virtuelle avec drupal Slide 13 Créer votre expérience de réalite virtuelle avec drupal Slide 14 Créer votre expérience de réalite virtuelle avec drupal Slide 15 Créer votre expérience de réalite virtuelle avec drupal Slide 16 Créer votre expérience de réalite virtuelle avec drupal Slide 17 Créer votre expérience de réalite virtuelle avec drupal Slide 18 Créer votre expérience de réalite virtuelle avec drupal Slide 19 Créer votre expérience de réalite virtuelle avec drupal Slide 20 Créer votre expérience de réalite virtuelle avec drupal Slide 21 Créer votre expérience de réalite virtuelle avec drupal Slide 22 Créer votre expérience de réalite virtuelle avec drupal Slide 23 Créer votre expérience de réalite virtuelle avec drupal Slide 24 Créer votre expérience de réalite virtuelle avec drupal Slide 25 Créer votre expérience de réalite virtuelle avec drupal Slide 26 Créer votre expérience de réalite virtuelle avec drupal Slide 27 Créer votre expérience de réalite virtuelle avec drupal Slide 28 Créer votre expérience de réalite virtuelle avec drupal Slide 29 Créer votre expérience de réalite virtuelle avec drupal Slide 30 Créer votre expérience de réalite virtuelle avec drupal Slide 31 Créer votre expérience de réalite virtuelle avec drupal Slide 32 Créer votre expérience de réalite virtuelle avec drupal Slide 33 Créer votre expérience de réalite virtuelle avec drupal Slide 34 Créer votre expérience de réalite virtuelle avec drupal Slide 35 Créer votre expérience de réalite virtuelle avec drupal Slide 36 Créer votre expérience de réalite virtuelle avec drupal Slide 37 Créer votre expérience de réalite virtuelle avec drupal Slide 38 Créer votre expérience de réalite virtuelle avec drupal Slide 39 Créer votre expérience de réalite virtuelle avec drupal Slide 40 Créer votre expérience de réalite virtuelle avec drupal Slide 41 Créer votre expérience de réalite virtuelle avec drupal Slide 42 Créer votre expérience de réalite virtuelle avec drupal Slide 43 Créer votre expérience de réalite virtuelle avec drupal Slide 44 Créer votre expérience de réalite virtuelle avec drupal Slide 45 Créer votre expérience de réalite virtuelle avec drupal Slide 46 Créer votre expérience de réalite virtuelle avec drupal Slide 47
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

653

On Slideshare

0

From embeds

0

Number of embeds

7

Actions

Downloads

7

Shares

0

Comments

0

Likes

0

×