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.

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. 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
  3. 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.
  4. 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é :
  5. 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 ?
  6. 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; } }
  7. 24 DEVFEST TOULOUSE 16 2.Présenter le canvas WebGL au device

    VR someButton.addEventListener(’click', onStartPresent); function onStartPresent () { vrDisplay.requestPresent({ source : webGLCanvas }); }
  8. 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); }
  9. 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 !
  10. 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>
  11. 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>
  12. 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); } }
  13. 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
  14. 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 } ] } }, ...
  15. 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