Immersive technologies are becoming mainstream. While Virtual Reality is a privilege of those owning headsets or visiting VR rooms, Augmented Reality is a medium available for everyone who owns a computer or a smartphone. In this talk, I will share general info about what Augmented Reality is, overview of tools available to create AR on the web, and will show how to build simple AR experiences for the browser.

1. 1

2. 2
— Работаю девелопером с 2013
— Фронтенд разработчица в Shopify
— Co-founder Riga TechGirls
— Переехала из Латвии 󰏻 в Литву 󰏹
— Blogger at instagram.com/AlinaWhoCodes

3. — Иммерсивные технологии
— AR в браузере: AR.js
— AR в браузере: <model-viewer>
Дополненная реальность = Augmented Reality = AR
3

4. Иммерсивные технологии
4

5. Иммерсивные технологии
Реальный мир
Сгенерированный
Реальность AR VR
5

6. AR девайсы
6
Hololens Magic Leap Смартфон
3100 EUR 2300 EUR Гораздо дешевле :)
6

7. Применение AR: гейминг
7

8. Применение AR: соцсети
8

9. Применение AR: авиация
9

10. Применение AR:
○ Маркетинг
○ Шоппинг
○ И тд
10

11. AR может быть:
○ Marker-based
11

12. Marker-based
12

13. AR может быть:
○ Marker-based
○ Markerless
13

14. Markerless
14

15. AR может быть:
○ Marker-based
○ Markerless
○ Location-based
15

16. Location-based
16

17. AR в браузере
17

18. AR в браузере
○ mind-ar-js
○ WebXR
18

19. 19

20. AR в браузере
○ AR.js
○ <model-viewer>
20

21. AR.js
21

22. AR.js
○ Open source
○ Будет работать на любом телефоне с
WebGL & WebRTC
○ 60fps
○ Основа - JsARToolKit
22

23. AR.js
○ Location-based
○ Marker-based
■ Паттерн
■ Картинка
23

24. AR.js
24

25. А что же рендерить?
25

26. AR.js + Aframe!
26

27. AR.js + Three.js!
27

28. AR.js - с чего начать?
Build * Image Tracking (фото/иллюстр.) Marker Tracking (паттерн)
AFrame /aframe/build/aframe-ar-nft.js /aframe/build/aframe-ar.js
three.js /three.js/build/ar-nft.js /three.js/build/ar.js
* Location-based включен во все билды
28

29. AFrame
+ дефолтный маркер
+ Aframe 3D
29

30. AFrame + дефолтный маркер + AFrame 3D
30
[DEMO]

31. AFrame + дефолтный маркер + AFrame 3D
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
31

32. AFrame + дефолтный маркер + AFrame 3D
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="../build/aframe/build/aframe-ar.js"></script>
32

33. AFrame + дефолтный маркер + AFrame 3D
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="../build/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs>
<a-entity camera></a-entity>
</a-scene>
33

34. AFrame + дефолтный маркер + AFrame 3D
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="../build/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs>
<a-marker preset="hiro">
...
</a-marker>
<a-entity camera></a-entity>
</a-scene>
34

35. AFrame + дефолтный маркер + AFrame 3D
<a-sphere
…
></a-sphere>
<a-sphere
material="src: ../assets/earth.png"
animation="property: rotation; to: 360 360 360; loop: true; dur:
15000; easing: linear;"
position="0.8 0 -0.5"
radius="0.8"
rotation="0 0 0"
id="earth"
visible="false"
color="white"
></a-sphere>
<a-sphere
…
></a-sphere> 35

36. AFrame + дефолтный маркер + AFrame 3D
<a-sphere
…
></a-sphere>
<a-sphere
material="src: ../assets/earth.png"
animation="property: rotation; to: 360 360 360; loop: true; dur:
15000; easing: linear;"
position="0.8 0 -0.5"
radius="0.8"
rotation="0 0 0"
id="earth"
visible="false"
color="white"
></a-sphere>
<a-sphere
…
></a-sphere> 36

37. AFrame + дефолтный маркер + AFrame 3D
<a-sphere
…
></a-sphere>
<a-sphere
material="src: ../assets/earth.png"
animation="property: rotation; to: 360 360 360; loop: true; dur:
15000; easing: linear;"
position="0.8 0 -0.5"
radius="0.8"
rotation="0 0 0"
id="earth"
visible="false"
color="white"
></a-sphere>
<a-sphere
…
></a-sphere> 37

38. AFrame + дефолтный маркер + AFrame 3D
<a-sphere
…
></a-sphere>
<a-sphere
material="src: ../assets/earth.png"
animation="property: rotation; to: 360 360 360; loop: true; dur:
15000; easing: linear;"
position="0.8 0 -0.5"
radius="0.8"
rotation="0 0 0"
id="earth"
visible="false"
color="white"
></a-sphere>
<a-sphere
…
></a-sphere> 38

39. AFrame + дефолтный маркер + AFrame 3D
<a-sphere
…
></a-sphere>
<a-sphere
material="src: ../assets/earth.png"
animation="property: rotation; to: 360 360 360; loop: true; dur:
15000; easing: linear;"
position="0.8 0 -0.5"
radius="0.8"
rotation="0 0 0"
id="earth"
visible="false"
color="white"
></a-sphere>
<a-sphere
…
></a-sphere> 39

40. AFrame + дефолтный маркер + AFrame 3D
<a-sphere
…
></a-sphere>
<a-sphere
material="src: ../assets/earth.png"
animation="property: rotation; to: 360 360 360; loop: true; dur:
15000; easing: linear;"
position="0.8 0 -0.5"
radius="0.8"
rotation="0 0 0"
id="earth"
visible="false"
color="white"
></a-sphere>
<a-sphere
…
></a-sphere> 40

41. AFrame + дефолтный маркер + AFrame 3D
button.addEventListener('click', function (event) {
const earth = document.getElementById('earth');
const visibility = earth.getAttribute('visible');
earth.setAttribute('visible', !visibility);
});
41

42. AFrame + кастомный маркер + готовый 3D
42

43. AFrame + кастомный маркер + готовый 3D
.png
.patt
43
Marker Training

44. AFrame + кастомный маркер + готовый 3D
<a-marker
preset="hiro"
>
...
</a-marker>
44

45. AFrame + кастомный маркер + готовый 3D
<a-marker
type="pattern"
url="../assets/markers/fwdays.patt"
>
...
</a-marker>
45

46. AFrame + кастомный маркер + готовый 3D
<a-marker
type="pattern"
url="../assets/markers/fwdays.patt"
>
<a-entity
position="1 1 1"
scale="1 1 1"
rotation="270 0 0"
obj-model="obj: ../assets/fw.obj; mtl: ../assets/fw.mtl"
></a-entity>
</a-marker>
46

47. AFrame + кастомный маркер + готовый 3D
+ QRcode (qrcode-monkey.com)
47

48. Three.js + дефолтный маркер
48

49. Three.js + дефолтный маркер
<script src="../build/threejs.min.js"></script>
<script src="../build/three.js/build/ar.js"></script>
49

50. Three.js + дефолтный маркер
<script src="../build/threejs.min.js"></script>
<script src="../build/three.js/build/ar.js"></script>
50
THREE
1. Create renderer
2. Create scene
3. Create camera
4. Create objects
5. Run render loop
6. Interactivity

51. Three.js + дефолтный маркер
<script src="../build/threejs.min.js"></script>
<script src="../build/three.js/build/ar.js"></script>
51
1. Create renderer
2. Create scene
3. Create camera
4. Create objects
5. Run render loop
6. Interactivity
AR.js
1. Init analyzed image
2. Init engine that’s
looking for marker
3. Init placing content on
marker
THREE

52. Three.js + дефолтный маркер
<script src="../build/threejs.min.js"></script>
<script src="../build/three.js/build/ar.js"></script>
52
1. Create renderer
2. Create scene
3. Create camera
4. Create objects
5. Run render loop
6. Interactivity
AR.js
1. Init analyzed image
2. Init engine that’s
looking for marker
3. Init placing content on
marker
THREE

53. Three.js + дефолтный маркер
<script src="../build/threejs.min.js"></script>
<script src="../build/three.js/build/ar.js"></script>
53
1. Create renderer
2. Create scene
3. Create camera
4. Create objects
5. Run render loop
6. Interactivity
AR.js
1. Init analyzed image
2. Init engine that’s
looking for marker
3. Init placing content on
marker
THREE

54. <model-viewer>
54

55. 55
<model-viewer>

56. <script type="module" src="https://unpkg.com/@google/
model-viewer/dist/model-viewer.min.js"></script>
56

57. <script type="module" src="https://unpkg.com/@google/
model-viewer/dist/model-viewer.min.js"></script>
<model-viewer
src="../assets/GeoPlanter.glb"
ar
ar-modes="webxr quick-look scene-viewer"
camera-controls
placement="floor"
>
</model-viewer>
57

58. <script type="module" src="https://unpkg.com/@google/
model-viewer/dist/model-viewer.min.js"></script>
<model-viewer
src="../assets/GeoPlanter.glb"
ar
ar-modes="webxr quick-look scene-viewer"
camera-controls
placement="floor"
>
</model-viewer>
58

59. <script type="module" src="https://unpkg.com/@google/
model-viewer/dist/model-viewer.min.js"></script>
<model-viewer
src="../assets/GeoPlanter.glb"
ar
ar-modes="webxr quick-look scene-viewer"
camera-controls
placement="floor"
>
<button class="activate" slot="ar-button">
👋Activate AR
</button>
</model-viewer>
59

60. Web AR в Shopify
60

61. <model-viewer> - кейс №1
61

62. ○ 3% ⬆ конверсии корзины
○ 40% ⬆ конверсии заказов
○ 5% ⬇ возвратов
Источник: shopify.ca/plus/customers/gunner-kennels
Еще кейсы: shopify.ca/blog/3d-models-video
62
<model-viewer> - кейс №1

63. https://size.link/
<model-viewer> - кейс №2
63

64. size.link/?l=20&w=15&h=10&units=cm
64
<model-viewer> - кейс №2

65. size.link/?l=20&w=15&h=10&units=cm
65
<model-viewer> - кейс №2

66. size.link/?l=20&w=15&h=10&units=cm
66
<model-viewer> - кейс №2

67. size.link/?l=20&w=15&h=10&units=cm
67
<model-viewer> - кейс №2

68. size.link/?l=20&w=15&h=10&units=cm
68
<model-viewer> - кейс №2

69. 69
<model-viewer> - кейс №2

70. Подведем итоги!
70

71. ● AR доступнее чем VR
● У AR много применений!
● AR: marker-based, markerless,
location based
● AR в браузере - есть мощные
платные варианты
71

72. ● DeepAR - лицо, руки, ноги, тело
● Ditto - только лицо
● Modiface - лицо и волосы (makeup)
● 8thwall - все!
● Universal AR by Zapworks - все!
72
Платные варианты

73. ● AR в браузере:
○ AR.js: three.js или AFrame +
location-based(?)/marker-based
○ <model-viewer>: супер простой,
markerless, но ограничен в
фичах
○ mind-ar-js
73

74. ● WebXR - WIP
● AR.js - документация хромает,
проекту есть куда расти
● Shopify использует <model-viewer>
74

75. Спасибо!
instagram.com/AlinaWhoCodes
twitter.com/AlinaWhoCodes
75