Uniting the real world with the virtual

Today’s VR headsets are powerful, untethered, lighter, and more immersive, and yet it’s still early days for the technology. Choosing to target VR users can be a big bet, but what if the same immersive content could run on your phone that does in VR? In this talk, Jacob explores what Oculus is learning about the web in VR, how to reach more users by uniting 2D and VR, and advances coming down the pipe to WebXR that will take those experiences to the next level.

Transcript

1. Uniting the real world
 with the virtual Jacob Rossi Product Manager, Oculus
2. @jacobrossi BROWSER GUY • Hired by Microsoft because I hated IE • Paid by Microsoft to take IE to pasture • Standards conciliator • Input geek • Turned VR geek @ Oculus
3. The web is at the forefront of 
 nearly every new device type
7. Oculus Browser WHAT IS IT? • Chromium • Optimized for Oculus Hardware • Advancing WebXR + WebGL • Enhanced VR Media Experience
8. Web is kind of a Big Deal in VR
9. OCULUS BROWSER ACTIVE USERS OF TOTAL MONTHLY ACTIVE USERS ON OCULUS GO 2 3 +
12. Developing for VR OR
13. React 360
15. React 360 is also for 
 2D devices NATIONAL GALLERY
17. Capturing 3D Photos on Dual Lens Phones near-field focus far-field focus
18. User-Generated Content 3D PHOTOS
20. How's it work? + RGB Image Depth Map 3D Photo =
21. Or Donuts?
22. Memes
23. Ads / Synthetic
24. Opportunity
25. Bridging 2D to VR Devices Save to VR
26. Discovering content in VR
27. DEEP LINKING TO VR Jumping right in
28. 3DOF THREE DEGREES OF FREEDOM PITCH ROLL YAW
29. 6DOF SIX DEGREES OF FREEDOM UP DOWN LEFT RIGHT BACK FORWARD PITCH ROLL YAW
32. MOZILLA HUBS Room Scale + Immersive Web
33. Designing for VR • Usually there's fast wifi • Browsers are fairly modern • Your 2D content will work just great The Good News
34. Designing for VR • Design for mobile grade performance • Text input is sometimes cumbersome • Low frame rates can cause user discomfort • Avoid white backgrounds Things to consider
35. Designing for VR • Design large, easy-to-hit targets • High contrast is helpful (but avoid white backgrounds) • Design it for your parents! Accessibility
36. Play space 2M X 2M X 2M
37. Sound AMBISONIC WEB AUDIO https://github.com/polarch/JSAmbisonics 
 https://github.com/googlechrome/omnitone
38. Dev Tools adb reverse tcp:9000 tcp:9000
39. Future of WebXR W3C Immersive Web 
 Working Group
40. Basic Game Loop CPU GPU Compositor (Distortion) Head Pose Head Pose Head Pose Head Pose
41. Basic Game Loop with Judder CPU GPU Compositor (Distortion) Head Pose Head Pose Head Pose Head Pose Missed/Redrawn Frame
42. Game Loop with Asynchronous Timewarp CPU GPU Head Pose Head Pose Head Pose Head Pose Head Orientation Head Orientation Head Orientation Head Orientation Compositor 
 (TimeWarp/Distortion) Missed/Redrawn Frame 
 updated with new head pose
43. VR graphics layers with a geometry + texture GPU samples the layer independently as it does async timewarp Result: crisp edges, reduced judder, hi-fi and low-strain
44. Before & After: Timewarp Layers without Timewarp with Timewarp
46. Timewarp HTML Layers? <!> NOT A REAL THING (YET)
47. WebGL Multiview
48. Multiview performance without multiview with multiview 25-50%
 reduction CPU Utilization
49. Fixed Foveated Rendering
50. Fixed Foveated Rendering
51. Now and Later - WebXR • Leveraging "2D" for scale and building a bridge to AR/VR • Freeing your experience with 6DOF, but not forgetting 3DOF • Optimize for clarity/performance with Timewarp & Multi-View & FFV Magic glasses are coming, and the web will be at the forefront of it.
52. Thanks! @jacobrossi