Learn about XR, how it works on the web, and how it can leverage the power of additional Web APIs to creative Immersive Experiences

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
*HoloLensillustrationbyWillyRodafromtheNounProject

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 DoF3 DoF
Magic Window
/ARCore-Kit
Position tracking

12. Hardware
6 DoF3 DoF
Magic Window
/ARCore-Kit
Position tracking
Oculus Rift
Google Cardboard

13. Hardware
6 DoF3 DoF
Magic Window
/ARCore-Kit
Position tracking
Oculus Rift
Samsung Gear VR

14. Hardware
6 DoF3 DoF
Magic Window
/ARCore-Kit
Position tracking
Oculus Rift

15. Hardware
6 DoF3 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#, BooC++C++ C#, BooC++
*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
fastfrictionless
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
WebXRHow to

25. • Poll device pose
• Query info about the environment
• Present imagery to user
WebXR - XRSessionHow to

26. Support: Browsers
WebVR1.1WebXR*

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
Спасибо