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

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

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 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.

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

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 DEVFEST NANTES 16 Des nouvelles plateformes de contenus Jeux vidéos Photos / vidéos 360°

8 DEVFEST NANTES 16 8 DEVFEST NANTES 16 WebVR Une API expérimentale du W3C Ce n’est pas (encore) le métaverse

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 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 DEVFEST NANTES 16 Compatibilité ? https://iswebvrready.org/ Compatible sur (presque) tous les casques VR du marché :

12 DEVFEST NANTES 16 Compatibilité ? https://iswebvrready.org/

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

14 DEVFEST NANTES 16 14 DEVFEST NANTES 16 Exemples d’utilisations Sites compatibles WebVR

My Social Galaxy Tweetwall 360°

360syria Photos 360°

Beloola Plateforme sociale immersive

Sketchfab Modèles 3D

Vrideo Vidéos 360°

Washington Post Article de presse immersif

Virtual flight IBERIA Jeu promotionnel

Inside Renault KADJAR Simulateur auto

23 DEVFEST NANTES 16 23 DEVFEST NANTES 16 Technique Développer un site compatible WebVR

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 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 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 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 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 DEVFEST NANTES 16 WebVR Boilerplate https://github.com/borismus/webvr-boilerplate

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 DEVFEST NANTES 16 A-Frame Hello World Hello, World! • A-Frame

32 DEVFEST NANTES 16 A-Frame Photo 360° Hello, World! • A-Frame

33 DEVFEST NANTES 16 Gamepad API http://html5gamepad.com/

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

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 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 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 DEVFEST NANTES 16 38 DEVFEST NANTES 16 Le futur que nous réserve-t-il ?

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 DEVFEST NANTES 16 40 DEVFEST NANTES 16 Thank You @OlivierGuillet @EMOTIC