La petite WebVR api
« Développeur, s'il te plaît… intègre moi dans ton projet…»
Vincent Ogloblinsky
Architecte logiciel
" Technologies frontend "
@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
Plateforme de contenu
Plateforme de contenu
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
Les frameworks
La majorité utilisent three.js sous le capot
Orienté photo/vidéo 360°
Orienté expériences 3D
Orienté expériences 3D
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
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>
Entity-component-system
Livrés avec A-Frame
Communautaire
Démo
proxy Node.js
fix CORS
Vidéo HTML5 dans un monde 3D
Même application dans un casque VR
Next : WebVR 2.0
- API simplifiées
- VRDisplay séparé en VRDevice et VRSession
- résolution d'affichage spécifique
- fix de bugs
- ...
Références
Merci
pour votre écoute, une question ?
bit.ly/webvr-api
La petite webvr api - « Développeur, s'il te plaît... intègre moi dans ton projet...»
By Vincent Ogloblinsky
La petite webvr api - « Développeur, s'il te plaît... intègre moi dans ton projet...»
- 3,839