Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DevFest Nantes 2016 - De la réalité virtuelle dans nos navigateurs, en route vers le Metaverse !

DevFest Nantes 2016 - De la réalité virtuelle dans nos navigateurs, en route vers le Metaverse !

WebVR est une future norme du W3C, en phase de draft actuellement.
Il s'agit d'une API Javascript expérimentale qui permet d’utiliser le navigateur web de votre ordinateur ou de votre mobile directement dans votre casque de réalité virtuelle, d’un basique Google Cardboard à un très sophistiqué HTC Vive.

333b4bd0eb2a3d16c11d1dc27ec9576b?s=128

Olivier Guillet

November 10, 2016
Tweet

More Decks by Olivier Guillet

Other Decks in Programming

Transcript

  1. DEVFEST NANTES 16 De la réalité virtuelle dans nos navigateurs,

    en route vers le Metaverse ! #devfestnantes WebVR
  2. 2 DEVFEST NANTES 16 Olivier Guillet | @OlivierGuillet Directeur Technique

    @EMOTIC
  3. 3 DEVFEST NANTES 16 Sommaire 01 Intro Metaverse 2016 :

    an 1 de la réalité virtuelle 03 Technique 02 WebVR Présentation Historique Compatibilité Exemples d’utilisation 04 Le futur Three.js WebVR API A-Frame gLTF Que nous réserve-t-il ?
  4. 4 DEVFEST NANTES 16 Metaverse ? 1992 : “ Le

    métaverse (méta-univers) est un monde virtuel fictif décrit dans le roman Le Samouraï virtuel, de Neal Stephenson. “ - Wikipedia 2016 : le Metaverse est l’idée d’étendre internet en 3D afin qu’un nombre infini d’espaces virtuels puissent être reliés entre eux et explorés en réalité virtuelle.
  5. Pourquoi 2016 est l’an 1 de la réalité virtuelle ?

  6. 6 DEVFEST NANTES 16 Sorties commerciales d’équipements performants 6 150

    000 100 000 ? > 2 000 000 50 000 / 1 semaine > 20 000 000
  7. 7 DEVFEST NANTES 16 Des nouvelles plateformes de contenus Jeux

    vidéos Photos / vidéos 360°
  8. 8 DEVFEST NANTES 16 8 DEVFEST NANTES 16 WebVR Une

    API expérimentale du W3C Ce n’est pas (encore) le métaverse
  9. 9 DEVFEST NANTES 16 WebVR ? Embarquer une expérience VR

    dans une page web : • positionnement du casque (orientation) • métriques pour le rendu (champ de vue, viewport, InterPupillary Distance) • rendu 3D stéréoscopique • navigation de site VR en site VR (prototype Mozilla 01/11/2016) • affichage sites classiques (HTML 2D) en VR (2017 Android + Chrome desktop)
  10. 10 DEVFEST NANTES 16 Historique Eté 2014 Vladimir Vukicevic (Mozilla)

    Brandon Jones (Google) Mars 2016 Sept. 2016 Oct. 2016 WebVR v1.0 API Microsoft Edge WebVR v1.1 API W3C Workshop WebVR v1.2 ?
  11. 11 DEVFEST NANTES 16 Compatibilité ? https://iswebvrready.org/ Compatible sur (presque)

    tous les casques VR du marché :
  12. 12 DEVFEST NANTES 16 Compatibilité ? https://iswebvrready.org/

  13. 13 DEVFEST NANTES 16 WebVR Polyfill https://github.com/googlevr/webvr-polyfill

  14. 14 DEVFEST NANTES 16 14 DEVFEST NANTES 16 Exemples d’utilisations

    Sites compatibles WebVR
  15. My Social Galaxy Tweetwall 360°

  16. 360syria Photos 360°

  17. Beloola Plateforme sociale immersive

  18. Sketchfab Modèles 3D

  19. Vrideo Vidéos 360°

  20. Washington Post Article de presse immersif

  21. Virtual flight IBERIA Jeu promotionnel

  22. Inside Renault KADJAR Simulateur auto

  23. 23 DEVFEST NANTES 16 23 DEVFEST NANTES 16 Technique Développer

    un site compatible WebVR
  24. 24 DEVFEST NANTES 16 WebGL API HTML5 qui permet d’afficher

    de la 3D directement dans le navigateur • via une balise canvas • issu de l’OpenGL ES 2.0 • supporté par tous les navigateurs modernes
  25. 25 DEVFEST NANTES 16 VR dans le navigateur (mobile) sans

    WebVR ? Three.js, LA librairie WebGL la plus utilisée • StereoEffect.js : rendu stéréoscopique 3D • DeviceOrientationControls.js • passage en plein écran • Un cardboard • (OrbitControl.js : sur PC)
  26. 26 DEVFEST NANTES 16 1.Lister les devices VR disponibles var

    self = this; var vrDisplay; navigator.getVRDisplays().then(gotVRDisplays ); function gotVRDisplays ( displays ) { if (displays.length > 0) { vrDisplay = displays[0]; self.left = vrDisplay.getEyeParameters( "left" ); self.right = vrDisplay.getEyeParameters( "right" ); self.vrDisplay = vrDisplay; } }
  27. 27 DEVFEST NANTES 16 2.Présenter le canvas WebGL au device

    VR var webglCanvas = document.querySelector('#webglcanvas'); someButton.addEventListener(’click', onStartPresent); function onStartPresent () { vrDisplay.requestPresent({ source : webGLCanvas }); }
  28. 28 DEVFEST NANTES 16 3.Rendu VR vrDisplay.requestAnimationFrame(runloop); function runloop() {

    // set up for the next frame vrDisplay.requestAnimationFrame(runloop); // render the content var pose = vrDisplay.getPose(); if (vrDisplay.isPresenting) { renderScene(pose, "left”); renderScene(pose, ”right")); } vrDisplay.submitFrame(pose); }
  29. 29 DEVFEST NANTES 16 WebVR Boilerplate https://github.com/borismus/webvr-boilerplate

  30. 30 DEVFEST NANTES 16 A-Frame https://aframe.io/ • Mozilla - Décembre

    2015 • Basé sur WebVR polyfill + Three.js • Système ECS (entity - component - system) • Framework déclaratif (tags HTML) • Élimine tout le code boilerplate • Pour les développeurs Web !
  31. 31 DEVFEST NANTES 16 A-Frame Hello World <!DOCTYPE html> <html>

    <head> <meta charset="utf-8"> <title>Hello, World! • A-Frame</title> <meta name="description" content="Hello, World! • A-Frame"> <script src="../../../dist/aframe.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> <a-entity position="0 0 3.8"> <a-camera></a-camera> </a-entity> </a-scene> </body> </html>
  32. 32 DEVFEST NANTES 16 A-Frame Photo 360° <!DOCTYPE html> <html>

    <head> <meta charset="utf-8"> <title>Hello, World! • A-Frame</title> <meta name="description" content="Hello, World! • A-Frame"> <script src="../../../dist/aframe.js"></script> </head> <body> <a-scene> <a-sky src="mountain.jpg" rotation="0 -130 0"></a-sky> </a-scene> </body> </html>
  33. 33 DEVFEST NANTES 16 Gamepad API http://html5gamepad.com/

  34. 34 DEVFEST NANTES 16 Quid des contrôleurs spécifiques à la

    VR ?
  35. 35 DEVFEST NANTES 16 Gamepad Extensions https://w3c.github.io/gamepad/extensions.html var vrGamepads =

    []; var gamepads = navigator.getGamepads(); for (var i = 0; i < gamepads.length; ++i) { var gamepad = gamepads[i]; if (gamepad.pose) { vrGamepads.push(gamepad); } } Extension de la Gamepad API : position, orientation, vélocité, accélération • Chrome • 3 DOF / 6 DOF
  36. 36 DEVFEST NANTES 16 Nouveau format supporté par le Khronos

    Group Représentation compacte pour des transferts rapides Chargement rapide en mémoire • JSON pour la structure des scènes et les objets de haut niveau (meshes) • Types natifs GL Support complet des objets 3D • Hiérarchies textures, caméra, skins, animations • shaders et matériaux glTF (GL Transmission Format) https://www.khronos.org/gltf
  37. 37 DEVFEST NANTES 16 "meshes": { "LOD3spShape-lib": { "name": "LOD3spShape",

    "primitives": [ { "attributes": { "NORMAL": "accessor_25", "POSITION": "accessor_23", "TEXCOORD_0": "accessor_27" }, "indices": "accessor_21", "material": "blinn3-fx", "primitive": 4 } ] } } glTF (GL Transmission Format) https://www.khronos.org/gltf "buffers": { "duck": { "byteLength": 102040, "type": "arraybuffer", "uri": "duck.bin" } }, ... "nodes": { "LOD3sp": { "children": [], "matrix": [], "meshes": [ "LOD3spShape-lib" ], "name": "LOD3sp" } }, …
  38. 38 DEVFEST NANTES 16 38 DEVFEST NANTES 16 Le futur

    que nous réserve-t-il ?
  39. 39 DEVFEST NANTES 16 Le futur, que nous réserve t’il

    ? De meilleurs performances ! • Rendu 90 fps • WebGL 2 • WebAssembly Le support de nouvelles normes • WebVR en version stable • WebRTC : réalité augmentée / mixte
  40. 40 DEVFEST NANTES 16 40 DEVFEST NANTES 16 Thank You

    @OlivierGuillet @EMOTIC