La petite WebVR api

« Développeur, s'il te plaît… intègre moi dans ton projet…»

Vincent Ogloblinsky

Architecte logiciel

" Technologies frontend "

SII Ouest

@vogloblinsky

Plan

1. Le domaine de la Réalité Virtuelle (VR)

2. L'API WebVR

3. Les frameworks

4. A-Frame

5. Démo

6. 2017+

Domaine de la Réalité Virtuelle

Hype Cycle for Emerging Technologies, 2016

Secteurs impactés

Jeu vidéo

Secteurs impactés

Cinéma

Secteurs impactés

Tourisme

Secteurs impactés

Formation

Secteurs impactés

Journalisme

Plateforme de contenu

Casques

Oculus Rift

HTC Vive

Samsung Gear VR

Cardboard

...

API WebVR

Née en 2014 chez Mozilla

Brandon Jones

Google Chrome team

Vladimir Vukićević

Mozilla WebVR team

v1.0 annoncée le 1er mars 2016

v1.1 éditée le 5 avril 2017

v2.0 en discussion

Elle permet :

Accès aux informations sur le positionnement du casque

Métrique pour le rendu (champ de vue, etc)

Rendu 3D stéréoscopique


navigator.getVRDisplays().then(function(displays) {
    let vrDisplay = displays[0], // instance de VRDisplay
        vrDisplayLeftEyeInfo = vrDisplay.getEyeParameters('left'), // info sur l'oeil gauche
        vrDisplayRightEyeInfo = vrDisplay.getEyeParameters('right');

    let webglcanvas = document.getElementById('webglcanvas');

    vrDisplay.requestPresent({ source:webglcanvas }).then(function() { // lien entre le rendu WebGL
        vrDisplay.requestAnimationFrame(onAnimationFrame);             // et le casque
    });
});

// Fonction appelée en synchro avec l'affichage de l'écran
function onAnimationFrame(timestamp) {
    vrDisplay.requestAnimationFrame(onAnimationFrame);

    update(timestamp);
    
    vrDisplay.getFrameData(frameData); // récupération des informations du casque

    gl.viewport(0, 0, layerSource.width * 0.5, layerSource.height);
    render(frameData.leftProjectionMatrix, frameData.leftViewMatrix);

    vrDisplay.submitFrame();
}

function update(timestamp) { }

function render(projectionMat, viewMat) { }

Compatibilité

https://webvr.rocks

Compatibilité / Polyfill

Boilerplate

https://github.com/borismus/webvr-boilerplate

Les frameworks

La majorité utilisent three.js sous le capot

Orienté photo/vidéo 360°

Orienté expériences 3D

A-Frame

Framework déclaratif pour construire des expériences de réalité virtuelle sur le web

Créé par Mozilla VR Team, et annoncé en décembre 2015

https://github.com/aframevr/aframe

Créer une expérience 3D WebVR reste compliqué

Importer le polyfill WebVR

Camera

Initialiser la scène

UI pour entrer en mode VR

Instancier le renderer

Déclarer le canvas

Gérer le redimensionnement

Géométrie + matériau

Expérience WebVR

A-Frame

three.js

WebVR api

Ecran

<a-scene>
    ...
</a-scene>

Instancie le rendu canvas WebGL, la boucle de rendu, les lumières, les contrôles, le setup WebVR

Hello world

<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>