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
@hellosct1@mamot.fr
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

WebAR / WebVR / WebXR ?
●
Apporter la réalité virtuelle performante
dans web ouvert

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

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

Drupal
3 solutions :
- Modules
ReactVR / a-frame / VR
- WebServices
- Back / Front

Origine du commencement

De nombreux essais dans la Réalité Augmenté
Virtual Box
Nintendo (1995)
CardboardCardboard
… Beaucoup de tentatives

Où encore...

Matériels VR : quelques exemples :

Périphériques possibles…

Matériel Captation 360 °

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

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

Stéréoscopie
●
Perception du relief

Photo spheres

Compatibilité WebVR Navigateurs
Mozilla Firefox Microsoft Edge Chromium Servo
Samsung internet Google Chrome Oculus Carmel
http://createwebvr.com

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

Compatibilité WebVR Navigateurs
Source: https://caniuse.com/#search=vr
WebVR
API WebVR

Compatibilité WebVR Navigateurs / Matériels
WebVR Browsers
Source : https://webvr.rocks/

Framework WebVR
A-Frame Primrose React VR
Three JS X3DOM

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

Page web
<!DOCTYPE html>
<html>
<head>
<script src="lib/a-frame/aframe-v0.x.x.min.js"></script>
</head>
<body>
….
</body>
</html>

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>

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>

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>

Avec Drupal
●
Back office
– Type de contenu
– Views
–
04

Réalité Virtuelle
VR

Objets
●
Demo
10

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>

Objets animés (1/2)
●
Animation
●
Vidéo
●
Son
●
Objet
11

Objet animé
22
●
Demo

A-Frame editor / inspector
●
Github.com/aframevr/aframe-editor
https://github.com/aframevr/aframe-inspector

Compatibilité WebXR Navigateurs
Source: https://caniuse.com/#search=webxr

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

Exemples

Les métiers XR, la prochaine plateforme

Animation XR : Aframe + ThreeJS
22

Outillage : contenu 3 D
●
SketchUp
●
Unity VR
●
Oculus
●
Dcatia
●
Blender
●
Unreal engine
●
Vive
●
Autodesk 3D mask
●
Babylon JS
●
Microsoft store

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

24
XR & Drupal

Au final
●
Association
– AR
– VR
– Frameworks / libraries
●
A-frame
●
Codef
●
ThreeJS

Merci
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Scripts sources :
https://github.com/hellosct1/drupalcamp2019

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

Recommandé

Recommandé

Contenu connexe

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

Similaire à Créer votre expérience de réalite virtuelle avec drupal (20)

Plus de Christophe Villeneuve

Plus de Christophe Villeneuve (20)

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