La réalité virtuelle dans le Web avec A-Frame et Vue.js - Best of Web 2018 Tweetscape : https://pierrechls.github.io/tweetscape Git repo : https://github.com/pierrechls/tweetscape

1. LA RÉALITÉ VIRTUELLE DANS LE WEB
RETOUR D’EXPÉRIENCE SUR Vue.js + A-Frame

2. Pierre Charles
@pierrechls
Victor Viale
@koroeskohr

3. LE PROJET

4. LE CADRE DU PROJET

5. LE CONCEPT
TIMELINE 3D TEMPS RÉEL RV TWITTER

6. PRÉCURSEURS SUR LE STACK UTILISÉ
+
Vue.js A-Frame

7. UNE PETITE RÉCOMPENSE

8. LE FUTUR DE LA VR EST-IL DANS LE WEB ?

9. Performances quasi-natives !
SUPPORT DE LA VR SUR LE WEB
WebGL
Support d’OpenGL ES 3.0
WebVR
Support du matériel de VR
(Oculus Rift, HTC Vive, Google
Cardboard)
WebAssembly
Nécessité pour les algos
gourmands
(moteurs physiques, particules)

10. APIs HTML5 pour les applications interactives
SUPPORT DE LA VR SUR LE WEB
Audio API Fullscreen Device orientation Gamepad API
Export “natif” (app Electron)

11. LA VR DANS L’OPENSOURCE
React VR A-Frame

12. ● Soutenu par Mozilla
● Inclut THREE.js pour le render
● Gère l’affichage pour beaucoup d’appareils de VR (casques, controllers)
A-FRAME

13. A-FRAME

14. A-FRAME
● DOM-like ! Inspiration VRML
● Entity-component-system pattern
● Composition over inheritance
● Construit un scene graph
Scene graph de Unity

15. A-FRAME

16. <a-scene>
<a-entity light="type: point;" id="sun"></a-entity>
<a-cube position="0 0 0" look-at="#sun"></a-cube>
</a-scene>
A-FRAME

17. DÉMO

18. VUE.JS
● Dessine l’UI en overlay
● Gère le routage
● Gère le state et la synchro serveur si besoin
● Sert à instancier les éléments de la scène

19. VUE.JS
● Architecture de jeu : render un state
● Vuex (Redux) utilisable
● Vue reste la seule entité à manipuler les données

20. MAIS DU COUP, ÇA FONCTIONNE ?
(j’espère 😱)
DÉMONSTRATION

21. LA SLIDE RABAT-JOIE
● La VR évolue vite, les specs W3C moins
● Rétrocompatibilité ?
● Performance critique pas encore atteinte

22. https://pierrechls.github.io/tweetscape
Pierre Charles
@pierrechls
Victor Viale
@koroeskohr