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

Créer votre expérience de réalité virtuelle avec drupal Christophe Villeneuve
@hellosct1 @[email protected] DrupalCamp 2019 – le 16 février 2019

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 • Ajouter des éléments réel – Champ de vision Réalité Virtuelle Réalité Augmentée

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

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) Cardboard Cardboard … Beaucoup de tentatives

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 accessible • Facilité d’accès, de découverte et de partage • Liens entre projets

Drupalcamp Paris 2019 - WebVR supportés par les navigateurs http://createwebvr.com
/ Mozilla Firefox Microsoft Edge Chromium Servo Samsung internet Google Chrome Oculus Carmel

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 Google Chrome Oculus Carmel http://createwebvr.com

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

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-component Gamepad A C C E S S I B L E Navigateurs WebGL Web Audio WebVR Web Speech

La pratique

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>

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>

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>

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>

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 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>

Drupalcamp Paris 2019 - Objets animés (1/2) • Animation •
Vidéo • Son • Objet 11

Drupalcamp Paris 2019 - Objet animé 22 • Demo Démo
en ligne : https://glitch.com/~reality-virtuel-demo

Drupalcamp Paris 2019 - A-Frame editor / inspector • Github.com/aframevr/aframe-editor
https://github.com/aframevr/aframe-inspector

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 dans les navigateurs – Polyfill – Outils • Cas utilisation – Voyage, chat, B2B/B2C… – QR code

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 • Autodesk 3D mask • Babylon JS • Microsoft store

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

Drupalcamp Paris 2019 - 24 XR & Drupal Démo en
ligne : https://glitch.com/~xr-a-frame-and-drupal

Drupalcamp Paris 2019 - Au final • Association – AR
– VR – Frameworks / libraries • A-frame • Codef • ThreeJS

Drupalcamp Paris 2019 - Merci Christophe Villeneuve @hellosct1 @[email protected] Scripts
sources : https://github.com/hellosct1/drupalcamp2019

Créer votre expérience de réalite virtuelle ave...

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

More Decks by hellosct1

Other Decks in Programming

Featured

Transcript