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

16b6c87229eaf58768d25ed7b2bbbf52?s=47 CodeFest
April 05, 2019

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!

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 05, 2019
Tweet

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

  5. None
  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
  20. None
  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
  34. None
  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 Спасибо