CodeFest 2019. Luis Diego Gonzalez Zuniga (Samsung) — Immersed in the Web

On this presentation we will explore the upcoming WebXR specification in order to understand the changes that it will bring to web development. We will try to understand its purpose and code an example to see how it behaves in different platforms, taking progressive enhancement to a whole new dimension, literally!

Transcript

1. Diego González, PhD @diekus Developer Advocate Samsung Internet
2. Diego González, PhD Senior Developer Advocate, Samsung Google Developer Expert, Web Technologies @diekus
3. • Chromium Based (9.2 beta M67) • Evergreen browser • Android L+ galaxy.store/internet
4. 53.17% 25.34% 7.36% 5.53% Source: http://gs.statcounter.com/browser-market-share/mobile/russian-federation/#monthly-201812-201902
6. XR 101 Hardware Content Creation Distribution High-precision Low-latency Security/privacy
7. Hardware opaque transparent video passthrough Head Mounted Displays (HMDs) / XR devices *HoloLens illustration by Willy Roda from the Noun Project
8. Hardware opaque transparent video passthrough Head Mounted Displays (HMD) Samsung Odyssey
9. Hardware opaque transparent video passthrough Head Mounted Displays (HMD) Microsoft Hololens
10. Hardware opaque transparent video passthrough Head Mounted Displays (HMD) Samsung Galaxy S10+
11. Hardware 6 DoF 3 DoF Magic Window /ARCore-Kit Position tracking
12. Hardware 6 DoF 3 DoF Magic Window /ARCore-Kit Position tracking Oculus Rift Google Cardboard
13. Hardware 6 DoF 3 DoF Magic Window /ARCore-Kit Position tracking Oculus Rift Samsung Gear VR
14. Hardware 6 DoF 3 DoF Magic Window /ARCore-Kit Position tracking Oculus Rift
15. Hardware 6 DoF 3 DoF Magic Window /ARCore-Kit Position tracking Samsung Galaxy S10e
16. Content Creation SDKs per device Frameworks based on an open standard
17. rift / rift S go/gear vr quest PC SDK “easily port to Oculus Quest” when docs launch mobile SDK Android NDK C, C++ C#, Boo C++ C++ C#, Boo C++ *And this is for 1 family of devices
18. Distribution pre-approved closed environment wait several minutes download 100s of MBs experience you discard after 1 use open accessible ecosystem multi-device, multi-platform, progressive enhanced experiences
19. open accessible ecosystem fast frictionless cross- device progressive accessible immediate social democratic
21. open accessible ecosystem fast frictionless cross- device progressive accessible immediate social democratic WebXR This specification describes support for accessing virtual reality (VR) and augmented reality (AR) devices, including sensors and head-mounted displays, on the Web.
22. WebXR navigator.xr
23. WebXR navigator.xr • Entry point to the API • Query XR features • Initiates communication with XR hardware • Has a list of XR devices • Including an active one
24. 1. Check if the type of session we want is supported enum XRSessionMode { "inline", "immersive-vr", "immersive-ar" }; 2. Advertise this to the user 3. Wait for user activation event 4. Request an XRSession 5. If it succeeds, run Frame loop WebXR How to
25. • Poll device pose • Query info about the environment • Present imagery to user WebXR - XRSession How to
26. Support: Browsers WebVR 1.1 WebXR*
27. Browsers – New kind
28. Support: Hardware VR 0DoF VR 3DoF VR 6DoF AR 6DoF *
29. Who’s using it? Dance Tonite LCD SoundSystem / Google A-Painter Mozilla Renault Kadjar Little Workshop Dr. Who Time Travel BBC / goodboy
30. Immersed in the Web Gamepad API Web Bluetooth, WebRTC Progressive Web Apps Web Audio APIs WebAuthn Web Payments and many more! WebGL
31. Immersed in the Web JavaScript 69.8% Most commonly used programming languages* “close alignment in the technology choices of professional developer and the developer population overall”* HTML 68.5% CSS 65.1% SQL 57.0% Java 45.3%
32. Immersed in the Web BabylonJS A-Frame Simbol three.js
33. 3D assets into the mix Paint3D blender Maya 3DS Max Sketchfab Google Poly Remix3D
35. Hands on + Web Component + Progressive Web App
36. + Web Component
37. + • Component: • Loads engine scripts • Sets up the 3D environment • Loads the 3D model • Listening for changes • BabylonJS • Everything happens in createScene • You can easily add VR to the scene Bit.ly/3dmodels-website
38. + Progressive Web App
39. + • A-Frame: • Declarative way of doing VR • PWA: • Offline VR experience • Remove browser chrome • No barriers to the experience
40. Limitations • Performance is still a bit lower than native XR • Resolution is a bit lower than native XR • AR is still experimental • Specification is under development • Size of assets on mobile connections might be too big
41. What’s next? • AR on WebXR • 5G for better, faster experiences • New devices with growing capabilities • Declarative Depth? CSS 3D?
42. Diego González, PhD @diekus https://samsunginter.net Спасибо