WebVR is an experimental JavaScript API that allows access to virtual reality devices like Oculus Rift and HTC Vive in the browser. It aims to bring VR experiences to the web in an interoperable and device agnostic way. WebVR works by using a WebVR enabled browser along with libraries like AFrame or three.js to build and display VR scenes and experiences. AFrame uses entities and components to build scenes in a declarative way and supports features like 3D models, sounds, animations and controls.

1. WebVR
A short introduction
@oscarmarinmiro

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

3. Why WebVR?
• From an “Internet of Information” to an “Internet
of experiences” (Kevin Kelly)
• Web interoperability
• Device agnostic
• Tailored for Web Developers

4. What’s really WebVR?
WebVR enabled-browser
+
AFrame / three.js

6. AFrame stack
WebVR
API
three.js
WebVR
Boilerplate
AFrame
DOM
JS
YOU

11. 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){
….
});

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

13. three.js or AFrame?
• Low-level vs High-level
• More structure
• Performance (DOM)

14. More goodies

15. More goodies

16. References
AFrame examples
AFrame docs
Awesome AFrame
Github
Entity-Component System
MagicaVoxel
WebVR spec
MozillaVR
Boris Smus Github