Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

La réalité virtuelle dans le Web avec A-Frame et Vue.js - Best of Web 2018

292 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

La réalité virtuelle dans le Web avec A-Frame et Vue.js - Best of Web 2018

  1. 1. LA RÉALITÉ VIRTUELLE DANS LE WEB RETOUR D’EXPÉRIENCE SUR Vue.js + A-Frame
  2. 2. Pierre Charles @pierrechls Victor Viale @koroeskohr
  3. 3. LE PROJET
  4. 4. LE CADRE DU PROJET
  5. 5. LE CONCEPT TIMELINE 3D TEMPS RÉEL RV TWITTER
  6. 6. PRÉCURSEURS SUR LE STACK UTILISÉ + Vue.js A-Frame
  7. 7. UNE PETITE RÉCOMPENSE
  8. 8. LE FUTUR DE LA VR EST-IL DANS LE WEB ?
  9. 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. 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. 11. LA VR DANS L’OPENSOURCE React VR A-Frame
  12. 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. 13. A-FRAME
  14. 14. A-FRAME ● DOM-like ! Inspiration VRML ● Entity-component-system pattern ● Composition over inheritance ● Construit un scene graph Scene graph de Unity
  15. 15. A-FRAME
  16. 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. 17. DÉMO
  18. 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. 19. VUE.JS ● Architecture de jeu : render un state ● Vuex (Redux) utilisable ● Vue reste la seule entité à manipuler les données
  20. 20. MAIS DU COUP, ÇA FONCTIONNE ? (j’espère 😱) DÉMONSTRATION
  21. 21. LA SLIDE RABAT-JOIE ● La VR évolue vite, les specs W3C moins ● Rétrocompatibilité ? ● Performance critique pas encore atteinte
  22. 22. https://pierrechls.github.io/tweetscape Pierre Charles @pierrechls Victor Viale @koroeskohr

×