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