Как давно мы смотрим фильмы о виртуальной реальности — и как захватывающе она выглядит! Может, вы не заметили, но виртуальная и дополненная реальность уже встречается и в нашей жизни, в том числе и в браузерах. Появляется всё больше способов применять эти технологии. Давайте поближе познакомимся с VR и AR и посмотрим, как они разрабатываются в реале. Доклад для коференции Я ❤️ Фронтенд. https://youtu.be/-1I8LuqcCNA?t=16263

1. 1
VasiLika Klimova
@Lik04ka
РАСШИРЯЕМ
РЕАЛЬНОСТЬ

2. 2
florian-rappl.de
Игры

3. 3
3D

4. Спикер
4
Eric Meyer

5. 2021
5

6. 6
Виртуальная реальность

7. 7
«Нет, сынок, это — фантастика!»

8. 8
Трон, 1982

9. 9
Газонокосильщик, 1992

10. 10
Экзистенция, 1999

12. 12
Полное погружение в
цифровую среду
Виртуальная реальность
VR

13. 13
Полное погружение в
цифровую среду
Виртуальная реальность
VR

14. 14
Трёхмерная система координат

15. 15
Степени свободы 3DoF
• Свобода
вращательного
движения

16. 16
Степени свободы 6DoF
• Свобода
поступательного
движения

17. WebXR VR пример
17

18. WebXR VR-действия
18
• Видим виртуальный мир
• Вращение 360° в виртуальном мире
• Передвижение в виртуальном мире
• Видим объекты виртуального мира
• Взаимодействуем с объектами виртуального мира

19. Ready Player One, 2018
19

20. 20
VR-видео youtube.com

21. 21
Тренинг vrvisiongroup.com wrench

22. 22
Виртуальные элементы
появляются в нашей
реальности
Погружение в
цифровую среду
Дополненная реальность
VR AR MR

23. 23
Устройства дополненной реальности

24. WebXR AR-действия
24
• Видим реальный мир
• Вращение 360° в реальном мире
• Передвижение в реальном мире
• Видим объекты виртуального мира
• Получаем данные об объектах реального мира
• Взаимодействуем с объектами виртуального мира

25. Minority Report, 2002
25

26. Facebook Masks
26

27. Covid-дистанция
27
sodar.withgoogle.com

28. Образование
28
web-education-ar-demo.appspot.com

29. 29
Информация

30. IKEA-Place
30
ikea.com

31. AR-Copy paste
31
clipdrop.co

32. 32
X Reality
VR
AR

33. Изучить XR
33
mixedreality.mozilla.org

34. WebVR API
34
caniuse.com
2017-2018

35. WebXR API Стандарт
35
w3.org

36. WebXR API Кроссбраузерность
36
caniuse.com
WebXR API
Immersive web

37. Oculus Browser
37

38. WebXR-инструменты
38
WebXR Viewer WebXR API Emulator

39. 39
+

40. 40
Основные понятия WebGL
discoverthreejs.com

41. 41
Frameworks

42. 42
The Matrix, 1999

43. Специалисты
43
webgl_ru

44. 44

45. 45
Потанцуем? Frontend Live 2020

46. 46
Алгоритм
Run render loop
Start XR-session
Check XR-support
End XR-session

47. 47
PlayCanvas. Создание проекта

48. 48
// if XR is supported
if (app.xr.supported) {
// handle mouse / touch events
let onTap = function (evt) {
// if immersive VR supported
if (app.xr.isAvailable(pc.XRTYPE_AR)) {
// start immersive VR session
cameraEntity.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR);
}
evt.event.preventDefault();
evt.event.stopPropagation();
};
// attach mouse / touch events
app.mouse.on("mousedown", onTap);
app.touch.on("touchend", onTap);
}
Check XR-support

49. 49
// if XR is supported
if (app.xr.supported) {
// handle mouse / touch events
let onTap = function (evt) {
// if immersive VR supported
if (app.xr.isAvailable(pc.XRTYPE_AR)) {
// start immersive VR session
cameraEntity.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR);
}
evt.event.preventDefault();
evt.event.stopPropagation();
};
// attach mouse / touch events
app.mouse.on("mousedown", onTap);
app.touch.on("touchend", onTap);
}
Start XR-session

50. 50
Стреляем помидорами

51. 51
Просмотр WebXR
chrome://flags
WebXR incubations: Enabled
Android 9+
Chrome Canary

52. 52
PlayCanvas WebXR-сцена
playcanv.as/e/p/z4gCucJ7

53. 53
Проект на PlayCanvas
webxr-tossing-tomatoes

54. 54
Depth sensing API
@mrmaxm

55. 55
Image Tracking API
@mrmaxm

56. 56
Optical Hands
tracking API
@mrmaxm

57. WebXR-коммьюнити
57
@mrmaxm
@brianpeiris
@ManishEarth @NellWaliczek
@AdaRoseCannon
@Tojiro

58. WebGL-курсы
58
@mrdoob

59. WebXR-курс
59

60. 60
Как бы ни был страшен реальный мир, это единственное место,
где можно найти истинное счастье.
Первому игроку приготовиться, Эрнест Клайн

61. Спасибо за внимание!
Vasilika Klimova
@Lik04ka
vasilika.ru