Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_antoniuk.pdf•three.js...
TRANSCRIPT
![Page 1: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/1.jpg)
Реалізація віртуальної реальності у веб-застосуваннях
Виконала: студентка Антонюк Софія
Наук. керівник: Голубова І. А.
Дипломна робота на тему:
![Page 2: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/2.jpg)
Мета й цілі роботи
Аналіз підходів та інструментів для створення
віртуальної реальності у веб застосуваннях;
Порівняння технологій за кількісними та якісними
характеристиками;
Реалізація веб застосування з підтримкою віртуальної
реальності.
![Page 3: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/3.jpg)
Переваги віртуальної реальності у веб
• Відсутня необхідність інсталяції застосувань
• Крос-платформенність
• Зворотна підтримка інтерфейсу desktop PC
• Можливість роботи з ВР-контентом в режимі реального часу
Перспектива створення абсолютно нового інтерфейсу користувача для роботи з веб
![Page 4: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/4.jpg)
Інструменти для створення ВР у веб
![Page 5: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/5.jpg)
Якісні характеристикиКритерії A-Frame Three.js Babylon.js
Мова програмуванняМова розмітки, яка
узгоджена з HTMLJavaScript JavaScript
Залежність від
інших технологій
Побудований на
основі Three.js- -
Підтримка WebVR Вбудована
Плагіни до
бібліотеки +
WebVR polyfill
Вбудована +
WebVR polyfill
Можливості для
моделюванняТак (інспектор) Ні Ні
Інструменти для ВР-
інтерфейс користувачаТак Ні Ні
Крос-платформенність Так Ні (номінально) Ні (номінально)
![Page 6: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/6.jpg)
Кількісні характеристики
Критерії A-Frame Three.js Babylon.js
Об’єм ОЗП, Мб 12.3 – 13.2 9.1 – 10.6 12.1 – 13.5
Середній час
відгуку, мс1170 731 637
Кількість рядків
коду, сотні0.3 0.8 0.8
![Page 7: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/7.jpg)
Недоліки Three.js та Babylon.js для VR:
• Некоректне відпрацьовування на певних пристроях:• Babylon.js – не підтримуються мобільні платформи
• Three.js – не підтримуються десктоп-платформи
• Необхідність налаштування середовища роботи, в т. ч. ручної перевірки та підключення підтримки WebVR в разі необхідності
• Відсутність стандартного інтерфейсу користувача для роботи у ВР
![Page 8: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/8.jpg)
Переваги A-Frame
• Коректне відпрацювання на всіх типах пристроїв.
• Вбудована підтримка WebVR.
• Якісний ВР-інтерфейс користувача «з коробки»:• кнопка входу у ВР-режим,• стандартний елемент курсору типу «eye-gaze»,• відсутність сторонніх елементів керування в полі зору користувача.
• Архітектура додатків – Entity-Component-System.
![Page 9: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/9.jpg)
A-Frame: особливості роботи
• Перехоплення подійІєрархіяПроміжна подія
• Медіа-файли із заголовками CORSПроміжні сервіси (A-Frame Assets Uploader, GitHub
Pages)Спільний сервер
![Page 10: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/10.jpg)
Підходи до створення ВР у веб:
![Page 11: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/11.jpg)
Результати практичної розробки:панорамний контентРежим доступу:itprosperity.ru/a-frame/tour/index.html
На пристрої ВР На desktop-браузері
![Page 12: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/12.jpg)
Результати практичної розробки:генерація 3D-графікиРежим доступу:itprosperity.ru/a-frame/forest.html
На пристрої ВР На desktop-браузері
![Page 13: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/13.jpg)
Висновки
Результати аналізу:WebVR – єдиний АРІ для реалізації ВР у веб
У зв’язці з WebVR використовуються Three.js, Babylon.js та A-Frame
Найкращим інструментом для розробки було обрано A-Frame
На базі A-Frame розроблено два застосування, які реалізують обидва підходи до розробки ВР застосувань
Визначено особливості роботи з A-Frame та способи подолання труднощів
![Page 14: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/14.jpg)
Перспективні напрямки розвитку
•Room-scale VR
•Використання контролерів
•Новий веб-інтерфейс користувача
![Page 15: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/15.jpg)
Дякую за увагу!
![Page 16: Дипломна робота на темуcad.kpi.ua/attachments/093_2017p_Antoniuk.pdf•Three.js –не підтримуються десктоп-платформи •Необхідність](https://reader036.vdocuments.net/reader036/viewer/2022063008/5fbdc8233e12c1243d483e25/html5/thumbnails/16.jpg)
WebVR
• Надає єдиний АРІ для реалізації ВР у веб.
• Задачі, які вирішує:• Виявлення доступних пристроїв віртуальної реальності;• Запит можливостей пристрою;• Опитування позиції пристрою та орієнтації;• Показ зображення на пристрої із заданою частотою кадрів та
бінокулярний рендеринг.
• Браузери, що підтримують WebVR 1.1: