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.

Transcript

1. DEVFEST TOULOUSE 16
   De la réalité virtuelle dans nos navigateurs,
   en route vers le Metaverse !
   #devFestToulouse
   WebVR
   

   View Slide

2. 2
   DEVFEST TOULOUSE 16
   Olivier Guillet | @OlivierGuillet
   Directeur Technique
   @EMOTIC
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

5. Pourquoi 2016 est l’an 1 de la réalité virtuelle ?
   

   View Slide

6. 6
   DEVFEST TOULOUSE 16
   Sorties commerciales d’équipements performants
   6
   

   View Slide

7. 7
   DEVFEST TOULOUSE 16
   Des nouvelles plateformes de contenus
   Jeux vidéos
   Photos / vidéos 360°
   

   View Slide

8. 8
   DEVFEST TOULOUSE 16 8
   DEVFEST TOULOUSE 16
   WebVR
   Web + VR
   

   View Slide

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é :
   

   View Slide

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 ?
    

    View Slide

11. 11
    DEVFEST TOULOUSE 16
    Compatibilité ? https://iswebvrready.org/
    

    View Slide

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

    View Slide

13. 13
    DEVFEST TOULOUSE 16 13
    DEVFEST TOULOUSE 16
    Exemples d’utilisations
    Sites compatibles WebVR
    

    View Slide

14. 360syria
    Photos 360°
    

    View Slide

15. Beloola
    Plateforme sociale immersive
    

    View Slide

16. Vizor
    Editeur WebVR
    

    View Slide

17. Sketchfab
    Modèles 3D
    

    View Slide

18. Vrideo
    Vidéos 360°
    

    View Slide

19. Archilogic
    Architecture
    

    View Slide

20. Virtual flight IBERIA
    Jeu promotionnel
    

    View Slide

21. Inside Renault KADJAR
    Simulateur auto
    

    View Slide

22. 22
    DEVFEST TOULOUSE 16 22
    DEVFEST TOULOUSE 16
    Technique
    Développer un site compatible WebVR
    

    View Slide

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;
    }
    }
    

    View Slide

24. 24
    DEVFEST TOULOUSE 16
    2.Présenter le canvas WebGL au device VR
    someButton.addEventListener(’click', onStartPresent);
    function onStartPresent () {
    vrDisplay.requestPresent({ source : webGLCanvas });
    }
    

    View Slide

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);
    }
    

    View Slide

26. 26
    DEVFEST TOULOUSE 16
    WebVR Boilerplate https://github.com/borismus/webvr-boilerplate
    

    View Slide

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 !
    

    View Slide

28. 28
    DEVFEST TOULOUSE 16
    A-Frame Hello World
    
    
    
    
    Hello, World! • A-Frame
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

29. 29
    DEVFEST TOULOUSE 16
    A-Frame Photo 360°
    
    
    
    
    Hello, World! • A-Frame
    
    
    
    
    
    
    
    
    
    

    View Slide

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);
    }
    }
    

    View Slide

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
    

    View Slide

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
    }
    ]
    }
    },
    ...
    

    View Slide

33. 33
    DEVFEST TOULOUSE 16 33
    DEVFEST TOULOUSE 16
    Le futur
    Sites compatibles WebVR
    

    View Slide

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
    

    View Slide

35. 35
    DEVFEST TOULOUSE 16 35
    DEVFEST TOULOUSE16
    Thank You
    @OlivierGuillet
    @EMOTIC
    

    View Slide