Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca Virtual Reality development has become very active recently, with the availability of low cost and high quality headsets, motion tracking equipment, and sensors. However, most VR app development is happening natively — users are stuck in the days of needing to download the right binary, trust a third-party that their code isn’t malicious and fix compatibility issues. Developers need to target multiple platforms, thus often ignoring those with fewer users. Instead, wouldn’t it be great if high quality VR content could be delivered through the Web? In this session, Vladimir Vukicevic will address additions to HTML, CSS, and WebGL that Mozilla is experimenting with which allow Web developers to create immersive VR experiences. Everything from pure VR WebGL content to responsive HTML and CSS that can shift from mobile to tablet to desktop to VR will be covered. Additionally, Vladimir will discuss delivering VR video via the Web, as well as how to mix WebGL and CSS content in a true 3D space. OBJECTIVE To show how VR and the Web work together, and the techniques for bringing VR content to the Web. TARGET AUDIENCE Web developers and designers ASSUMED AUDIENCE KNOWLEDGE Some knowledge of at least one of WebGL, CSS 3D Transforms, or modern 3D graphics would be helpful. FIVE THINGS AUDIENCE MEMBERS WILL LEARN An overview of current VR devices, their capabilities and how they can interface with the Web. How to render WebGL content to a VR device. How to create documents using HTML and CSS that can be projected in VR. How to create responsive documents that can shift in and out of VR based on user choice. How WebGL and CSS content can be mixed, providing interactive 3D graphics but with the full power of HTML for non-3D elements.

1. WebVR
Vladimir Vukicevic
Mozilla

2. Why WebVR?
Web is a highly connected environment
The “Metaverse” is a VR-rich concept
.. we’re already very close! It’s just 2D!

3. 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.

4. VR Basics
Quick Overview of VR

5. Immersion
Sensory Immersion
(Focus on Visual Immersion)
Input Immersion

6. Visual Immersion

7. Per-Eye Rendering

8. Device-Specific Distortion

9. Input Immersion

10. WebVR Overview
What is WebVR?
What does WebVR enable?

11. 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

12. 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.)

13. Device-agnostic VR
Challenge: Unify varied devices
Provide consistent API

14. Device-agnostic VR
Even worse situation in sensors!

15. WebVR API
Nuts & Bolts

16. 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)
{
…
}

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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
}

25. 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

26. WebVR and WebGL

27. 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

28. 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

29. 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

30. WebVR and CSS

31. 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”

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

33. 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)

34. 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);

35. 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

36. 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);
}
}

37. WebVR Current Status

38. 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!)

39. 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

40. WebVR Status
Oculus Rift support only
Desktop only
Google Carboard coming soon
Android coming soon
Additional input devices coming soon

41. WebVR Status
Web toolmakers adding support
(especially in gaming space)
Working on adding support to Emscripten
CSS 3D designers also experimenting

42. Browsing in VR

43. 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

44. 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