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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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 ?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

360syria Photos 360°

Slide 15

Slide 15 text

Beloola Plateforme sociale immersive

Slide 16

Slide 16 text

Vizor Editeur WebVR

Slide 17

Slide 17 text

Sketchfab Modèles 3D

Slide 18

Slide 18 text

Vrideo Vidéos 360°

Slide 19

Slide 19 text

Archilogic Architecture

Slide 20

Slide 20 text

Virtual flight IBERIA Jeu promotionnel

Slide 21

Slide 21 text

Inside Renault KADJAR Simulateur auto

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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 !

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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