The document discusses virtual and augmented reality technologies. It provides an overview of VR and AR, including examples of VR devices and uses. It also covers WebXR, an API that allows VR and AR experiences to be built for the web. The presentation includes information on frameworks for developing WebXR experiences and resources for learning more about WebXR.

1. Let’s expand
the Reality!
Speaker
Vasilika Klimova
Frontend Developer

2. VasiLika Klimova
@Lik04ka
LET’S EXPAND
THE REALITY

3. 3
fl
orian-rappl.de
Games

4. 4
3D

5. Speaker
5
Eric Meyer

6. 2019
6
skillup.lu cute-geek.com

7. 7
Virtual Reality

8. 8
Tron, 1982

9. 9
Full immersion in
the digital environment
Virtual Reality
VR

10. 10
Full immersion in
the digital environment
VR
Oculus
Cardboard
Virtual Reality

11. 11
3D coordinate system
6 Degrees of Freedom

12. Ready Player One, 2018
12

13. WebXR VR example
13

14. 14
VR video youtube.com

15. 15
VR tour
youtube.com

16. 16
Training vrvisiongroup.com wrench

17. WebXR VR actions
17
• We see the virtual world
• Moving around in the virtual world
• 360° rotation in the virtual world
• We see objects of the virtual world
• We interact with objects of the virtual world

18. 18
Virtual objects appear
in our reality
Full immersion in
the digital environment
Augmented Reality
VR AR

19. 19
AR devices

20. Minority Report, 2002
20

21. Facebook Masks
21

22. Education
22
web-education-ar-demo.appspot.com

23. 23
Information

24. IKEA Place
24
ikea.com

25. WebXR AR actions
25
• We see the real world
• Moving around in the real world
• 360° rotation in the real world
• We see objects of the virtual world
• We interact with objects of the virtual world
• We get data about objects of the real world

26. 26
VR
AR
X Reality

27. WebXR API Support
27
WebXR API
Immersive web
w3.org

28. WebXR API Support
28
caniuse.com
Immersive web
w3.org

29. WebXR tools
29
Android 9+

30. WebXR tools
30
WebXR API Emulator
Android 9+

31. WebXR tools
31
WebXR Viewer
WebXR API Emulator
Android 9+
iPhone

32. 32
+

33. 33
3D basics. Scene

34. 34
3D basics. Mesh

35. 35
3D basics. Camera

36. 36
3D basics. Renderer
discoverthreejs.com

37. 37
WebXR Algorithm
Run render loop
Start XR-session
Check XR-support
End XR-session

38. 38
Frameworks

39. 39
PlayCanvas WebXR scene
playcanv.as/e/p/z4gCucJ7

40. Learn WebXR
40
mixedreality.mozilla.org

41. 41
As terrifying and painful as reality can be, it’s also the only place
where you can
fi
nd true happiness.
Ready Player One, Ernest Cline

42. WebXR community
42
@mrmaxm
@brianpeiris
@ManishEarth @NellWaliczek
@AdaRoseCannon
@Tojiro

43. WebGL courses
43
@mrdoob

44. WebXR course
44
udemy.com/course/learn-webxr

45. September 8
45
Independent Café

46. Thank you !
Vasilika Klimova
@Lik04ka
vasilika.ru