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

WebVR
Vladimir 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!

WhyWebVR?
In practical terms, VR will succeed or fail based on
content and how easy it is to access that content.
There is no easier or more ubiquitous content
delivery 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

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 Immersion
Provide 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 devices
Provide consistent API

Device-agnostic VR
Even worse situation in sensors!

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:
hardwareUnitId
Unique identifier per hardware device
deviceId
Unique identifier for specific sensor/device on hardware
deviceName
User-readable name identifying the sensor

VR Devices
For example, with an Oculus Rift connected, getVRDevices() will return a list with...
(1)HMDVRDevice
a)hardwareDeviceId: oculus-1
b)deviceId: 12345
c)deviceName: “Oculus Rift HMD”
(1)SensorVRDevice
a)hardwareDeviceId: oculus-1
b)deviceId: abcde
c)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 this
device can render

Configuring HMDs
hmd.setFieldOfView(
{ upDegrees: 65,
downDegrees: 65,
leftDegrees: 65,
rightDegrees: 45 },
…
);
Human eye field of view (Wikipedia)
60°upwards
75°downwards
95°away from nose
60°towards nose
Viewing parameters are needed for proper
distortion and WebGL rendering
Vertical FOV
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 Canvas
Left 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 as
linear 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 sync
For 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 onlyway to enter VR Mode

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 account
position/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 exist
that use the WebVR API
Working on adding support to UE4, Unity, etc.
Lots of interest among Mozilla Games project

Why HTML/CSS with VR?
Modern CSS has lots of features
3D Transforms
Transitions
Animations
Gradients
Complex Backgrounds
HTML/CSS is well-suited for a lot of content
e.g. placing informative content in a VR space
HTML/CSS + VR can move us to Responsive Design
Web sites can adapt to “Browsing in VR”

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

CSS 3D Transforms in VR
No perspectiveproperty used:
VR creates its own space
Defined by the VR HMD FOV
CSS Origin is Top Left
VR 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 an
element that acts as the “camera”
Use position/orientation from state to
generate 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/orientation
from 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 Status
Experimental Firefox and Chrome Builds
Implement the API described here
WebGLRendering Works Well In Both
CSS Rendering Only In Firefox
Everything Subject To Change!
(Still R&D!)

WebVR Status
Core API with no CSS support will
likely be first to ship
Will enable WebGL VR rendering
Will enable Emscripten/asm.js-based porting
of VR content and demos

WebVR Status
Oculus Rift support only
Desktop 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

Hiro
Mozilla exploration of VR browsing
VR-based Interaction
Browsing existing sites in VR
Browsing VR sites smoothly
from a HUD/controller
Input issues
(e.g. URLs? Usernames/passwords?)
First demo soon, rapid updates

For more information...
web-vr-discuss mailing list
https://mail.mozilla.org/listinfo/web-vr-discuss
(search for web-vr-discuss!)
@vvuk
I’ll generally announce new builds,
etc. to Twitter.
@joshcarpenter
For work on Hiroand VR
design and UX

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

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

More Related Content

What's hot

Viewers also liked

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

More from FITC

Recently uploaded

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