Web VRSaurabh Badhwar

mozilla Mozpacers

What is VR?

Visual Immersion + Input Immersion

Visual Immersion

+

Input Immersion

So what is Web VR?

Render Web Content in VR

Access to Devices Being Used for VR

Device-agnostic VR in Web Browser

Focus on Head Mounted DisplaysAnd Sensor Devices

Web Content in VR

Focus on Visual Immersion

Support both Web GL and HTML/CSS Content

And the goals…

Allow High End Experience with VR in the Browser- Asm.js

- Emscripten- Game Engines

Allow Web Experience with VR- CSS 3D

- Responsive Sites- VR Browsing

Who supports Web VR

Web VR API

Basic Interface

Call getVRDevices() which returns a promise…

navigator.getVRDevices().then(vrDeviceCallBack);

The vrDeviceCallback() receives the list of all available VR Devices

function vrDeviceCallback(vrDevices) {//Some stuff here

}

VR Devices

For every VR Device

hardwareUnitIdUnique identifier per Hardware Device

deviceIdUnique ID for specific sensor/device on hardware

deviceNameUser-readable name identifying the sensor

Setting FOV

Configure the FOV that rendering device will use

setFieldOfView(left, right, znear, zfar)

Get the recommended and maximum FOV the device can render

getRecommendedEyeFieldOfView(whichEye)getMaximumEyeFieldOfView(whichEye)getCurrentEyeFieldOfView(whichEye)

Too much work to do?

Introducing A-Frame https://aframe.io

What is A-Frame?

A web framework for building VR Experiences

And It works on…

Let’s get started with A-Frame

Include the latest build in your Web Page

<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>

Setting up the Scene

<a-scene> </a-scene>

Creating a Box

<a-box color=“617354” height=“10” width=“4” depth=“2” position=“-10 2 -5” rotation=“0 0 45” scale=“2 0.5 3”> </a-box>

Giving Box a Texture

<a-box color=“617354” height=“10” width=“4” depth=“2” position=“-10 2 -5” rotation=“0 0 45” scale=“2 0.5 3” src=“texture.png”> </a-box>

Leveraging Asset Management

<a-assets> </a-assets>

Adding Image Assets

<a-assets><img id=“img1” src=“logo.png”>

</a-assets>

Using Assets

<a-box color=“617354” height=“10” width=“4” depth=“2” position=“-10 2 -5” rotation=“0 0 45” scale=“2 0.5 3” src=“#img1”> </a-box>

Adding Animations

<a-animation attribute="rotation" repeat="indefinite" to="0 360 0">

</a-animation>

Adding Background

<a-sky color=“#73f7dd”></a-sky>

Adding Background Image

<a-sky src=“room.jpg”></a-sky>

Let’s add some music

<a-entity sound=“src: #bg-music; autoplay: true; volume: 10; loop: true”></a-entity>

Where to head next

A-Frame Website: https://aframe.io

MozVR: https://mozvr.com

Web VR Slack channel: https://webvr-slack.herokuapp.com

Thank you!

Reach out to us at:

E-Mail: contact@mozpacers.orgFacebook: fb.me/mozpacers

Twitter: @mozpacers