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кова.

В якост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]).

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

Перший кластер (вид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з концептом веб-сайту.

Анал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, основою є сцена, створення об’єкт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ртуальним об’єктом.

Розм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).

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).

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).

Побачити структуру ц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-додатках.

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).

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

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

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.

Арх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), а зображення праворуч – неправильно.

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

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.