WebVRA short introduction

@oscarmarinmiro

What’s WebVR?

“WebVR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser.”

https://webvr.info/

Why WebVR?• From an “Internet of Information” to an “Internet of experiences” (Kevin Kelly)

• Web interoperability

• Device agnostic

• Tailored for Web Developers

What’s really WebVR?

WebVR enabled-browser +

AFrame / three.js

AFrame stack

WebVR API

three.js

WebVR Boilerplate

AFrame

DOM

JS

YOU

Beyond that…

var ring = document.createElement("a-ring"); ring.setAttribute(“radius-inner", 1.1); ring.setAttribute(“radius-outer", 1.2); ring.setAttribute("material", “color: #FFF”); ring.setAttribute("visible", true);

var scene = document.querySelector(“a-scene”); scene.appendChild(ring);

ring.addEventListener(“click”, function(event){ ….

});

Some other features

• Ray caster + Gaze-based click/fuse • Vive-controls • Loads .obj, blend, collada models • Can be embedded • Sound component • Animation • Link traversal

three.js or AFrame?

• Low-level vs High-level • More structure • Performance (DOM)

More goodies

More goodies

ReferencesAFrame examples

AFrame docs Awesome AFrame

Github Entity-Component System

MagicaVoxel WebVR spec

MozillaVR Boris Smus Github