Skip to main content
Skip to main navigation menu
Skip to site footer

Open Menu

Educational Dimension

Early Access

About the Journal

Editorial Team

Submissions

Announcements

Current

Archives

About

Publication Ethics and Publication Malpractice Statement

Peer-review Process

Article Withdrawal

Privacy Statement

Copyright Statement

Contact

Search

Register

Login

Return to Article Details

Teaching WebAR development with integrated machine learning: a methodology for immersive and intelligent educational experiences

Home

/

Archives

/

Vol. 10 (2024)

/

Articles

Teaching WebAR development with integrated
machine learning: a methodology for immersive
and intelligent educational experiences

Serhiy O. Semerikov1,2,3,4,5[0000-0003-0789-0272], Mykhailo V. Foki1,

Dmytro S. Shepiliev1[0000-0001-6913-8073],
Mykhailo M. Mintii1[0000-0002-0488-5569],

Iryna S. Mintii2,1,6,3,5[0000-0003-3586-4311],
and Olena H. Kuzminska7,1,5[0000-0002-8849-9648]

1
Kryvyi Rih State Pedagogical University,
54 Gagarin Ave., Kryvyi Rih, 50086, Ukraine

2
Institute for Digitalisation of Education of the NAES of Ukraine,
9 M. Berlynskoho Str., Kyiv, 04060, Ukraine

3
Zhytomyr Polytechnic State University,
103 Chudnivska Str., Zhytomyr, 10005, Ukraine

4
Kryvyi Rih National University,
11 Vitalii Matusevych Str., Kryvyi Rih, 50027, Ukraine

5
Academy of Cognitive and Natural Sciences,

6
Lviv Polytechnic National University,
12 Stepana Bandery Str., Lviv, 79000, Ukraine

7
National University of Life and Environmental Sciences of Ukraine,
15 Heroiv Oborony Str., Kyiv, 03041, Ukraine

[email-masked], [email-masked], [email-masked],
[email-masked], [email-masked],
[email-masked]

https://kdpu.edu.ua/semerikov, https://acnsci.org/mintii/

Abstract. Augmented reality (AR) and machine
learning (ML) are rapidly growing technologies with immense potential for
transforming education. Web-based augmented reality (WebAR) provides a
promising approach to delivering immersive learning experiences on mobile
devices. Integrating machine learning models into WebAR applications can
enable advanced interactive effects by responding to user actions, thus
enhancing the educational content. However, there is a lack of effective
methodologies to teach students WebAR development with integrated machine

learning. This paper proposes a methodology with three main steps:
(1) Integrating standard TensorFlow.js models like handpose into
WebAR scenes for gestures and interactions; (2) Developing custom
image classification models with Teachable Machine and exporting to
TensorFlow.js; (3) Modifying WebAR applications to load and use exported
custom models, displaying model outputs as augmented reality content.
The proposed methodology is designed to incrementally introduce
machine learning integration, build an understanding of model training
and usage, and spark ideas for using machine learning to augment
educational content. The methodology provides a starting point
for further research into pedagogical frameworks, assessments, and
empirical studies on teaching WebAR development with embedded
intelligence.

Keywords: web-based augmented reality • WebAR • machine learning •
TensorFlow.js • Teachable Machine • educational technology

1 Вступ

Доповнена реальнiсть у Web (Web-based Augmented Reality, або WebAR) є одним
iз найпоширенiших способiв об’єднання реального та вiртуального на мобiльних
Iнтернет-пристроях [98, 99]. Розробка веб-додаткiв доповненої реальностi
вiдрiзняється вiд iнших способiв розробки тим, що є крос-платформовою i не
вимагає встановлення розроблених додаткiв, що суттєво пiдвищує рiвень
мобiльностi програмного забезпечення порiвняно iз традицiйними мобiльними
додатками [102].

Наразi найвiдомiша у свiтi некомерцiйна бiблiотека для розробки WebAR –
AR.js [10], започаткована Жеромом Етьєнном (так, у [93] подано системний опис
можливостей застосування AR.js для формування професiйних компетентностей
майбутнiх учителiв STEM-дисциплiн), проте ХiуКiм Юен (HiuKim Yuen [118]),
один iз розробникiв AR.js, створив нову бiблiотеку пiд назвою MindAR [119] –
бiльш компактну та технологiчно розвинену, але, на вiдмiну вiд AR.js,
маловiдому.

AR.js та MindAR побудованi на класичних рушiях ARToolKit та OpenCV
вiдповiдно, що наразi є промисловим стандартом. Водночас, якщо AR.js
зорiєнтована на опрацювання насамперед простих маркерiв розмiром до
16 × 16, то MindAR – на природнi зображення складної структури. Iнша
особливiсть MindAR, що робить її доцiльним засобом навчання – включення до
її складу вiдомої бiблiотеки машинного навчання TensorFlow [15], що
надає потенцiйнi можливостi для iнтеграцiї моделей машинного навчання
у WebAR додатки з метою створення високоiнтерактивних i цiкавих
ефектiв, наприклад, використання жестiв рук або мiмiки для управлiння
AR-контентом.

Мета дослiдження – розробити окремi елементи методики навчання
розробки доповненої реальностi для Web iз iнтегрованими моделями машинного
навчання.

Вiдповiдно до мети визначено такi основнi завдання дослiдження:

а)

виконати бiблiометричний аналiз джерел iз освiтнiх застосувань WebAR;

б)

дiбрати засоби розробки доповненої реальностi для Web;

в)

розробити та апробувати методику розробки WebAR додаткiв для
вiдстеження обличчя;

г)

розробити та апробувати методику iнтеграцiї моделей машинного
навчання у WebAR додатки.

2 Бiблiометричний аналiз джерел iз освiтнiх застосувань WebAR

Для виконання систематизованого бiблiометричного аналiзу за запитами
“WebAR” та “Web-based augmented reality for education” був застосований
VOSviewer версiї 1.6.18 [34]. В якостi джерела даних для першого запиту був
обраний Crossref iз пошуком по заголовках документiв, що надало можливiсть
вiдiбрати 19 документiв 2017–2022 рр. (дата запиту: 26.11.2022). Вiдiбранi
документи були проаналiзованi за кiлькiстю разiв, якi вони цитуються разом iз
iншими документами. Iз 92 джерел, що цитувались у 19 документах,
26 цитуються спiльно бiльше одного разу, утворюючи лише 1 кластер
(рис. 1), що складають роботи [98, 99, 105], виконанi пiд керiвництвом
С. О. Семерiкова.

Рис. 1: Семантична мережа посилань у документах за запитом “WebAR”.

В якостi джерела даних для другого запиту був обраний Scopus iз пошуком
по заголовках, анотацiях та ключових словах документiв, що надало можливiсть
вiдiбрати 93 документи 2001–2023 рр. (рис. 2), 66 з яких припадають на
останнi 5 рокiв. Бiльшу частину з них складають статтi у журналах (58
[4, 19, 21, 23–32, 35–39, 41, 42, 44, 45, 49, 52, 53, 55–59, 61–66, 69–72, 75,
78, 82, 85, 89, 91, 92, 95, 97, 100, 104, 111–113, 115, 117, 120, 121]),
меншу – книги (4 [50, 54, 60, 88]) та статтi у матерiалах конференцiй
(31 [1–3, 18, 20, 22, 33, 40, 43, 46, 51, 68, 73, 74, 77, 81, 83, 84, 86, 87, 90,
94, 96, 101, 103, 106, 107, 109, 110, 114, 116]).

Рис. 2: Розподiл документiв за роками (запит “Web-based augmented reality
for education”).

Iз 301 автора 93 документiв 2 та бiльше разiв цитувались 27 авторiв, а 3 та
бiльше – 9. На рис. 3 показано семантичну мережу ключових слiв у документах
за запитом “Web-based augmented reality for education”. Розподiл ключових слiв
за кластерами (рис. 4) подано у табл. 1.

Рис. 3: Семантична мережа ключових слiв у документах за запитом
“Web-based augmented reality for education”.

Табл. 1: Розподiл ключових слiв за кластерами (документи за запитом
“Web-based augmented reality for education”).

Кластер 1

Кластер 2

article

computer-aided instruction

augmented reality

curricula

education

e-learning

human

education computing

humans

engineering education

internet/web-based learning

learning environments

learning

mobile learning

medical education

students

smartphones

teaching

virtual reality

user interfaces

Кластер 3

Кластер 4

augmented reality applications

distance education

augmented reality technology

interactive learning environments

learning systems

motivation

websites

Рис. 4: Розподiл ключових слiв за кластерами.

Перший кластер (видiлений червоним кольором на рис. 4 та у табл. 1)
пов’язує базовi концепти доповненої реальностi в освiтi: доповнену та
вiртуальну реальнiсть iз освiтою (зокрема, медичною) та навчанням людей,
зокрема, iз використанням смартфонiв.

Доповнена реальнiсть виступає системотвiрним елементом – вона пов’язує усi
кластери та сама є пов’язаною з усiма iншими концептами.

У аналiзованих документах вiртуальна реальнiсть не пов’язується iз
традицiйним викладанням, мобiльним навчанням та iнтернет/веб-орiєнтованим
навчанням. Тут слiд вiдрiзняти вiртуальну реальнiсть вiд вiртуальних
навчальних середовищ, якi якраз охоплюють перелiченi поняття.

Концепт освiти також вiдноситься до майже унiверсальних – вiн не
пов’язується лише з iнтерфейсами користувача та AR-додатками.

Досить показовi зв’язки медичної освiти з iншими кластерами: у другому
кластерi – iз поняттями курикулуму, IКТ навчання, комп’ютерно зорiєнтованого
викладання, електронного навчання та студентами, у третьому – iз веб-сайтами
та педагогiчними технологiями доповненої реальностi, у четвертому – iз
дистанцiйною освiтою.

Навчання (у сенсi учiння) пов’язане у другому кластерi з викладанням,
студентами, IКТ навчання, комп’ютерно зорiєнтованим викладанням,
електронним навчанням та iнтерфейсами користувача, у третьому –
iз веб-сайтами та мотивацiєю. Дане поняття не має прямих зв’язкiв iз
дистанцiйною освiтою.

Концепт людини поза межами свого кластеру пов’язаний зi студентами та
електронним навчанням у другому кластерi та веб-сайтами у третьому.

Поза межами свого кластеру, iнтернет/веб-орiєнтоване навчання пов’язане
лише з традицiйним викладанням у другому кластерi.

Нарештi, смартфони пов’язанi у другому кластерi з викладанням,
студентами, IКТ навчання, електронним навчанням та iнженерною освiтою, у
третьому – iз веб-сайтами та AR-додатками.

Другий кластер (видiлений зеленим кольором на рис. 4 та у табл. 1) пов’язує
концепти проєктування навчального середовища: викладання,
iнженерну освiту, комп’ютерно зорiєнтоване викладання, електронне навчання,
студентiв, мобiльне навчання, навчальнi середовища, IКТ навчання та
курикулуми.

Центральними у другому кластерi є концепти “електронне навчання” та
“студенти”, що також вiдноситься до майже унiверсальних – формально, вони
не пов’язується лише з iнтернет/веб-орiєнтованим навчанням через його
синонiмiчнiсть iз електронним навчанням.

Комп’ютерно зорiєнтоване викладання пов’язане iз концептами першого
(доповнена та вiртуальна реальнiсть, освiта (включно iз медичною) та
навчання) та третього (мотивацiя, веб-сайти, системи навчання, iнтерактивнi
навчальнi середовища, AR-додатки, технологiї доповненої реальностi)
кластерiв.

Концепт викладання пов’язаний у першому кластерi iз доповненою

реальнiстю, освiтою та навчанням, смартфонами та iнтернет/веб-орiєнтованим
навчанням, а у третьому – iз веб-сайтами, AR-додатками та технологiями
доповненої реальностi.

Iнженерна освiта пов’язана у першому кластерi iз доповненою та
вiртуальною реальнiстю, освiтою та смартфонами, та з усiма концептами
третього i четвертого кластерiв.

IКТ навчання пов’язанi у першому кластерi iз доповненою та вiртуальною
реальнiстю, освiтою (включно iз медичною) та навчанням, смартфонами, у
третьому – iз мотивацiєю, системами навчання та веб-сайтами, у четвертому – iз
дистанцiйною освiтою.

Поза межами свого кластеру, навчальнi середовища пов’язанi лише з освiтою,
доповненою та вiртуальною реальнiстю з першого кластеру й веб-сайтами iз
третього.

Аналогiчно, мобiльне навчання пов’язане iз освiтою та доповненою
реальнiстю iз першого кластеру й мотивацiєю, веб-сайтами та системами
навчання iз третього.

Iнтерфейси користувача мають зв’язки iз концептами першого (навчання,
доповнена та вiртуальна реальнiсть) та третього (мотивацiя, веб-сайти)
кластерiв.

Курикулуми пов’язанi у першому кластерi iз освiтою (включно з медичною),
доповненою та вiртуальною реальнiстю, у третьому – iз веб-сайтами та у
четвертому iз дистанцiйною освiтою.

Третiй кластер (видiлений блакитним кольором на рис. 4 та у табл. 1)
пов’язує концепти реалiзацiї iмерсивного навчального середовища:
веб-сайти, мотивацiю, системи навчання, iнтерактивнi навчальнi середовища,
AR-додатки та технологiї доповненої реальностi.

Центральними у третьому кластерi є веб-сайти, що вiдноситься до
майже унiверсальних концептiв – формально, вони не пов’язується лише
з iнтернет/веб-орiєнтованим навчанням через перекриття вiдповiдних
понять.

Концепт мотивацiї пов’язаний у першому кластерi iз доповненою та
вiртуальною реальнiстю, освiтою та навчанням, а у третьому – iз електронним
та мобiльним навчанням, IКТ навчання, iнтерфейсами користувача,
комп’ютерно зорiєнтованим викладанням, студентами та iнженерною
освiтою.

Системи навчання пов’язанi у першому кластерi iз доповненою та
вiртуальною реальнiстю i освiтою, а у третьому – iз електронним та мобiльним
навчанням, IКТ навчання, комп’ютерно зорiєнтованим викладанням, студентами
та iнженерною освiтою.

Схожi зв’язки мають й iнтерактивнi навчальнi середовища: у першому
кластерi – iз доповненою та вiртуальною реальнiстю i освiтою, а у третьому – iз
електронним навчанням, комп’ютерно зорiєнтованим викладанням, студентами
та iнженерною освiтою.

Природно, AR-додатки пов’язанi у першому кластерi з доповненою
реальнiстю та смартфонами, а у другому – iз електронним навчанням,

комп’ютерно зорiєнтованим викладанням, викладанням, студентами та
iнженерною освiтою.

Технологiї доповненої реальностi пов’язанi у першому кластерi з доповненою
та вiртуальною реальнiстю i освiтою (включно з медичною), а у другому –
iз електронним навчанням, комп’ютерно зорiєнтованим викладанням,
викладанням, студентами та iнженерною освiтою.

Четвертий кластер (видiлений жовтим кольором на рис. 4 та у табл. 1)
мiстить концепт дистанцiйної освiти, пов’язаний у першому кластерi iз
концептами доповненої та вiртуальної реальностi i концептом освiти (включно з
медичною), у другому – iз концептами студента, iнженерної освiти, IКТ
навчання, електронного навчання та курикулуму, та у третьому – iз концептом
веб-сайту.

Рис. 5: Густина зв’язкiв ключових слiв за запитом “Web-based augmented
reality for education”.

Аналiз розподiлу концептiв за густиною зв’язкiв (рис. 5) та часом надає
можливiсть визначити, що найбiльш давнi (до 2015 року) дослiдження були
зосередженi на питаннях iнтерфейсiв користувача та їх застосування в освiтi. У
роботах 2016 року центр уваги змiщувався у напрямi дослiдження впливу на
студентiв викладання у навчальних середовищах. Дослiдження 2017 року
актуалiзували концепти вiртуальної реальностi, iнтерактивних навчальних
середовищ, курикулуму, комп’ютерно зорiєнтованого навчання, зокрема, у
iнженернiй освiтi. Центром уваги дослiджень 2018 року стали IКТ навчання,
застосування смартфонiв, AR-додаткiв та педагогiчних технологiй доповненої
реальностi.

WebAR стає предметом уваги дослiджень 2019 року – у них пiдiймаються
питання застосування смартфонiв, iнтернет/веб-орiєнтованого навчання та
доповненої реальностi. У 2020 року вплив пандемiї COVID-19 додав питання
мотивацiї навчання та медичної освiти. Новий елемент останнiх за часом
дослiджень – це доповнення (аугментацiя) людини.

3 Засоби розробки доповненої реальностi для веб

3.1 Налаштування веб-серверу та вiддаленого налагоджувача

Для розробки мовами HTML та JavaScript основними засобами розробки є
простий текстовий редактор i веб-браузер, в якому можна вiдкрити звичайну
веб-сторiнку HTML, збережену локально. Однак це може не спрацювати для
додаткiв, якi потребують використання камери. Крiм того, може знадобитися
час вiд часу тестувати додатки на власних мобiльних пристроях, тому краще
встановити локальний веб-сервер. Корисним може бути вибiр протоколу HTTPS
у додаткових налаштуваннях – без його використання мобiльний пристрiй може
не надати доступ до камери.

Технiчно можна виконувати всю роботу з розробки та тестування
безпосередньо на настiльному браузерi, але iнодi все ж таки доцiльно
спробувати на мобiльному телефонi. Якщо пристрої пiдключенi до однiєї
локальної мережi, у якiй немає брандмауера, проблем iз доступом до
веб-серверу немає. Однак, якщо точка доступу до мережi знаходиться за
брандмауером, можна використовувати ngrok для того, щоб виконати
перенаправлення трафiку з порту, доступ до якого обмежений. Пiсля
встановлення ngrok та створення облiкового запису на сайтi [79] необхiдно
зареєструвати агент ngrok [80] та запустити його, вказавши в якостi
параметру протокол (наприклад, HTTP) та номер порту, доступ до якого
закриває брандмауера (наприклад, 8887). Пiсля запуску ngrok надає
глобальне Iнтернет-посилання за протоколом HTTPS – але лише у той час,
коли працюють одночасно локальний веб-сервер та перенаправлення
ngrok.

Традицiйно, налагодження веб-додаткiв передбачає перегляд консолi
веб-браузера, куди виводяться повiдомлення, що стосуються налагодження
програми. Однак на мобiльному пристрої це може бути не так просто. Тут
допоможе RemoteJS [108] – натиснувши пiсля переходу на сайт кнопку “Start
Debugging”, отримаємо код агенту RemoteJS виду

<script
data-consolejs-channel="9817ec3e-a3f7-fbe3-3836-e2e2d07d5c99"
src="https://remotejs.com/agent/agent.js"></script>

Цей код необхiдно скопiювати i вставити безпосередньо у веб-сторiнку: пiсля
цього всi налагоджувальнi повiдомлення будуть надiсланi на веб-сторiнку з
адресою https://remotejs.com/viewer/agent_code, де agent_code – значення
змiнної data-consolejs-channel.

3.2 Застосування графiчної бiблiотеки для доповненої реальностi у
веб

WebGL [76] – JavaScript API для рендеринга 3D-графiки в браузерах. Вiн є
крос-платформним стандартом вiдображення, який пiдтримують всi основнi
браузери. Проте низькорiвневий код WebGL складно читати та писати, тому
були створенi бiльш зручнi для користувача бiблiотеки.

Three.js [17] є однiєю з таких бiблiотек. Її автор Рiкардо Мiгель Кабелло,
також вiдомий як mrdoob, є одним iз пiонерiв використання WebGL, тому ця
бiблiотека часто використовується при побудовi iнших бiблiотек. Бiльшiсть
WebAR SDK пiдтримують Three.js, тому вона дiйсно потребує опанування для
ефективної розробки веб-додаткiв з доповненою реальнiстю.

Щоб зрозумiти, як на високому рiвнi працює Three.js, доцiльно провести
аналогiю з роботою фото- чи кiнорежисера, який:

1)

налаштовує сцену шляхом розташування на нiй об’єктiв;

2)

рухає камеру, щоб зафiксувати кадри з рiзних позицiй та ракурсiв.

Three.js не є спецiалiзованою бiблiотекою для доповненої реальностi – вона
мiстить суттєво бiльше функцiональностi, в тому числi тiєї, що є бiльш
придатною для веб-VR (освiтлення, камери та iн.) (рис. 6).

Рис. 6: Загальна структура Three.js.

Як показано на рис. 6, основою є сцена, створення об’єктiв на якiй
вiдбувається у три кроки:

1)

визначення геометрiї об’єкту – векторiв позицiї, кольорiв та iн.: так,
BoxGeometry вiдповiдає за прямокутний паралелепiпед;

2)

визначення матерiалу – способу рендерингу об’єкту (його оптичнi
властивостi – колiр, фактура, блиск тощо): так, MeshBasicMaterial
вiдповiдає матерiалу, що має власний колiр i не вiдбиває променi;

3)

композицiя геометрiї та матерiалу виконується за допомогою Mesh.

Рендерер – це те, що буде вiдображати 3D-модель на полотнi з урахуванням
матерiалу, текстури та освiтлення. Для роботи WebAR додаткiв важливо, щоб
сцена була прозорою – тодi на неї можна буде накласти вiдеопотiк з камери. Це
досягається встановленням значенням параметру alpha у true у конструкторi
класу WebGLRenderer.

Безпосередньо рендеринг виконує метод render, який вiдображає проєкцiю
сцени на полотно (елемент canvas) iз точки зору камери.

Перед зв’язування полотна зi сторiнкою HTML для WebAR додаткiв
необхiдно виконати пiдключення вiдеопотоку.

На рис. 7 показано першу реалiзацiю WebAR, в якiй реальний об’єкт з
камери доповнений вiртуальним об’єктом.

Рис. 7: Результат накладання.

Розмiщення полотна поверх вiдео є основою WebAR. Єдине, чого бракує, це
вiдображення об’єкту у бiльш доцiльному мiсцi та оновлення його положення
вiдповiдно до сигналу з камери, тобто вiдстеження об’єкту.

3.3 Налаштування бiблiотеки для доповненої реальностi у веб

Змiнити положення зображення можна шляхом перемiщення вiртуальної камери,
змiнюючи її позицiю (координати) та нахил. Доцiльнi змiни вимагають
вiдстеження об’єктiв, тому поширеною є класифiкацiя доповненої реальностi на
маркерну, безмаркерну, координатну тощо. Автор бiблiотеки MindAR пропонує
класифiкацiю доповненої реальностi за типом вiдстеження.

Перший тип – вiдстеження зображень: у цьому типi вiртуальнi об’єкти
з’являються поверх цiльових зображень, якi можуть бути маркерними
(barcode-like), якi мають заздалегiдь визначену структуру, та природними, якi
можуть бути чим завгодно. Зображення не обов’язково має бути друкованими чи
екранними – можуть бути навiть футболки з доповненою реальнiстю
[67].

Другий тип доповненої реальностi – вiдстеження обличчя, за якого об’єкти
прикрiплюються до людського обличчя. Прикладами є фiльтри в Instagram,
Google Meet, кампанiї у соцiальних мережах, додатки для примiрки вiртуальних
аксесуарiв тощо.

Третiй тип доповненої реальностi – вiдстеження довкiлля (world tracking),
який також називають безмаркерною доповненою реальнiстю. За такого типу
вiдстеження об’єкти доповненої реальностi можуть бути розмiщенi де завгодно,
не обмежуючись конкретним зображенням, обличчям або фiзичними об’єктами.
Додатки вiдстеження довкiлля безперервно фiксують i вiдстежують навколишнє
середовище та оцiнюють фiзичне положення користувача додатку. Найчастiше
об’єкти доповненої реальностi прикрiплюються до певної поверхнi, зокрема, до
землi.

Геокоординатна доповнена реальнiсть (location-based AR), вiдома за
Pokémon GO, Ingress тощо передбачає прив’язку контенту до певного
географiчного положення – широти та довготи. Зазвичай цi програми
вiдстежують довкiлля, оскiльки доповнений вмiст, як правило, прикрiплений до
землi, а геокоординатна частина є скорiше додатковою умовою, виконання якої
приводить до початку вiдстеження довкiлля (або обличчя) у певному
мiсцi.

Можуть бути визначенi й iншi типи вiдстеження – вiдстеження 3D-об’єктiв,
вiдстеження рук та iн.

Незважаючи на рiзноманiття бiблiотек для доповненої реальностi, їх
основною задачею є визначення позицiї вiртуальної камери вiдповiдно до
вiдстежуваного об’єкту, що iлюструється наступним псевдокодом:

const ar_engine = new SOME_AR_ENGINE();
while(true) {
await nextVideoFrameReady();
const {position, rotation} = ar_engine.computeCameraPose(video);
camera.position = position;
camera.rotation = rotation;
}

Спочатку необхiдно iнiцiювати бiблiотеку – певний AR-рушiй, та отримати
посилання на нього. Далi у безперервному циклi дочекатись кадру з вiдеопотоку
реальної камери, визначити її положення (координати на нахил) та перемiстити
вiртуальну камеру на полотнi у те саме положення.

Нерiдко, однак, рухають не вiртуальну камеру, а об’єкти на сценi – тодi
визначається положення не реальної камери, а вiдстежуваного об’єкту, пiсля
чого об’єкт вiртуальної реальностi перемiщується у те саме положення, що й
вiдстежуваний об’єкт:

const ar_engine = new SOME_AR_ENGINE();
while(true) {
await nextVideoFrameReady();
const {position, rotation} = ar_engine.computeObjectPose(video);
some_object.position = position;
some_object.rotation = rotation;
}

Зображення, що вiдстежується, може бути будь-якого походження, проте
воно має бути пiдготовленим: так, якщо воно мiстить зайвi елементи, їх
необхiдно видалити.

Для розпiзнавання зображення з використанням бiблiотеки MindAR необхiдно
видiлити на ньому опорнi точки – елементи, за якими буде виконуватись
розпiзнавання. Це можна зробити за допомогою компiлятора зображень,
розмiщеного за посиланням https://hiukim.github.io/mind-ar-js-doc/tools/compile.
Результатом роботи компiлятора є бiнарний файл
targets.mind, що мiстить опис опорних точок, вiдстеження яких
вiдбуватиметься.

Iншi бiблiотеки мають схожi засоби отримання опису зображень, якi часто
називають компiляторами NFT маркерiв (вiд natural feature tracking). Таке
зображення повинно бути вiзуально складним та мати високу роздiльну
здатнiсть (тут деталi мають значення). Вiзуально складне зображення надає
програмному забезпеченню багато можливостей для вiдстеження унiкальних
частин зображення, що легко розпiзнаються. Вiд фiзичного розмiру NFT
маркера також залежить якiсть його розпiзнавання – до малих за розмiром
зображень мобiльний пристрiй необхiдно наблизити, у той час як вiд великих
навпаки – тримати подалi. Якiсть розпiзнавання також залежить вiд
освiтленостi екрану мобiльного пристрою; крiм того, камери з низькою
роздiльною здатнiстю зазвичай працюють краще, коли вони знаходяться близько
до маркерiв.

Бiблiотека Three.js є частиною MindAR, що суттєво спрощує їх взаємодiю:
так, конструктор класу MindARThree створює необхiднi для роботи iз Three.js
об’єкти – рендерер, сцену та камеру, доступнi вiдповiдно як поля renderer, scene
i camera.

Якiрнi об’єкти, що повертаються викликом методу addAnchor, параметр якого
вiдповiдає номеру зображення, що розпiзнається, використовуються для
вiдстеження цiльових зображень та надають позицiю, в якiй повинен
бути розмiщений об’єкт. Замiсть того, щоб додавати об’єкти Three.js
безпосередньо до сцени, вони додаються до складової якоря – об’єкту
group класу THREE.Group, що визначає множину пов’язаних об’єктiв,
положенням, орiєнтацiєю та видимiстю яких можна керувати спiльно.

Ця якiрна група управляється бiблiотекою MindAR, яка буде постiйно
оновлювати положення i орiєнтацiю групи вiдповiдно до нашого набору для
вiдстеження.

Метод start класу MindARThree виконує налаштування параметрiв,
вмикання камери та завантажує у пам’ять веб-браузера усi необхiднi
данi.

Для того, щоб рендерер, камера та сцена запрацювали, необхiдно
створити функцiю для їх вiзуалiзацiї. У безiменнiй функцiї зворотного
виклику, що створюється функцiєю setAnimationLoop, для кожного кадру iз
об’єкту renderer викликається метод render, параметрами якого є об’єкти
scene та camera – це i є анiмацiя на полотнi. У результатi отримаємо
повнофункцiональний WebAR додаток, що вiдстежує одне зображення
(рис. 8).

Рис. 8: Результат розпiзнавання зображення.

4 Методика розробки WebAR додаткiв для вiдстеження обличчя

4.1 Модель опорних точок обличчя

Бiблiотека MindAR має два основнi набори модулiв – для роботи з зображеннями
(image) та для роботи з обличчями (face). Схожiсть API для вiдстеження
зображень i вiдстеження облич чiтко простежується у кодi MindAR. Попри
схожiсть, метод addAnchor по-iншому трактує параметр: якщо для роботi iз
зображеннями це був номер цiльового зображення, то при розпiзнаваннi облич це
буде номер опорної точки обличчя.

Виявлення опорних точок обличчя базується на вiдомiй моделi бiблiотеки
TensorFlow [5]. Модель MediaPipe Face Mesh [48] є згортковою нейронною
мережею, що визначає на обличчi 468 тривимiрних опорних точок
(https://github.com/tensorflow/tfjs-models/raw/master/face-landmarks-detection/mesh_map.jpg),
i ми можемо прив’язувати об’єкти до будь-якої з них (рис. 9).

Рис. 9: Опорнi точки обличчя (фрагмент).

4.2 Накладання маски на обличчя

Маска для обличчя (face mesh) – ще один тип доповненої реальностi, пов’язаної з
накладання зображень (текстур) на всi опорнi точки обличчя людини, а не
прив’язки до окремих iз них. Маски для обличчя використовуються для
створення рiзноманiтних ефектiв макiяжу, татуювання тощо – аж до повної
вiртуалiзацiї особи.

Маска для обличчя не є заздалегiдь визначеною 3D-моделлю – вона
динамiчно генерується з постiйним оновленням геометрiї. Для накладання маски
на обличчя нам знадобиться вiдповiдна текстура.

Створення маски вiдбувається викликом addFaceMesh. Метод
addFaceMesh за формою схожий на addAnchor, але сутнiсть у них рiзна: у
addAnchor створюється порожня група, до якої додаються об’єкти, положенням
яких керує MindAR, у той час як faceMesh, що повертається addFaceMesh, є
єдиним вiдображуваним об’єктом, геометрiя якого змiнюється у кожному
кадрi.

Матерiалом маски для обличчя може бути довiльна текстура – якщо її не
встановити, маска для обличчя буде виглядати, як показано на першому
зображеннi (рис. 10).

Рис. 10: Маски для обличчя.

Побачити структуру цiєї маски можна на другому зображеннi (рис. 10) – для
цього необхiдно встановити атрибут wireframe матерiалу зображення. Третє та
четверте зображення (рис. 10) є прикладами накладання модифiкованої
текстури опорних точок обличчя. У документацiї до Meta Spark Studio [6] можна
знайти набiр текстур для масок для обличчя, що можна використовувати для
створення власних масок, як описано у [9].

Створення гарної маски потребує певних художнiх навичок, проте,
послуговуючись канонiчною текстурою (рис. 9), це зробити досить просто –
достатньо нанести поверх неї необхiдне зображення та видалити зайвi
лiнiї.

5 Методика iнтеграцiї моделей машинного навчання у WebAR додатки

5.1 Iнтеграцiя стандартних моделей

Для машинного навчання у Iнтернетi найчастiше використовують TensorFlow [14]
– безкоштовну бiблiотеку машинного навчання з вiдкритим вихiдним кодом,
розроблену компанiєю Google. На сьогоднi вона пiдтримує багато мов,
включаючи основнi – Python, Java, C++ – та пiдтримуванi спiльнотою: Haskell,
C#, Julia, R, Ruby, Rust, Scala. Вона доступна на багатьох платформах,
включаючи Linux, Windows, Android, а також убудованих платформах – версiя
бiблiотеки TensorFlow Lite призначена для роботи з моделями машинного
навчання на мобiльних пристроях, мiкроконтроллерах, пристроях Iнтернету
речей тощо.

TensorFlow.js [15] – версiя TensorFlow на JavaScript, що надає можливiсть
розробляти та використовувати моделi, послуговуючись цiєю мовою,
безпосередньо у браузерi. TensorFlow.js поставляється з великою кiлькiстю
попередньо навчених моделей, якi можна одразу використовувати [16]. Повний
перелiк моделей, доступних на поточний момент, подано за посиланням
https://github.com/tensorflow/tfjs-models – багато iз них є надзвичайно
корисними i можуть стати гарним доповненням до AR-додаткiв. Якщо необхiдна
функцiональнiсть вiдсутня, можна створити та навчити власнi моделi, або
модифiкувати наявнi.

TensorFlow.js є частиною бiблiотеки MindAR. Однак, моделi не є частиною
Tensorflow.js, тому їх необхiдно пiдключати окремо – так, як показано на
прикладi моделi handpose.js, описаної у [7]. Ця модель використовується для
визначення кистi руки та її складових.

Завантаження моделi handpose виконується з Kaggle (TensorFlow Hub) [11]:
переглянувши цей репозитарiй моделей, можна побачити, що вони займають
чималий обсяг, тому метод load, що їх завантажує, викликається як асинхронна
функцiя.

Модель handpose опрацьовує окремi кадри, якi беруться з вiдеопотоку.
Це достатньо обчислювально ємна процедура, тому, ураховуючи, що,
доки велика точнiсть iдентифiкацiї рук непотрiбна, можна спробувати
виявляти їх не у кожному кадрi. Функцiя detect утворює окремий цикл
анiмацiї, в якому для кожного десятого кадру виконується виклик методу
estimateHands завантаженої моделi, якому передається кадр video. Метод
повертає масив predictions, який мiстить вiдомостi про детектованi у кадрi
зображення рук, тому ненульовий розмiр масиву – ознака того, що у кадрi була
рука:

const video = mindarThree.video;

let frameCount = 1;

const detect = async () => {
if (frameCount % 10 == 0) {
const predictions = await model.estimateHands(video);
if (predictions.length > 0) {
//...
}
frameCount++;
window.requestAnimationFrame(detect);
}

window.requestAnimationFrame(detect);

На рис. 11 показано приклад встановлення положення площини на
детектованому зображеннi так, щоб воно вiдображало положення
обмежувального прямокутника руки у кадрi – ефект достатньо простий, проте
вiн надає уявлення про те, як використовувати моделi машинного навчання у
AR-додатках.

Рис. 11: Жестове управлiння розмiром та положенням вiртуального об’єкта.

5.2 Розробка користувацьких моделей

Для швидкого створення та навчання власної моделi можна скористатись
Teachable Machine [47] – складовою проєкту Google A.I. Experiment
(https://labs.google/ та https://experiments.withgoogle.com/), що надає
можливiсть будувати моделi для розв’язання задач класифiкацiї зображень,
звукiв та поз.

Для використання Teachable Machine студентам пропонується створити
новий або застосувати iснуючий облiковий запис Google, пiсля чого вони
можуть обрати тип моделi, яку вони бажають створити. Доступнi три типи
моделей:

модель розпiзнавання зображень дозволяє iдентифiкувати об’єкти на
фотографiях;

модель розпiзнавання звукiв дозволяє розпiзнавати аудiозаписи;

модель розпiзнавання поз дозволяє розпiзнавати рухи тiла.

Пiсля вибору типу моделi необхiдно надати данi для її навчання у формi
фотографiй, аудiозаписiв або вiдео. Пiсля надання даних Teachable Machine
розпочне навчання моделi, що може зайняти певний час, залежно вiд обсягу та
складностi навчання. Пiсля навчання моделi її доцiльно перевiрити на
правильнiсть розпiзнавання даних. Якщо модель виявиться недостатньо точною,
можна надати додатковi данi для її покращення. Пiсля успiшного навчання
та перевiрки моделi її можна експортувати для використання в iнших
проектах.

Завдяки широкому функцiоналу Teachable Machine ми можемо розпiзнавати
звуки, пози, обличчя чи будь-якi зображення. Але для початку її застосування
необхiдно пiдготувати фотографiї та аудiозаписи для подальших експериментiв,
потiм виконати навчання обраної моделi та застосувати її безпосередньо у
веб-середовищi.

Натискаючi кнопку Get Started на головнiй сторiнцi, переходимо в нове
вiкно, в якому пропонується скористатись шаблоном проєкту або створити
власний.

Створюючи власний проєкт, маємо обрати, яку модель будемо
використовувати. Зупиняємо свiй вибiр на Image Project та натискаємо
Standard image model. В якостi джерела зображень пропонуємо студентам
застосувати власнi веб-камери та виконати серiю знiмкiв голови з рiзними
ракурсами (кутами нахилу та повороту), якi збережемо у заздалегiдь
заготовлений каталог. Вiзьмемо кiлька рiзних зображень вiд кожного учасника
експерименту та роздiлимо на класи, зазначивши вiдповiднi прiзвища
(рис. 12).

Рис. 12: Розподiл зображень по класах.

Для кожного класу зображень є ймовiрнiсть того, що певне зображення
належить саме до цього класу. Пропонуємо студентам налаштувати додатковi
параметри навчання, такi як кiлькiсть iтерацiй та швидкiсть навчання
моделi.

Далi переходимо власне до навчання моделi – на цьому етапi усi зображення
переводяться у вiдповiднi числовi тензори. Останнiй крок – експериментуємо,
обираючи зображеннi рiзних людей (не лише учасникiв експерименту) та
обговорюючи результати розпiзнавання (рис. 13).

Рис. 13: Результати роботи моделi розпiзнавання зображень.

5.3 Iнтеграцiя користувацьких моделей

Бiблiотеки, що входять до складу Teachable Machine, базуються на моделях
TensorFlow: MobileNet для класифiкацiї зображень [8], Speech Commands для
класифiкацiї звукiв [13] та PoseNet для класифiкацiї поз тiла [12].

Вiдповiдно, побудована модель класифiкацiї осiб може бути експортована та
застосована так само, як i ранiше використанi моделi опорних точок обличчя та
пози рук. Натискання кнопки Export Model надає можливiсть експорту у
форматах:

TensorFlow.js – розмiщення моделi за посиланнями
https://teachablemachine.withgoogle.com/models/[...] або
завантаження моделi та коду JavaScript i p5.js (рис. 14);

TensorFlow – завантаження коду Python та моделi у форматах h5 (Keras)
та Savedmodel (TensorFlow);

TensorFlow Lite – завантаження моделi у форматi tflite для пристроїв
IoT на базi Android та Coral.

Рис. 14: Завантаження моделi для TensorFlow.js.

Архiв з моделлю для TensorFlow.js мiстить 3 файли:

metadata.json – текстовий файл
у форматi JSON, що мiстить вiдомостi про номери версiй TensorFlow.js
(tfjsVersion), Teachable Machine (tmVersion), бiблiотеки зi складу
Teachable Machine (packageVersion) та її iменi (packageName – у нашому
випадку це @teachablemachine/image), дату створення (timeStamp)
та iм’я моделi (modelName – за замовчанням tm-my-image-model),
розмiр зображення (imageSize – усi зображення приводяться до одного
розмiру) та категорiї (labels), що використовувались для розмiтки
даних: Музиченко, Єгорова, Семерiков;

model.json – текстовий файл у форматi JSON, що мiстить вiдомостi про
архiтектуру нейронної мережi (modelTopology);

weights.bin – бiнарний файл, що мiстить ваговi коефiцiєнти нейронної
мережi.

При експортi моделей пропонується тестовий код для їх перевiрки, з якого
можна дiзнатись, як пiдключити бiблiотеку tmImage та завантажити модель
викликом load, параметрами якого є шлях до файлiв архiтектури та метаданих
моделi – model.json та metadata.json.

Пiсля завантаження моделi викликом методу getTotalClasses можна
визначити кiлькiсть категорiй, що розрiзнятиме модель – у нашому випадку це
значення, збережене у maxPredictions, дорiвнюватиме трьом.

Так само, як i ранiше, кожний десятий кадр передаємо моделi для аналiзу
викликом predict, що повертає масив з двох об’єктiв, що мiстять вiдомостi про
категорiю (className) та ймовiрнiсть того, що зображення вiдноситься до неї
(probability) – рядок iз вiдомостями про них й вiзуалiзується.

Iз рис. 15 можна побачити, що зображення лiворуч iдентифiкується
правильно попри змiну фону порiвняно iз набором зображень, на яких
виконувалось навчання (рис. 12), а зображення праворуч – неправильно.

Рис. 15: Реалiзацiя розпiзнавання осiб.

6 Висновки

Виконане розв’язання проблеми розробки методики навчання розробки
доповненої реальностi для Web iз iнтегрованими моделями машинного навчання
надало можливiсть отримати такi висновки:

1.

Бiблiометричний аналiз джерел за базами Crossref (19 документiв 2017–2022
рр.) та Scopus (93 документи 2001–2023 рр.) надав можливiсть виокремити
основнi концепти дослiдження, згрупованi у 4 кластери:

(а)

перший кластер пов’язує базовi концепти доповненої реальностi
в освiтi: доповнену та вiртуальну реальнiсть iз освiтою (зокрема,
медичною) та навчанням людей, зокрема, iз використанням
смартфонiв;

(б)

другий кластер пов’язує концепти
проєктування навчального середовища: викладання, iнженерну
освiту, комп’ютерно зорiєнтоване викладання, електронне навчання,
студентiв, мобiльне навчання, навчальнi середовища, IКТ навчання
та курикулуми;

(в)

третiй кластер пов’язує
концепти реалiзацiї iмерсивного навчального середовища: веб-сайти,
мотивацiю, системи навчання, iнтерактивнi навчальнi середовища,
AR-додатки та технологiї доповненої реальностi;

(г)

четвертий кластер мiстить концепт дистанцiйної
освiти, пов’язаний у першому кластерi iз концептами доповненої та
вiртуальної реальностi i концептом освiти (включно з медичною), у
другому – iз концептами студента, iнженерної освiти, IКТ навчання,
електронного навчання та курикулуму, та у третьому – iз концептом
веб-сайту.

Аналiз розподiлу концептiв за густиною зв’язкiв та часом надав можливiсть
датувати появу рiзних концептiв та вiдслiдкувати їх розвиток вiд освiтнiх
застосувань iнтерфейсiв користувача до його аугментацiї.

2.

Дiбранi засоби розробки доповненої реальностi для Web утворюють три
групи:

(а)

основнi засоби:

веб-сервер Web Server for Chrome надає необхiдну повну
функцiональнiсть без потреби встановлення, що задовольняє
вимогам простоти та мобiльностi;

засiб перенаправлення трафiку ngrok надає можливiсть доступу
до веб-сервера, який знаходиться за брандмауером (на
учнiвському або вчительському комп’ютерi), що створює умови
для спiльної роботи у вiддаленому режимi;

вiддалений налагоджувач
RemoteJS надає можливiсть виконувати налагодження програм
мовою JavaScript на мобiльних пристроях, послуговуючись
десктопними браузерами;

(б)

графiчна бiблiотека Three.js є високорiвневою реалiзацiєю
крос-платформного стандарту вiдображення WebGL мовою JavaScript, що
надає можливiсть працювати iз графiчними абстракцiями високого
рiвня;

(в)

бiблiотека для доповненої реальностi MindAR надає можливiсть роботи iз
природними зображенням в якостi якорiв доповненої реальностi та
мiстить у своєму складi бiблiотеки Three.js i TensorFlow.js – останнє є
ключовим для iнтеграцiї моделей машинного навчання, створених за
допомогою TensorFlow, iз WebAR додатками, побудованими iз
використанням MindAR.

3.

У процесi розробки та апробацiї методики розробки WebAR додаткiв для
вiдстеження обличчя обґрунтовано доцiльнiсть спiльного застосування
моделi MediaPipe Face Mesh – згорткової нейронної мережi, що визначає на
обличчi 468 тривимiрних опорних точок, та бiблiотеки MindAR, що надає
можливiсть визначити будь-яку з них в якостi якоря. Показано, що повне
застосування моделi MediaPipe Face Mesh у бiблiотецi MindAR реалiзовано у
виглядi маски для обличчя, що динамiчно генерується з постiйним
оновленням геометрiї – типу доповненої реальностi, пов’язаного з накладання
зображень на всi опорнi точки обличчя людини. Подано приклади
застосування масок для обличчя з метою створення ефектiв макiяжу,
татуювання тощо.

4.

Методика iнтеграцiї моделей машинного навчання у WebAR додатки
передбачає опанування трьох основних крокiв:

(а)

перший крок – iнтеграцiя стандартних моделей – передбачає
ознайомлення iз попередньо навченими моделями TensorFlow.js, що
можуть бути застосованi у WebAR додатках. Показано доцiльнiсть
розгляду моделi handpose.js, що використовується для визначення

кистi руки та її складових, продемонстровано основну проблему
WebAR – суттєве падiння продуктивностi при застосуваннi моделi до
кожного кадру, та запропоновано спосiб її розв’язання. У результатi
першого кроку створюється WebAR додаток для жестового
управлiння розмiром та положенням вiртуального об’єкта;

(б)

другий крок – розробка користувацьких моделей – передбачає
створення та навчання власних моделей TensorFlow з використанням
Teachable Machine, яка надає можливiсть будувати моделi для
розв’язання задач класифiкацiї зображень, звукiв та поз;

(в)

третiй крок – iнтеграцiя користувацьких моделей – виконується
шляхом експорту побудованої за допомогою Teachable Machine
моделi класифiкацiї облич та модифiкацiї WebAR додатку,
розробленого на першому кроцi: завантажується власна модель,
визначається кiлькiсть категорiй, що вона класифiкуватиме, а
об’єктом доповненої реальностi стають вiдомостi про кожну iз
категорiй та ймовiрностi того, що зображення з веб-камери
вiдноситься до них. Останнє надає можливiсть для обговорення
питань помилок класифiкацiї та їх залежностi як вiд налаштування
параметрiв навчання моделi, так i способу подання тестових
зображень WebAR додатку.

Проведене дослiдження не вичерпує усiх складових поставленої проблеми –
так, потребують подальшого дослiдження:

iсторiя та перспективи розвитку WebAR у освiтi;

методика спiльного використання рiзних середовищ моделювання
нейронних мереж;

розвиток бiблiотек WebAR, зокрема – у напрямi реалiзацiї повсюдної
доповненої реальностi;

спiввiдношення реального та вiртуального у навчаннi в умовах пандемiї,
стихiйного лиха та вiйськового конфлiкту.

References

[1]    LATICE ’14: Proceedings of the 2014 International Conference on
Teaching and Learning in Computing and Engineering. IEEE Computer
Society, USA (2014), ISBN 9781479935925, URL
https://www.computer.org/csdl/proceedings/latice/2014/12OmNrAdsty

[2]    Proceedings of 2015 International Conference on Interactive Mobile
Communication Technologies and Learning,
IMCL 2015. Institute of Electrical and Electronics Engineers Inc. (2015),
https://doi.org/10.1109/IMCL37494.2015

[3]    Innovative Technologies and Learning: 4th International Conference,
ICITL 2021, Virtual
Event, November 29 – December 1, 2021, Proceedings, Lecture Notes in
Computer Science, vol. 13117. Springer International Publishing (2021),
ISBN 9783030915407, https://doi.org/10.1007/978-3-030-91540-7

[4]    Preface. Journal of Physics: Conference Series 1860(1), 011001 (mar
2021), https://doi.org/10.1088/1742-6596/1860/1/011001

[5]    Face Landmarks Detection (2023), URL
https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection

[6]    Face reference assets for Meta Spark Studio (2023), URL
https://spark.meta.com/learn/articles/people-tracking/face-reference-assets

[7]    Hand Pose Detection (2023), URL
https://github.com/tensorflow/tfjs-models/tree/master/hand-pose-detection

[8]    MobileNet (2023), URL
https://github.com/tensorflow/tfjs-models/tree/master/mobilenet

[9]    The face mask template in Adobe® Photoshop® (2023), URL
https://spark.meta.com/learn/articles/creating-and-prepping-assets/the-face-mask-template-in-Adobe

[10]    AR.js Documentation (2024), URL
https://ar-js-org.github.io/AR.js-Docs/

[11]    Find Pre-trained Models | Kaggle (2024), URL
https://www.kaggle.com/models

[12]    Pose Detection in the Browser: PoseNet Model (2024), URL
https://github.com/tensorflow/tfjs-models/tree/master/posenet

[13]    Speech Command Recognizer (2024), URL
https://github.com/tensorflow/tfjs-models/tree/master/speech-commands

[14]    TensorFlow (2024), URL https://www.tensorflow.org/

[15]    TensorFlow.js | Machine Learning for JavaScript Developers (2024),
URL https://www.tensorflow.org/js

[16]    TensorFlow.js models (2024), URL
https://www.tensorflow.org/js/models

[17]    Three.js – JavaScript 3D Library (2024), URL https://threejs.org/

[18]    Al-Gharaibeh, J., Jeffery, C.: Portable non-player character tutors with
quest activities. In: 2010 IEEE Virtual Reality Conference (VR), pp.
253–254 (2010), https://doi.org/10.1109/VR.2010.5444779

[19]    An, J., Poly, L.P., Holme, T.A.: Usability
Testing and the Development of an Augmented Reality Application for
Laboratory Learning. Journal of Chemical Education 97, 97–105 (2020),
https://doi.org/10.1021/acs.jchemed.9b00453

[20]    Antoniou, P.E., Dafli, E., Arfaras, G., Bamidis, P.D.: Versatile
Mixed Reality Educational Spaces; A Medical Education Implementation
Case. In: Georgalas, N., Jin, Q., Garcia-Blas, J., Carretero, J.,
Ray, I. (eds.) Proceedings - 2016 15th International Conference on

Ubiquitous Computing and Communications and 2016 8th International
Symposium on Cyberspace and Security, IUCC-CSS 2016, pp.
132–137, Institute of Electrical and Electronics Engineers Inc. (2017),
https://doi.org/10.1109/IUCC-CSS.2016.026

[21]    Antoniou, P.E., Dafli, E., Arfaras, G., Bamidis, P.D.: Versatile
mixed reality medical educational spaces; requirement analysis from
expert users. Personal and Ubiquitous Computing 21, 1015–1024 (2017),
https://doi.org/10.1007/s00779-017-1074-5

[22]    Anwar, S., LeClair, J.,
Peskin, A.: Development Of Nanotechnology And Power Systems Options
For An On Line Bseet Degree. In: 2010 Annual Conference & Exposition,
pp. 15.420.1 – 15.420.10, ASEE Conferences, Louisville, Kentucky (June
2010), https://doi.org/10.18260/1-2--15776

[23]    Arteaga, J.V., Gravini-Donado, M.L., Riva,
L.D.Z.: Digital Technologies for Heritage Teaching: Trend Analysis in New
Realities. International Journal of Emerging Technologies in Learning 16,
132–148 (2021), https://doi.org/10.3991/ijet.v16i21.25149

[24]    Arvanitis, T.N., Petrou, A., Knight, J.F., Savas, S., Sotiriou, S.,
Gargalakos, M., Gialouri, E.: Human factors and qualitative pedagogical
evaluation of a mobile augmented reality system for science education used
by learners with physical disabilities. Personal and Ubiquitous Computing
13, 243–250 (2009), https://doi.org/10.1007/s00779-007-0187-7

[25]    Atmaca, H.T., Terzi, O.S.: Building a Web-Augmented Reality
application for demonstration of kidney pathology for veterinary
education. Polish Journal of Veterinary Sciences 24, 345–350 (2021),
https://doi.org/10.24425/pjvs.2021.137671

[26]    Baashar, Y., Alkawsi, G., Ahmad, W.N.W., Alhussian, H., Alwadain,
A., Capretz, L.F., Babiker, A., Alghail, A.: Effectiveness of Using
Augmented Reality for Training in the Medical Professions: Meta-analysis.
JMIR Serious Games 10, e32715 (2022), https://doi.org/10.2196/32715

[27]    Bhavika, K., Martin, J., Ardit, B.: Technology will never
replace hands on surgical training in plastic surgery. Journal of

Plastic, Reconstructive and Aesthetic Surgery 75, 439–488 (2022),
https://doi.org/10.1016/j.bjps.2021.11.034

[28]    Bradford, H.M., Farley, C.L., Escobar, M., Heitzler, E.T., Tringali,
T., Walker, K.C.: Rapid Curricular Innovations During COVID-19
Clinical Suspension: Maintaining Student Engagement with Simulation
Experiences. Journal of Midwifery and Women’s Health 66, 366–371
(2021), https://doi.org/10.1111/jmwh.13246

[29]    Brewster, S., Murray-Smith, R. (eds.): Haptic Human-Computer
Interaction: First International Workshop, Glasgow, UK, August 31 -
September 1, 2000, Proceedings, Lecture Notes in Computer Science, vol.
2058. Springer-Verlag, Berlin Heidelberg (2001), ISBN 9783540445890,
https://doi.org/10.1007/3-540-44589-7

[30]    Brunzini, A., Papetti, A., Serrani, E.B., Scaf`a, M., Germani, M.: How
to Improve Medical Simulation Training: A New Methodology Based on
Ergonomic Evaluation. In: Karwowski, W., Ahram, T., Nazir, S. (eds.)
Advances in Human Factors in Training, Education, and Learning Sciences,
Advances in Intelligent Systems and Computing, vol. 963, pp. 145–155,
Springer International Publishing, Cham (2020), ISBN 978-3-030-20135-7,
https://doi.org/10.1007/978-3-030-20135-7_14

[31]    Budiharto, W., Gunawan, A.A.S., Wulandhari, L.A., Williem, Faisal,
Sutoyo, R., Meiliana, Suryani, D., Arifin, Y. (eds.): The 3rd International
Conference on Computer Science and Computational Intelligence (ICCSCI
2018) : Empowering Smart Technology in Digital Era for a Better
Life, Procedia Computer Science, vol. 135. Elsevier B.V. (2018), URL
https://www.sciencedirect.com/journal/procedia-computer-science/vol/135/suppl/C

[32]    Burian, B.K., Ebnali, M., Robertson, J.M., Musson, D., Pozner, C.N.,
Doyle, T., Smink, D.S., Miccile, C., Paladugu, P., Atamna, B., Lipsitz, S.,
Yule, S., Dias, R.D.: Using extended reality (XR) for medical training and
real-time clinical support during deep space missions. Applied Ergonomics
106, 103902 (2023), https://doi.org/10.1016/j.apergo.2022.103902

[33]    Cardenas-Sainz, B., Zatarain-Cabada, R., Barron-Estrada, M.,
Chavez-Echeagaray, M., Cabada, R.: FisicARtivo: Design of a learning
tool for physics education using web-based XR technology. In: 2022 IEEE
Mexican International Conference on Computer Science, ENC 2022 -

Proceedings, Institute of Electrical and Electronics Engineers Inc. (2022),
https://doi.org/10.1109/ENC56672.2022.9882930

[34]    Centre for Science and Technology Studies, Leiden University, The
Netherlands: VOSviewer - Visualizing scientific landscapes (2024), URL
https://www.vosviewer.com/

[35]    Coma-Tatay, I., Casas-Yrurzum, S., Casanova-Salas,
P., Fernáandez-Marín, M.: FI-AR learning: a web-based platform for
augmented reality educational content. Multimedia Tools and Applications
78, 6093–6118 (2019), https://doi.org/10.1007/s11042-018-6395-5

[36]    Cortés Rodríguez, F., Dal Peraro, M., Abriata, L.A.: Online tools to
easily build virtual molecular models for display in augmented and virtual
reality on the web. Journal of Molecular Graphics and Modelling 114,
108164 (2022), https://doi.org/10.1016/j.jmgm.2022.108164

[37]    Coughlin, T.: Impact of COVID-19 on the Consumer Electronics
Market. IEEE Consumer Electronics Magazine 10, 58–59 (2021),
https://doi.org/10.1109/MCE.2020.3016753

[38]    Crandall, P.G., Engler III, R.K., Beck, D.E., Killian, S.A., O’Bryan,
C.A., Jarvis, N., Clausen, E.: Development of an Augmented Reality Game
to Teach Abstract Concepts in
Food Chemistry. Journal of Food Science Education 14(1), 18–23 (2015),
https://doi.org/https://doi.org/10.1111/1541-4329.12048

[39]    Dar, S.A.: Mobile library initiatives: a new way to revitalize the
academic library settings. Library Hi Tech News 36, 15–21 (2019),
https://doi.org/10.1108/LHTN-05-2019-0032

[40]    Demir, I.: Interactive web-based hydrological simulation system as an
education platform. In: Rizzoli, A.E., Quinn, N.W.T., Ames, D.P. (eds.)
Proceedings - 7th International Congress on Environmental Modelling and
Software: Bold Visions for Environmental Modeling, iEMSs 2014, vol. 2,
pp. 910–912, International Environmental Modelling and Software Society
(2014), https://doi.org/10.17077/aseenmw2014.1008

[41]    Dunkel, L., Fernandez-Luque, L., Loche, S., Savage, M.O.: Digital
technologies to improve the precision of paediatric growth disorder
diagnosis and management. Growth Hormone and IGF Research 59,
101408 (2021), https://doi.org/10.1016/j.ghir.2021.101408

[42]    ErИcag, E., Yasakc, A.: The Perception Scale for the 7E Model-Based
Augmented Reality Enriched Computer
Course (7EMAGBAЈO): Validity and Reliability Study. Sustainability 14,
12037 (2022), https://doi.org/10.3390/su141912037

[43]    Farella, M., Taibi, D., Arrigo, M., Todaro, G., Fulantelli, G., Chiazzese,
G.: An Augmented Reality Mobile Learning Experience Based on Treasure
Hunt Serious Game. In: Busch, C., Steinicke, M., Friess, R., Wendler,
T. (eds.) Proceedings of the European Conference on e-Learning, ECEL,
pp. 148–154, Academic Conferences and Publishing International Limited
(2021), https://doi.org/10.34190/EEL.21.109

[44]    Faridi, E., Ghaderian, A., Honarasa, F., Shafie, A.: Next generation
of chemistry and biochemistry conference posters: Animation, augmented
reality, visitor statistics,
and visitors’ attention. Biochemistry and Molecular Biology Education 49,
619–624 (2021), https://doi.org/10.1002/bmb.21520

[45]    Farra, S., Hodgson, E., Miller, E., Timm, N., Brady, W., Gneuhs, M.,
Ying, J., Hausfeld, J., Cosgrove, E., Simon, A., Bottomley, M.: Effects of
Virtual Reality Simulation on Worker Emergency Evacuation of Neonates.
Disaster Medicine and Public Health Preparedness 13, 301–308 (2019),
https://doi.org/10.1017/dmp.2018.58

[46]    Ferguson, J., Mentzelopoulos, M., Protopsaltis, A., Economou, D.:
Small and flexible web based framework for teaching QR and AR mobile
learning application development. In: Proceedings of 2015 International
Conference on Interactive Mobile Communication Technologies and
Learning, IMCL 2015, pp. 383–385, Institute of Electrical and Electronics
Engineers Inc. (2015), https://doi.org/10.1109/IMCTL.2015.7359624

[47]    Google: Teachable Machine (2017), URL
https://teachablemachine.withgoogle.com/

[48]    Google LLC: Face landmark detection guide |
MediaPipe | Google for Developers (2023), URL
https://developers.google.com/mediapipe/solutions/vision/face_landmarker/

[49]    Gordon,
N., Brayshaw, M., Aljaber, T.: Heuristic Evaluation for Serious Immersive
Games and M-instruction. In: Zaphiris, P., Ioannou, A. (eds.) Learning
and Collaboration Technologies, Lecture Notes in Computer Science, vol.
9753, pp. 310–319, Springer International Publishing, Cham (2016), ISBN
978-3-319-39483-1, https://doi.org/10.1007/978-3-319-39483-1_29

[50]    Hai-Jew, S.: Adult Coloring Books as Emotional Salve/Stress Relief,
Tactual-Visual Learning: An Analysis from Mass-Scale Social Imagery. In:
Common Visual Art in a Social Digital Age, pp. 171–186, Nova Science
Publishers, Inc. (2022)

[51]    Harun, Tuli, N., Mantri, A.: Experience Fleming’s rule in
electromagnetism using augmented reality: Analyzing impact on
students learning. Procedia Computer Science 172, 660–668 (2020),
https://doi.org/10.1016/j.procs.2020.05.086

[52]    Hensen, B., Koren, I., Klamma, R., Herrler, A.: An Augmented
Reality Framework for Gamified Learning. In: Hancke, G., Spaniol,
M., Osathanunkul, K., Unankard, S., Klamma, R. (eds.) Advances in
Web-Based Learning – ICWL 2018, Lecture Notes in Computer Science,
vol. 11007, pp. 67–76, Springer International Publishing, Cham (2018),
ISBN 978-3-319-96565-9, https://doi.org/10.1007/978-3-319-96565-9_7

[53]    Hoog, T.G., Aufdembrink, L.M., Gaut, N.J., Sung, R.J., Adamala,
K.P., Engelhart, A.E.: Rapid deployment of smartphone-based augmented
reality tools for field and online education in structural biology.
Biochemistry and Molecular Biology Education 48, 448–451 (2020),
https://doi.org/10.1002/bmb.21396

[54]    Huang, L.: Chemistry Apps on Smartphones and Tablets. In:
García-Martínez, J., Serrano-Torregrosa, E. (eds.) Chemistry Education,
chap. 25, pp. 621–650, John Wiley & Sons, Ltd (2015), ISBN
9783527679300, https://doi.org/10.1002/9783527679300.ch25

[55]    Huang, T.C.: Seeing creativity in an augmented experiential learning
environment. Universal Access in the Information Society 18, 301–313
(2019), https://doi.org/10.1007/s10209-017-0592-2

[56]    Ibanez, M.B., Di-Serio, A., Villaran-Molina, D., Delgado-Kloos, C.:
Augmented Reality-Based Simulators as Discovery Learning Tools: An
Empirical Study. IEEE Transactions on Education 58, 208–213 (2015),
https://doi.org/10.1109/TE.2014.2379712

[57]    Ibáñez, M.B., Peláez, J., Kloos, C.D.: Using an Augmented
Reality Geolocalized Quiz Game as an Incentive to Overcome
Academic Procrastination. In: Auer, M.E., Tsiatsos, T. (eds.) Mobile
Technologies and Applications for the Internet of Things, Advances
in Intelligent Systems and Computing, vol. 909, pp. 175–184,
Springer International Publishing, Cham (2019), ISBN 978-3-030-11434-3,
https://doi.org/10.1007/978-3-030-11434-3_21

[58]    Ibáñez, M., Uriarte Portillo, A., Zatarain Cabada, R., Barráon, M.:
Impact of augmented reality technology on academic achievement and
motivation of students from public and private Mexican schools. A case
study in a middle-school geometry course. Computers and Education 145,
103734 (2020), https://doi.org/10.1016/j.compedu.2019.103734

[59]    Ibáñez,
M.B., Di Serio, A., Villarán, D., Delgado Kloos, C.: Experimenting
with electromagnetism using augmented reality: Impact on flow student
experience and educational effectiveness. Computers and Education 71,
1–13 (2014), https://doi.org/10.1016/j.compedu.2013.09.004

[60]    Jara, C.A., Candelas, F.A., Torres, F.: Internet virtual and remote
control interface for robotics education. In: Developments in Higher
Education, pp. 136–154, Nova Science Publishers, Inc. (2009)

[61]    Jung, K., Nguyen, V.T., Yoo, S.C., Kim, S., Park, S., Currie, M.:
Palmitoar: The last battle of the U.S. Civil war reenacted using augmented
reality. ISPRS International Journal of Geo-Information 9, 75 (2020),
https://doi.org/10.3390/ijgi9020075

[62]    Kang, B., Heo, J., Choi, H.H.S., Lee, K.H.: 2030 Toy Web of the
Future. In: Kim, S., Jung, J.W., Kubota, N. (eds.) Soft Computing in
Intelligent Control, Advances in Intelligent Systems and Computing, vol.
272, pp. 69–75, Springer International Publishing, Cham (2014), ISBN
978-3-319-05570-1, https://doi.org/10.1007/978-3-319-05570-1_8

[63]    Karas, S.I., Grakova, E.V., Balakhonova, M.V., Arzhanik, M.B.,
Kara-Sal, E.E.: Distance learning in cardiology: The use of multimedia
clinical diagnostic tasks. Russian Journal of Cardiology 25, 187–194
(2020), https://doi.org/10.15829/1560-4071-2020-4116

[64]    Karayilan, M., McDonald, S.M., Bahnick, A.J., Godwin, K.M., Chan,
Y.M., Becker, M.L.:
Reassessing Undergraduate Polymer Chemistry Laboratory Experiments
for Virtual Learning Environments. Journal of Chemical Education 99,
1877–1889 (2022), https://doi.org/10.1021/acs.jchemed.1c01259

[65]    Katika, T., Bolierakis, S.N., Vasilopoulos, E., Antonopoulos, M.,
Tsimiklis, G., Karaseitanidis, I., Amditis, A.: Coupling AR with Object
Detection Neural Networks for End-User Engagement. In: Zachmann, G.,
Alcañiz Raya, M., Bourdot, P., Marchal, M., Stefanucci, J., Yang, X. (eds.)
Virtual Reality and Mixed Reality, Lecture Notes in Computer Science,
vol. 13484, pp. 135–145, Springer International Publishing, Cham (2022),
ISBN 978-3-031-16234-3, https://doi.org/10.1007/978-3-031-16234-3_8

[66]    Kazanidis, I., Pellas, N., Christopoulos, A.: A learning analytics
conceptual framework for augmented reality-supported educational
case studies. Multimodal Technologies and Interaction 5, 9 (2021),
https://doi.org/10.3390/mti5030009

[67]    Klavins, A.: 9 ideas for creating tech-infused
augmented reality T-shirts (2021), URL
https://overlyapp.com/blog/9-ideas-for-creating-tech-infused-augmented-reality-t-shirts/

[68]    Kobayashi, T., Sasaki, H., Toguchi, A., Mizuno, K.: A discussion
on web-based learning contents with the AR technology and its
authoring tools to improve students’ skills in exercise courses. In:
Mohd Ayub, A.F., Kashihara, A., Matsui, T., Liu, C.C., Ogata, H.,
Kong, S.C. (eds.) Work-In-Progress Poster - Proceedings of the 22nd

International Conference on Computers in Education, ICCE 2014, pp.
34–36, Asia-Pacific Society for Computers in Education (2014)

[69]    Le, H., Nguyen, M.: An Online Platform for Enhancing Learning
Experiences with Web-Based Augmented Reality and Pictorial Bar Code.
In: Geroimenko, V. (ed.) Augmented Reality in Education: A New
Technology for Teaching and Learning, pp. 45–57, Springer Series on
Cultural Computing, Springer International Publishing, Cham (2020),
ISBN 978-3-030-42156-4, https://doi.org/10.1007/978-3-030-42156-4_3

[70]    Liu, E., Cai, S., Liu, Z., Liu, C.: WebART: Web-based Augmented
Reality Learning Resources Authoring Tool and Its User Experience Study
among Teachers. IEEE Transactions on Learning Technologies 16, 53–65
(2023), https://doi.org/10.1109/TLT.2022.3214854

[71]    Lou, D.: Two fast prototypes of web-based augmented reality
enhancement for books. Library Hi Tech News 36, 19–24 (2019),
https://doi.org/10.1108/LHTN-08-2019-0057

[72]    Lytridis, C., Tsinakos, A., Kazanidis, I.: ARTutor—An augmented
reality platform for interactive distance learning. Education Sciences 8, 6
(2018), https://doi.org/10.3390/educsci8010006

[73]    Maggi, L.O., Teixeira, J.M.X.N., Junior, J.R.F.E.S., Cajueiro, J.P.C.,
De Lima, P.V.S.G., De Alencar Bezerra, M.H.R., Melo, G.N.: 3DJPi:
An Open-Source Web-Based 3D Simulator for Pololu’s 3Pi Platform. In:
Proceedings - 2019 21st Symposium on Virtual and Augmented Reality,
SVR 2019, pp. 52–58, Institute of Electrical and Electronics Engineers Inc.
(2019), https://doi.org/10.1109/SVR.2019.00025

[74]    Marín, R., Sanz, P.J.: The Human-Machine Interaction through
the UJI Telerobotic Training System. In: Hamza, M.H. (ed.) IASTED
International Conference Robotics and Applications, RA 2003, June 25-27,
2003, Salzburg, Austria, pp. 47–52, IASTED/ACTA Press (2003)

[75]    Marín, R., Sanz, P.J., Del Pobil, A.P.: The UJI Online Robot: An
Education and Training Experience. Autonomous Robots 15, 283–297
(2003), https://doi.org/10.1023/A:1026220621431

[76]    MDN contributors: WebGL: 2D and 3D graphics for the web (2023),
URL https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

[77]    Narman, H.S., Berry, C., Canfield, A., Carpenter, L., Giese, J.,
Loftus, N., Schrader, I.: Augmented Reality for Teaching Data Structures
in Computer Science. In: 2020 IEEE Global Humanitarian Technology
Conference, GHTC 2020, p. 9342932, Institute of Electrical and Electronics
Engineers Inc. (2020), https://doi.org/10.1109/GHTC46280.2020.9342932

[78]    Nemirovsky, D.R., Garcia, A.J., Gupta, P., Shoen, E., Walia, N.:
Evaluation of Surgical Improvement of Clinical Knowledge Ops (SICKO),
an Interactive Training Platform. Journal of Digital Imaging 34, 1067–1071
(2021), https://doi.org/10.1007/s10278-021-00482-x

[79]    ngrok: Unified Application Delivery Platform for Developers (2024),
URL https://ngrok.com/

[80]    ngrok: Your Authtoken (2024), URL
https://dashboard.ngrok.com/get-started/your-authtoken

[81]    Nguyen, M., Le, H., Lai, P.M., Yan, W.Q.: A web-based
augmented reality platform using pictorial QR code for educational
purposes and beyond. In: Spencer, S.N. (ed.) Proceedings of the
ACM Symposium on Virtual Reality Software and Technology,
VRST, p. 3364793, Association for Computing Machinery (2019),
https://doi.org/10.1145/3359996.3364793

[82]    Nguyen, V.T., Jung, K., Dang, T.: BlocklyAR: A visual programming
interface for creating augmented reality experiences. Electronics 9, 1–20
(2020), https://doi.org/10.3390/electronics9081205

[83]    Nguyen, V.T., Jung, K., Yoo, S., Kim, S., Park, S., Currie,
M.: Civil war battlefield experience: Historical event simulation using
augmented reality technology. In: Proceedings - 2019 IEEE International
Conference on Artificial Intelligence and Virtual Reality, AIVR 2019, pp.
294–297, Institute of Electrical and Electronics Engineers Inc. (2019),
https://doi.org/10.1109/AIVR46125.2019.00068

[84]    Nordin, N., Markom, M.A., Suhaimi, F.A., Ishak, S.: A
Web-Based Campus Navigation System with Mobile Augmented Reality
Intervention. Journal of Physics: Conference Series 1997, 012038 (2021),
https://doi.org/10.1088/1742-6596/1997/1/012038

[85]    Nordin, N., Nordin, N.R.M., Omar, W.: REV-OPOLY: A Study on
Educational Board Game with
Webbased Augmented Reality. Asian Journal of University Education 18,
81–90 (2022), https://doi.org/10.24191/ajue.v18i1.17172

[86]    Proskura, S., Lytvynova, S., Kronda, O., Demeshkant, N.: Mobile
Learning Approach as a Supplementary Approach in the Organization
of the Studying Process in Educational Institutions. In: Sokolov, O.,
Zholtkevych, G., Yakovyna, V., Tarasich, Y., Kharchenko, V., Kobets,
V., Burov, O., Semerikov, S., Kravtsov, H. (eds.) Proceedings of
the 16th International Conference on ICT in Education, Research
and Industrial Applications. Integration, Harmonization and Knowledge
Transfer. Volume II: Workshops, Kharkiv, Ukraine, October 06-10, 2020,
CEUR Workshop Proceedings, vol. 2732, pp. 650–664, CEUR-WS.org
(2020), URL https://ceur-ws.org/Vol-2732/20200650.pdf

[87]    Proskura, S.L., Lytvynova, S.H.:
The approaches to Web-based education of computer science bachelors
in higher education institutions. CTE Workshop Proceedings 7, 609–625
(Mar 2020), https://doi.org/10.55056/cte.416

[88]    Redondo, E., Navarro, I., Sánchez, A., Fonseca, D.: Implementation
of Augmented Reality in “3.0 Learning” Methodology: Case Studies
with Students of Architecture Degree. In: Patru, B., Patru, M.,
Cmeciu, C. (eds.) Social Media and the New Academic Environment:
Pedagogical Challenges, pp. 391–413, IGI Global, Hershey, PA (2013),
https://doi.org/10.4018/978-1-4666-2851-9.ch019

[89]    Rollo, M.E., Aguiar, E.J., Williams, R.L., Wynne, K., Kriss, M.,
Callister, R., Collins, C.E.: eHealth technologies to support nutrition
and physical activity behaviors in diabetes self-management. Diabetes,
Metabolic Syndrome and Obesity: Targets and Therapy 9, 381–390 (2016),
https://doi.org/10.2147/DMSO.S95247

[90]    Ryan, G., Murphy, J., Higgins, M., McAuliffe, F., Mangina,
E.: Work-in-Progress-Development of a Virtual Reality Learning
Environment: VR Baby. In: Economou, D., Klippel, A., Dodds,
H., Pena-Rios, A., Lee, M.J.W., Beck, D., Pirker, J., Dengel, A.,
Peres, T.M., Richter, J. (eds.) Proceedings of 6th International
Conference of the Immersive Learning Research Network, iLRN 2020,
pp. 312–315, Institute of Electrical and Electronics Engineers Inc. (2020),
https://doi.org/10.23919/iLRN47897.2020.9155203

[91]    Rјnningsbakk, L., Wu, T.T., Sandnes, F.E., Huang, Y.M. (eds.):
Innovative Technologies and Learning: Second International Conference,
ICITL 2019, Tromsј, Norway, December 2–5, 2019, Proceedings, Lecture
Notes in Computer Science, vol. 11937. Springer International Publishing
(2019), ISBN 9783030353438, https://doi.org/10.1007/978-3-030-35343-8

[92]    Samat, C., Chaijaroen, S.: Design and Development of Constructivist
Augmented Reality (AR) Book Enhancing Analytical Thinking in
Computer Classroom. In: Rјnningsbakk, L., Wu, T.T., Sandnes,
F.E., Huang, Y.M. (eds.) Innovative Technologies and Learning,
Lecture Notes in Computer Science, vol. 11937, pp. 175–183,
Springer International Publishing, Cham (2019), ISBN 978-3-030-35343-8,
https://doi.org/10.1007/978-3-030-35343-8_19

[93]    Semerikov, S.O., Mintii, M.M., Mintii, I.S.: Review of the
course “Development of Virtual and Augmented Reality Software” for
STEM teachers: implementation results and improvement potentials.
In: Lytvynova, S.H., Semerikov, S.O. (eds.) Proceedings of the
4th International Workshop on Augmented Reality in Education
(AREdu 2021), Kryvyi Rih, Ukraine, May 11, 2021, CEUR Workshop
Proceedings, vol. 2898, pp. 159–177, CEUR-WS.org (2021), URL
http://ceur-ws.org/Vol-2898/paper09.pdf

[94]    Sendari, S., Wibawanto, S., Jasmine, J., Jiono, M., Puspitasari, P.,
Diantoro, M., Nur, H.: Integrating Robo-PEM with AR Application for
Introducing Fuel Cell Implementation. In: 7th International Conference on
Electrical, Electronics and
Information Engineering: Technological Breakthrough for Greater New
Life, ICEEIE 2021, Institute of Electrical and Electronics Engineers Inc.
(2021), https://doi.org/10.1109/ICEEIE52663.2021.9616683

[95]    Sepasgozar,
S.M.E.: Digital twin and web-based virtual gaming technologies for online
education: A case of construction management and engineering. Applied
Sciences 10, 4678 (2020), https://doi.org/10.3390/app10134678

[96]    Sharkey,
T., Twomey, R., Eguchi, A., Sweet, M., Wu, Y.C.: Need Finding for an
Embodied Coding Platform: Educators’ Practices and Perspectives. In:
Cukurova, M., Rummel, N., Gillet, D., McLaren, B., Uhomoibhi, J. (eds.)
International Conference on Computer Supported Education, CSEDU -
Proceedings, vol. 1, pp. 216–227, Science and Technology Publications,
Lda (2022), https://doi.org/10.5220/0011000200003182

[97]    Sharp, K., McCorvie, M., Wagner, M.: Sharing Hidden Histories: The
XRchaeology at Miller Grove, a Free African American Community in
Southern Illinois. Journal of African Diaspora Archaeology and Heritage
12(1), 5–31 (2023), https://doi.org/10.1080/21619441.2021.1902706

[98]    Shepiliev, D.S., Modlo, Y.O., Yechkalo, Y.V., Tkachuk, V.V., Mintii,
M.M., Mintii, I.S., Markova, O.M., Selivanova, T.V., Drashko, O.M.,
Kalinichenko, O.O., Vakaliuk, T.A., Osadchyi, V.V., Semerikov, S.O.:
WebAR development tools: An overview. CEUR Workshop Proceedings
2832, 84–93 (2020), URL http://ceur-ws.org/Vol-2832/paper12.pdf

[99]    Shepiliev, D.S., Semerikov, S.O., Yechkalo, Y.V., Tkachuk, V.V.,
Markova, O.M., Modlo, Y.O., Mintii, I.S., Mintii, M.M., Selivanova,
T.V., Maksyshko, N.K., Vakaliuk, T.A., Osadchyi, V.V., Tarasenko, R.O.,
Amelina, S.M., Kiv, A.E.: Development of career guidance quests using
WebAR. Journal of Physics: Conference Series 1840(1), 012028 (mar
2021), https://doi.org/10.1088/1742-6596/1840/1/012028

[100]    Smith, E., McRae, K., Semple, G., Welsh, H., Evans, D.,
Blackwell, P.: Enhancing Vocational Training in the Post-COVID
Era through Mobile Mixed Reality. Sustainability 13, 6144 (2021),
https://doi.org/10.3390/su13116144

[101]    Spasova, N., Ivanova, M.: Towards augmented reality technology
in CAD/CAM systems and engineering education. In: Roceanu, I.
(ed.) eLearning and Software for Education Conference, pp. 496–503,

National Defence University - Carol I Printing House (2020),
https://doi.org/10.12753/2066-026X-20-151

[102]    Syrovatskyi, O.V., Semerikov, S.O., Modlo, Y.O., Yechkalo, Y.V.,
Zelinska, S.O.: Augmented reality software design for educational purposes.
CEUR Workshop Proceedings 2292, 193–225 (2018), ISSN 16130073, URL
http://ceur-ws.org/Vol-2292/paper20.pdf

[103]    Tennakoon, D., Usmani, A.U., Usman, M., Vasileiou, A., Latchaev, S.,
Baljko, M., Khan, U.T., Perras, M.A., Jadidi, M.: Teaching Earth Systems
Beyond the Classroom: Developing a Mixed Reality (XR) Sandbox.
In: ASEE Annual Conference and Exposition, Conference Proceedings,
American Society for Engineering Education (2022)

[104]    Thabvithorn, C., Samat, C.: Development of Web-Based Learning
with Augmented Reality (AR) to Promote Analytical Thinking on
Computational Thinking for High School. In: Huang, Y.M., Cheng,
S.C., Barroso, J., Sandnes, F.E. (eds.) Innovative Technologies and
Learning, Lecture Notes in Computer Science, vol. 13449, pp. 125–133,
Springer International Publishing, Cham (2022), ISBN 978-3-031-15273-3,
https://doi.org/10.1007/978-3-031-15273-3_14

[105]    Tkachuk, V.V., Semerikov,
S.O., Yechkalo, Y.V., Markova, O.M., Mintii, M.M.: WebAR development
tools: comparative analysis. Physical and Mathematical Education (2(24))
(2020), https://doi.org/10.31110/2413-1571-2020-024-2-021

[106]    Toguchi, A., Sasaki, H., Mizuno, K., Shikoda, A.: Build a prototype of
new e-Learning contents by using the AR technology. In: IMSCI 2011 - 5th
International Multi-Conference on Society, Cybernetics and Informatics,
Proceedings, vol. 1, pp. 261–264, International Institute of Informatics and
Systemics, IIIS (2011)

[107]    Toguchi, A., Sasaki, H., Mizuno, K., Shikoda, A.: Development of
new e-Learning contents for improvement of laboratory courses by using
the AR technology. In: IMSCI 2012 - 6th International Multi-Conference
on Society, Cybernetics and Informatics, Proceedings, pp. 189–193,
International Institute of Informatics and Systemics, IIIS (2012)

[108]    TrackJS LLC: Remote JavaScript Debugger - RemoteJS (2022), URL
https://remotejs.com/

[109]    Tsiatsos, T., Auer, M.E. (eds.): 11th International Conference on
Interactive Mobile Communication Technologies and Learning, IMCL2017,
Advances in Intelligent Systems and Computing, vol. 725. Springer Verlag
(2018), https://doi.org/10.1007/978-3-319-75175-7

[110]    Tuli, N., Mantri, A., Sharma, S.: Impact of augmented reality tabletop
learning environment on learning
and motivation of kindergarten kids. AIP Conference Proceedings 2357,
040017 (2022), https://doi.org/10.1063/5.0080600

[111]    Turner, F., Welch, I.: The mixed reality toolkit as the next
step in the mass customization co-design experience. International
Journal of Industrial Engineering and Management 10, 191–199 (2019),
https://doi.org/10.24867/IJIEM-2019-2-239

[112]    Vahabzadeh, A., Keshav, N.U., Salisbury, J.P., Sahin, N.T.:
Improvement of Attention-Deficit/Hyperactivity Disorder Symptoms in
School-Aged Children, Adolescents, and Young Adults With Autism via
a Digital Smartglasses-Based Socioemotional Coaching Aid: Short-Term,
Uncontrolled Pilot Study. JMIR Mental Health 5, e25 (2018),
https://doi.org/10.2196/mental.9631

[113]    Villarán, D., Ibáñez, M.B., Kloos, C.D.: Augmented Reality-Based
Simulations Embedded in Problem Based Learning Courses. In: Conole,
G., Klobu&ccirc;ar, T., Rensing, C., Konert, J., Lavoué, E. (eds.) Design for
Teaching and
Learning in a Networked World, Lecture Notes in Computer Science, vol.
9307, pp. 540–543, Springer International Publishing, Cham (2015), ISBN
978-3-319-24258-3, https://doi.org/10.1007/978-3-319-24258-3_55

[114]    Wang, I., Nguyen,
M., Le, H., Yan, W., Hooper, S.: Enhancing Visualisation of Anatomical
Presentation and Education Using Marker-based Augmented Reality
Technology on Web-based Platform. In: Proceedings of AVSS 2018 - 2018
15th IEEE International Conference on Advanced Video and Signal-Based

Surveillance, p. 8639147, Institute of Electrical and Electronics Engineers
Inc. (2019), https://doi.org/10.1109/AVSS.2018.8639147

[115]    Westwood, J.D., Westwood, S.W., FellЈander-Tsai, L., Fidopiastis,
C.M., Liu, A., Senger, S., Vosburgh, K.G. (eds.): Medicine
Meets Virtual Reality 22 - NextMed, MMVR 2016, Los Angeles,
California, USA, April 7-9, 2016, Studies in Health Technology and
Informatics, vol. 220. IOS Press (2016), ISBN 978-1-61499-624-8, URL
http://ebooks.iospress.nl/volume/medicine-meets-virtual-reality-22-nextmed-mmvr22

[116]    Wongchiranuwat, S., Samat, C.: Synthesis of theoretical framework
for augmented reality learning environment to promote creative thinking
on topic implementation of graphic design for grade 9 students. In:
Wong, S.L., Barrera, A.G., Mitsuhara, H., Biswas, G., Jia, J., Yang,
J.C., Banawan, M.P., Demirbilek, M., Gaydos, M., Lin, C.P., Shon, J.G.,
Iyer, S., Gulz, A., Holden, C., Kessler, G., Rodrigo, M.M.T., Sengupta,
P., Taalas, P., Chen, W., Murthy, S., Kim, B., Ochoa, X., Sun, D.,
Baloian, N., Hoel, T., Hoppe, U., Hsu, T.C., Kukulska-Hulme, A., Chu,
H.C., Gu, X., Chen, W., Huang, J.S., Jan, M.F., Wong, L.H., Yin,
C. (eds.) ICCE 2016 - 24th International Conference on Computers in
Education: Think Global Act Local - Main Conference Proceedings, pp.
639–641, Asia-Pacific Society for Computers in Education (2016), URL
https://files.eric.ed.gov/fulltext/EJ1211500.pdf

[117]
Yang, S., Mei, B., Yue, X.: Mobile Augmented Reality Assisted Chemical
Education: Insights from Elements 4D. Journal of Chemical Education 95,
1060–1062 (2018), https://doi.org/10.1021/acs.jchemed.8b00017

[118]    Yuen, H.: HiuKim Yuen (2023), URL
https://www.youtube.com/channel/UC-JyA1Z1-p0wgxj5WEX56wg/featured

[119]    Yuen, H.: MindAR (2023), URL
https://hiukim.github.io/mind-ar-js-doc/

[120]    Zatarain-Cabada, R., Barrón-Estrada, M., Cárdenas-Sainz, B.A.,
Chavez-Echeagaray, M.E.: Experiences of web-based extended reality
technologies for physics education. Computer Applications in Engineering
Education 31(1), 63–82 (2023), https://doi.org/10.1002/cae.22571

[121]    Zitzmann, N.U., Matthisson, L., Ohla, H., Joda, T.: Digital
undergraduate education in dentistry: A systematic review. International
Journal of Environmental Research and Public Health 17, 3269 (2020),
https://doi.org/10.3390/ijerph17093269

Copyright (c) 2024 Serhiy O. Semerikov, Mykhailo V. Foki, Dmytro S. Shepiliev, Mykhailo M. Mintii, Iryna S. Mintii, Olena H. Kuzminska

This work is licensed under a Creative Commons Attribution 4.0 International License.

issn

ISSN 2708-4604 (print)
ISSN 2708-4612 (online)

openaccess

doaj

Make a Submission

Make a Submission

Keywords

acns

ACNS Journals Ring

Educational Technology Quarterly

Science Education Quarterly

CTE Workshop Proceedings

Educational Dimension

Journal of Edge Computing

Actual Problems of Mind

ACNS Conference Series: Social Sciences and Humanities

publisher

Latest publications

counter

This journal is published by the Academy of Cognitive and Natural Sciences (ACNS) and distributed under the terms of the Creative Commons License Attribution 4.0 International (CC BY 4.0).