Présentation donnée à ChtiJS #17

1. La Réalité Virtuelle
sur le Web avec
Thomas Balouet
CTO et Co-Founder LucidWeb.io
@thomasbalou
09.02.2017

2. Réalité Virtuelle (VR) ?
➢ Simulation informatique immergeant
l’utilisateur dans un environnement virtuel
proche de la réalité avec expérience
sensorielle (vue, toucher,...)
➢ Créée grâce à des moteurs 3D et du
matériel interactif
➢ Vécu et contrôlé par votre propre corps
➢ Un nouveau médium permettant de
regarder autour de soi, la fin de l’écran 2D

3. Etat logiciel de la Réalité Virtuelle (VR)
➢ Marché contrôlé par les stores
➢ Téléchargements et installation
➢ Développement propriétaire
➢ Une version par équipement
➢ Écosystème fermé et "réservé" aux experts

4. WebVR : l'ouverture du web sur la VR
➢ API Web développée par les principaux browser
➢ Un site pour tous les device
➢ Prend automatiquement en compte les
caractéristiques du device:
■ Sur PC, navigation à la souris
■ Sur mobile, “magic window” et navigation
“au doigt”
■ Mode cardboard pour mobile
“Enter VR”

5. Apports concrets du WebVR
LARGE
AUDIENCE
PUBLICATION
IMMEDIATE
1 URL POUR TOUS
POUR LES DIFFUSEURS
PAS DE CENSURE DES
STORES D’APPLICATION
ACCES DIRECT AU
CONTENU VR
PAS
D’INSTALLATION
SOCIAL
FEATURES
DES APPLICATIONS
IMMERSIVES
POUR LES UTILISATEURS

6. Une technologie à la portée de tous
➢ Développement rapide pour les non experts
➢ Mélange de Web traditionnel et de développement 3D
➢ Travail collaboratif et large communauté
➢ Facilement accessible: Notepad + Browser
Vizor.io : programmation visuelle pure web
A-Frame: framework simple
et éditeur en ligne

7. Quelles expériences?
A-Painter: “Tilt Brush-like” pour le
Web (Mozilla VR)
Configurateur de voitures
(Little workshop / Renault)
Visite d’appartements
(LucidWeb / Wonen.TV)
360Syria: reportage 360 interactif
(Junior.io / Amnesty International)
Bibliothèque de contenus 360°
(reVeRies par LucidWeb)

8. L’API WebGL : créer le monde 1. Le renderer (affiche les infos)
2. La scène (contient les meshs)
3. La caméra (donne le point de vue)
4. Les contrôles (gèrent les interactions)
5. L’effet VR (crée la distorsion)
6. Le manager (gère tout ce beau monde)

9. L’API WebVR : gérer la VR
Récupérer les displays
Lancer l’affichage VR

10. L’API WebVR : gérer la VR
Gérer les contrôles (positions)

11. A-Frame: WebVR facile d’accès
Quelques lignes de code Scène manipulable dans le DOM

12. Etat de la technologie
Données de
webvr.rocks

13. Questions?
Thomas Balouet
Thomasbalou
thomas@lucidweb.io
www.lucidweb.io
@lucidw3b
Get started!
● https://aframe.io/
● https://github.com/tbalouet/webvr
Starter
● https://webvr.info/