WebVR and A-Frame

In 2016 virtual reality has hit the mainstream.
* available in a number of formats and price points * major console manufactures are planning for VR

Inexpensive VR Experiences

Mid-range VR Experiences

High-End VR Experiences

VR experiences are available at all levels.

WebVR aims to bring VR content through the ubiquitous browser platform.

Generation-VR?

The State of VR

  • Applications
  • Behind Storefronts
  • Installation required

WebVR Opens VR to the Web

  • Open VR experiences
  • Enhance information with VR
  • Instant access to content
  • Device agnostic platform

WebVR

What is WebVR?

A W3C specification providing device-agnostic access to headsets and sensors in the browser.

WebVR Features

  • List attached devices
  • Configuring VR displays (HMD)
  • Rendering support for WebGL & three.js
  • No Controller Support
  • Not a Rendering Engine

Import WebVR polyfill

Set up camera

Set up lights

Initialize scene

Declare and pass canvas

Listen to window resize

Install VREffect

Instantiate renderer

Create render loop

Preload assets

Figure out responsiveness

Deal with metatags and mobile

A-Frame

A declarative framework for building virtual reality experiences on the web

Describe a scene in HTML

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

and have it rendered and VR Ready

How does it work?

A-Frame is an Entity - Component - System framework for THREE.js with WebVR support

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

Entities are rendered to an underlying canvas, but they can be treated as standard HTML elements.

  • document.createElement()
  • document.querySelector()
  • getAttribute()
  • setAttribute()
  • appendChild()

Demo Time!

A-Frame TypeScript

Learning a new framework is HARD.

Behind the scenes A-Frame is blending some serious tech

TypeScript's IDE integration and compile-time checks
help you use a new API with confidence

So we created some ;)

WebVR Tools

MagicaVoxel

A-Frame Inspector

Community

60 contributors, 3000 Stargazers
1400 members on Slack
100s of featured projects

More Resources