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

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

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

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

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

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

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

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

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 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 DEVFEST TOULOUSE 16 Compatibilité ? https://iswebvrready.org/

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

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

360syria Photos 360°

Beloola Plateforme sociale immersive

Vizor Editeur WebVR

Sketchfab Modèles 3D

Vrideo Vidéos 360°

Archilogic Architecture

Virtual flight IBERIA Jeu promotionnel

Inside Renault KADJAR Simulateur auto

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

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 DEVFEST TOULOUSE 16 2.Présenter le canvas WebGL au device
VR someButton.addEventListener(’click', onStartPresent); function onStartPresent () { vrDisplay.requestPresent({ source : webGLCanvas }); }

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

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 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 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 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 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 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 DEVFEST TOULOUSE 16 33 DEVFEST TOULOUSE 16 Le futur
Sites compatibles WebVR

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 DEVFEST TOULOUSE 16 35 DEVFEST TOULOUSE16 Thank You @OlivierGuillet
@EMOTIC

DevFest Toulouse 2016 - De la réalité virtuelle...

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

More Decks by Olivier Guillet

Other Decks in Programming

Featured

Transcript