Le groupe SFHTML5 s'est récemment réuni pour discuter de technologies HTML5 dédiées à la création d'expériences de réalité virtuelle - WebGL, WebVR, Three.js, GLAM-, et de la situation présente pour l'implémentation de leur support dans Firefox et Chrome.
Tony Parisi, co-créateur des standards VRML et X3D ISO, a présenté une introduction à WebVR, un mélange de Réalité Virtuelle et de technologies web. Actuellement, les logiciels de RV sont en grande partie ludiques avec beaucoup de travail dans la création et la manipulation des graphiques. La plupart des applications de RV sont développées avec le moteur Unity qui est maîtrisé par peu. L'idée de Parisi est de niveler le terrain et de permettre à tous les développeurs de créer des applications de RV en utilisant des technologies web basiques, soit JavaScript+WebGL. Three.js, une librairie JavaScript pour le rendu graphique en 2D/3D en WebGL facilite le rendu de scènes de RV, le code étant 3 à 10 fois plus court que le code WebGL correspondant. Parisi travaille également sur une autre solution appelée GLAM qui est un langage déclaratif pour la création de contenu web 3D. Cela devrait rendre le rendu RV encore plus simple. Le rendu d'un cube 3D en rotation avec GLAM nécessite le script glam.js et un tag comme celui-ci :
#photocube {
image:url(../images/flowers.jpg);
rx:30deg;
}
Parisi a mentionné que Chrome (version expérimentale, branche de code source Blink) et Firefox (nocturne) ont démarré l'implémentation d'une API WebVR de suivi de la tête qui peut être utilisée pour le suivi des mouvements des appareils RV (pour le moment l'Oculus Rift, d'autres appareils pourront être supportés plus tard) et qui supporte le rendu stéréo 3D de contenu WebGL/CSS3. L'utilisation de Google Cardboards, d'un smartphone et d'une app de RV comme Cardboard est une alternative plus simple qui fonctionne déjà. Cette app utilise la caméra du smartphone et les capteurs de mouvement pour générer une image mobile stéréoscopique dans le navigateur du téléphone avec WebGL.
Durant sa session, Josh Carpenter, concepteur UI/UX de WebVR et Lead Concepteur UX de Firefox OS à Mozilla, a fait une démo de l'utilisation de l'Oculus Rift avec Firefox et a souligné quelques unes des caractéristiques d'une expérience de réalité virtuelle ouverte "webby" qu'il souhaiterait voir se produire :
- La capacité de naviguer de manière transparente et sans risques d'emplacement en emplacement via des liens. Ceci comprend les contrôles pour la navigation entre liens, le zoom, le scrolling, le retour arrière, l'entrée d'information dans un champ, etc. Pour résumer, la capacité d'avoir une expérience comparable au navigateur avec le casque de RV sur la tête.
- La facilité de développement. Dans cette optique, de nouveaux outils doivent être créés. La chaîne d'outils JavaScript-Three.js-WebVR-WebGL-navigateur en est à ses débuts.
- Une expérience de RV qui fonctionne sur n'importe quel appareil.
- La capacité de convertir automatiquement les sites web du monde en RV. Cela implique que l'on doit être capable de consulter un site web de l'ancienne génération et pourtant bénéficier d'une expérience RV.
- La commodisation de la RV : plus d'appareils, intégrabilité et meilleure performance.
Carpenter a également fait la démonstration du début de travaux pour la conversion de sites web classiques en RV sans leur demander de mettre à jour leur contenu. Il a également créé un certain nombre de transitions à utiliser pour aller d'un site web de RV à un autre. Carpenter voit beaucoup de potentiel dans la conception d'un navigateur de RV, grâce à la disponibilité d'un canvas à 360° avec des animations spatiales.
Brandon Jones, un développeur WebGL et WebVR à Google, a fourni des échantillons de code pour une application de RV, en expliquant ce qu'il en coûte de rendre une scène de RV durant la session Fonctionnement d'un Navigateur Web RV. Bien que le rendu de RV apparaisse intimidant de prime abord, l'échantillon suivant montre que l'utilisation de Three.js le rend beaucoup plus simple :
<script src="js/effects/VREffect.js"></script>
<script src="js/controls/VRControls.js"></script> // Normal scene setup, then...
var vrControls = new THREE.VRControls(camera);
var vrEffect = new THREE.VREffect(renderer);
function onEnterVRFullscreen() {
vrEffect.setFullScreen(true);
}
function onWindowResize() {
vrEffect.setSize(window.innerWidth, window.innerHeight);
}
function onRequestAnimationFrame() {
vrControls.update();
vrEffect.render(scene, camera);
}
Jones a cependant admis que Three.js ne traite pas la RV comme un citoyen de première classe, qu'il n'est pas optimisé pour le rendu de RV pour l'instant et qu'il peut nécessiter quelques optimisations mais qu'il fait cependant le travail. Il a fourni quelques conseils aux développeurs d'applications de RV :
- Favoriser les shaders de Vertex légers.
- Réduire la résolution du canvas au lieu de la fréquence d'images en présence de problèmes de performance.
- Eviter complètement le double rendu de choses qui ne dépendent pas de la vue (ombre ou maps d'environnement).
- Le rendu de la scène complète pour chaque oeil est lourd pour le changement d'état. En fonction de la scène, il peut être plus efficace de rendre pour l'oeil gauche, changer de vue puis de rendre pour l'oeil droit pour chaque objet.
Jones a également fait la démonstration d'une scène Quake 3 RV dans Chrome.
Ressources : Vidéos du Meetup SFHTML5, Commencer avec l'API WebRV, Mozilla RV - un site web entièrement compatible RV, Google Cardboard, Expériences Chrome de RV, GLAM, Liste de diffusion Mozilla WebVR.