Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!

WebVRVladimir Vukicevic

Mozilla

Why WebVR?

Web is a highly connected environment

The “Metaverse” is a VR-rich concept

.. we’re already very close! It’s just 2D!

Why WebVR?

In practical terms, VR will succeed or fail based oncontent and how easy it is to access that content.

There is no easier or more ubiquitous contentdelivery mechanism than the Web.

It had better be able to deliver VR.

VR Basics

Quick Overview of VR

Immersion

Sensory Immersion(Focus on Visual Immersion)

Input Immersion

Visual Immersion

Per-Eye Rendering

Device-Specific Distortion

Input Immersion

WebVR Overview

What is WebVR?What does WebVR enable?

WebVR

Render Web Content in VR

Access to devices being used for Virtual Reality

Device-agnostic VR in browser

Focus on Head-Mounted Displays (HMDs)and Sensor devices

Web Content in VR

Focus on Visual ImmersionProvide Input, But Up to App to Handle

Support both WebGL and HTML/CSS Content

Goals:Allow High-End Experiences with VR in the browser

(asm.js, Emscripten, game engines, etc.)

Allow Web Experiences with VR(responsive sites, CSS 3D, VR browsing, etc.)

Device-agnostic VR

Challenge: Unify varied devicesProvide consistent API

Device-agnostic VR

Even worse situation in sensors!

WebVR API

Nuts & Bolts

Basic Interface

Call getVRDevices(), which returns a Promise:

navigator.getVRDevices().then(vrDeviceCallback)

The callback receives a list of all available VR devices:

function vrDeviceCallback(vrDevices) {

…}

VR Devices

For every device:

hardwareUnitIdUnique identifier per hardware device

deviceIdUnique identifier for specific sensor/device on hardware

deviceNameUser-readable name identifying the sensor

VR Devices

For example, with an Oculus Rift connected, getVRDevices() will return a list with...

(1)HMDVRDevicea)hardwareDeviceId: oculus-1b)deviceId: 12345c)deviceName: “Oculus Rift HMD”

(1)SensorVRDevicea)hardwareDeviceId: oculus-1b)deviceId: abcdec)deviceName: “Oculus Rift Sensor”

Same hardware Device ID

VR Devices: HMDs

HMDs have configuration and data for rendering

setFieldOfView(left, right, zNear, zFar)Configure the field of view that rendering will use

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

Get the recommended and maximum FOV that thisdevice can render

Configuring HMDs

hmd.setFieldOfView({ upDegrees: 65,downDegrees: 65,leftDegrees: 65,rightDegrees: 45 },

…);

Human eye field of view (Wikipedia)60° upwards75° downwards95° away from nose60° towards nose

Viewing parameters are needed for properdistortion and WebGL rendering

Ve

rtica

l FO

V

Horizontal FOV

Left Degrees

Right Degrees

Up Degrees

Down Degrees

Asymmetrical Projection

VR Devices: HMDs

getEyeTranslation(whichEye)Get the eye translation offset for the given eye

getRecommendedEyeRenderRect(whichEye)Get the render rectangle where content for the given

eye should go

Configuring HMDs

hmd.getRecommendedEyeRenderRect(“left”)

Mainly useful for WebGL, defines where and how big the eye’s scene should be rendered.

WebGL CanvasLeft Eye Render Rect

VR Devices: Sensors

getState(timeOffset = 0.0)Get the state of this sensor, at the given optional time offset.

Returns a dictionary containing position, orientation, as well aslinear and angular velocity and acceleration.

zeroSensor()Reset the sensor, making the current state the zero position

Getting State

hmdSensor.getState()

Obtain the current state of the sensor.

Call per frame.

Future: a particular per-frame state may be provided

Helps the browser know exactly what state was used to render

For proper WebGL + CSS syncFor Oculus Timewarp rendering

{orientation: {w:0, x:0, y:0, z:0},angularAcceleration: {x:0, y:0, z:0},angularVelocity: {x:0, y:0, z:0},

position: {x:0, y:0, z:0},linearAcceleration: {x:0, y:0, z:0},linearVelocity: {x:0, y:0, z:0},

timeStamp: 0}

Entering VR Mode

requestFullScreen call is extended to take an options dictionary

One option specifies the VR Display to go fullscreen on;also activates VR Rendering

var container = document.getElementById(“container”);container.mozRequestFullScreen({ vrDisplay: hmd });

Fullscreen is the only way to enter VR Mode

WebVR and WebGL

WebVR with WebGL

Most similar to traditional 3D/VR development

App code does all rendering

Final presentation steps done by browser

Quick integration with existing WebGL content and engines

Relevant WebVR API

HMD: setFieldOfView()Browser needs to know exact FOV settings

that content is rendering with

HMD: getRecommendedEyeRenderRect()Browser needs to know where the left/right eye

content is present

Sensors: getState()Content rendering should take into accountposition/orientation of HMD, and any other

sensors that are supported

Engine Integration

Natural extension to WebGL Content

e.g.: multiple WebVR Renderers for three.js existthat use the WebVR API

Working on adding support to UE4, Unity, etc.

Lots of interest among Mozilla Games project

WebVR and CSS

Why HTML/CSS with VR?

Modern CSS has lots of features3D Transforms

TransitionsAnimationsGradients

Complex Backgrounds

HTML/CSS is well-suited for a lot of contente.g. placing informative content in a VR space

HTML/CSS + VR can move us to Responsive DesignWeb sites can adapt to “Browsing in VR”

CSS 3D Transforms

transform-style: preserve-3d;transform: translateZ(-200px);

CSS 3D Transforms in VR

No perspective property used:VR creates its own space

Defined by the VR HMD FOV

CSS Origin is Top LeftVR Origin is Center

… this may be controversial(... and may not be even needed)

Handling Position/Orientation in CSS

Present

Per-frame, set a transform on anelement that acts as the “camera”

Use position/orientation from state togenerate a transformation matrix

var state = hmdSensor.getState();camera.style.transform = stateToCSSTransform(state);

Handling Position/Orientation in CSS

Future

Use a CSS property

#camera {transform: vr-orientation() vr-position();

}

Automatic application of position/orientationfrom fullscreen HMD device

Allows for code-free VR

Responsive Design

@media screen and (min-width: 400px) and (orientation: portrait){ /* phone UI rules */ }

@media screen and (min-width: 800px){ /* desktop and large tablet rules */ }

@media vr{

#camera {transform: vr-orientation() vr-position();

}#contentArea {

width: 100cm;height: 80cm;transform: translateZ(50cm);

}}

WebVR Current Status

WebVR Status

Experimental Firefox and Chrome BuildsImplement the API described here

WebGL Rendering Works Well In Both

CSS Rendering Only In Firefox

Everything Subject To Change!(Still R&D!)

WebVR Status

Core API with no CSS support willlikely be first to ship

Will enable WebGL VR rendering

Will enable Emscripten/asm.js-based portingof VR content and demos

WebVR Status

Oculus Rift support onlyDesktop only

Google Carboard coming soon

Android coming soon

Additional input devices coming soon

WebVR Status

Web toolmakers adding support(especially in gaming space)

Working on adding support to Emscripten

CSS 3D designers also experimenting

Browsing in VR

Hiro

Mozilla exploration of VR browsing

VR-based Interaction

Browsing existing sites in VR

Browsing VR sites smoothlyfrom a HUD/controller

Input issues(e.g. URLs? Usernames/passwords?)

First demo soon, rapid updates

For more information...

web-vr-discuss mailing listhttps://mail.mozilla.org/listinfo/web-vr-discuss

(search for web-vr-discuss!)

@vvukI’ll generally announce new builds,

etc. to Twitter.

@joshcarpenterFor work on Hiro and VR

design and UX