Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


Published on

Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at

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.

To show how VR and the Web work together, and the techniques for bringing VR content to the Web.

Web developers and designers

Some knowledge of at least one of WebGL, CSS 3D Transforms, or modern 3D graphics would be helpful.

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.

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. WebVR Vladimir Vukicevic Mozilla
  2. 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. 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. 4. VR Basics Quick Overview of VR
  5. 5. Immersion Sensory Immersion (Focus on Visual Immersion) Input Immersion
  6. 6. Visual Immersion
  7. 7. Per-Eye Rendering
  8. 8. Device-Specific Distortion
  9. 9. Input Immersion
  10. 10. WebVR Overview What is WebVR? What does WebVR enable?
  11. 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. 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. 13. Device-agnostic VR Challenge: Unify varied devices Provide consistent API
  14. 14. Device-agnostic VR Even worse situation in sensors!
  15. 15. WebVR API Nuts & Bolts
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. WebVR and WebGL
  27. 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. 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. 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. 30. WebVR and CSS
  31. 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. 32. CSS 3D Transforms transform-style: preserve-3d; transform: translateZ(-200px);
  33. 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. 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(); = stateToCSSTransform(state);
  35. 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. 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. 37. WebVR Current Status
  38. 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. 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. 40. WebVR Status Oculus Rift support only Desktop only Google Carboard coming soon Android coming soon Additional input devices coming soon
  41. 41. WebVR Status Web toolmakers adding support (especially in gaming space) Working on adding support to Emscripten CSS 3D designers also experimenting
  42. 42. Browsing in VR
  43. 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. 44. For more information... web-vr-discuss mailing list (search for web-vr-discuss!) @vvuk I’ll generally announce new builds, etc. to Twitter. @joshcarpenter For work on Hiroand VR design and UX