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

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

DevFest Toulouse 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 03, 2016
Tweet

More Decks by Olivier Guillet

Other Decks in Programming

Transcript

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

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

    @EMOTIC
  3. 3 DEVFEST NANTES 16 Au programme 01 Intro Metaverse /

    réalité virtuelle 03 Technique 02 WebVR Présentation Historique Compatibilité Exemples d’utilisation 04 Le futur WebVR API A-Frame gLTF
  4. 4 DEVFEST TOULOUSE 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 TOULOUSE 16 Sorties commerciales d’équipements performants 6

  7. 7 DEVFEST TOULOUSE 16 Des nouvelles plateformes de contenus Jeux

    vidéos Photos / vidéos 360°
  8. 8 DEVFEST TOULOUSE 16 8 DEVFEST TOULOUSE 16 WebVR Web

    + VR
  9. 9 DEVFEST TOULOUSE 16 WebVR ? • VR dans le

    navigateur grâce à : ◦ une API expérimentale du W3C ◦ WebGL ◦ Three.js • Compatible sur (presque) tous les casques VR du marché :
  10. 10 DEVFEST TOULOUSE 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 TOULOUSE 16 Compatibilité ? https://iswebvrready.org/

  12. 12 DEVFEST TOULOUSE 16 WebVR Polyfill https://github.com/googlevr/webvr-polyfill

  13. 13 DEVFEST TOULOUSE 16 13 DEVFEST TOULOUSE 16 Exemples d’utilisations

    Sites compatibles WebVR
  14. 360syria Photos 360°

  15. Beloola Plateforme sociale immersive

  16. Vizor Editeur WebVR

  17. Sketchfab Modèles 3D

  18. Vrideo Vidéos 360°

  19. Archilogic Architecture

  20. Virtual flight IBERIA Jeu promotionnel

  21. Inside Renault KADJAR Simulateur auto

  22. 22 DEVFEST TOULOUSE 16 22 DEVFEST TOULOUSE 16 Technique Développer

    un site compatible WebVR
  23. 23 DEVFEST TOULOUSE 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; } }
  24. 24 DEVFEST TOULOUSE 16 2.Présenter le canvas WebGL au device

    VR someButton.addEventListener(’click', onStartPresent); function onStartPresent () { vrDisplay.requestPresent({ source : webGLCanvas }); }
  25. 25 DEVFEST TOULOUSE 16 3.Rendu 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); }
  26. 26 DEVFEST TOULOUSE 16 WebVR Boilerplate https://github.com/borismus/webvr-boilerplate

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

    2015 • Basé sur Three.js / WebVR polyfill • Système ECS (entity - component - system) • Framework déclaratif (tags HTML) • Élimine tout le code boilerplate • Pour les développeurs Web !
  28. 28 DEVFEST TOULOUSE 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>
  29. 29 DEVFEST TOULOUSE 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>
  30. 30 DEVFEST TOULOUSE 16 Gamepad API http://html5gamepad.com/ var vrGamepads =

    []; var gamepads = navigator.getGamepads(); for (var i = 0; i < gamepads.length; ++i) { var gamepad = gamepads[i]; if (gamepad && gamepad.pose) { vrGamepads.push(gamepad); } }
  31. 31 DEVFEST TOULOUSE 16 glTF https://www.khronos.org/gltf 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
  32. 32 DEVFEST TOULOUSE 16 glTF https://www.khronos.org/gltf "buffers": { "duck": {

    "byteLength": 102040, "type": "arraybuffer", "uri": "duck.bin" } }, ... "nodes": { "LOD3sp": { "children": [], "matrix": [ // matrix data here ], "meshes": [ "LOD3spShape-lib" ], "name": "LOD3sp" }, … "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 } ] } }, ...
  33. 33 DEVFEST TOULOUSE 16 33 DEVFEST TOULOUSE 16 Le futur

    Sites compatibles WebVR
  34. 34 DEVFEST TOULOUSE 16 Le futur, que nous réserve t’il

    ? De meilleurs performances ! • 90 fps • WebGL 2 • WebAssembly Le support de nouvelles normes • WebVR en version stable • WebRTC
  35. 35 DEVFEST TOULOUSE 16 35 DEVFEST TOULOUSE16 Thank You @OlivierGuillet

    @EMOTIC