автор этой статьиGeekPlux, впервые опубликовано вFront-end Внешний обзор журнала - Технология разработки дополненной реальности (AR) в веб-интерфейсе,адрес блога:Geek P Troblic.com/2018/01/18/.... Автор и адрес могут быть перепечатаны.
Волна дополненной реальности (далее AR) накатывает. Являясь наиболее доступным терминалом взаимодействия человека с компьютером, веб-браузеры активно развивают технологию AR. Многие фронтенд-инженеры также ищут пути трансформации своей карьеры, поэтому я собрал здесь соответствующие результаты исследований за последние шесть месяцев. В этой статье мы стремимся перечислить все текущие технологии дополненной реальности в направлении фронтенда, не вдаваясь в подробности (Убедитесь, что статья не слишком длинная.), только обобщения и научно-популярные (Так что в статье много ссылок), я писал кусками больше месяца (прокрастинация), и друзья, которые уже занимаются этой областью или исследованиями, могут прийти, чтобы исправить и дополнить.
Веб-AR Хацунэ Мику
AR можно просто понимать как технологию, которая накладывает виртуальные изображения на реальные сцены в реальном времени и может взаимодействовать [1]. Я лично считаю, что AR более перспективна, чем VR, главным образом потому, что:
Преимущество AR заключается в том, что он превращает реальную сцену в поле зрения и плавно соединяет реальный мир и цифровой мир.
Конечно, об этой «бесшовности» пока нельзя говорить, но она совершенствуется. Прежде чем говорить о том, как сделать AR на веб-интерфейсе, необходимо понять два основных способа реализации AR и его ключевые технологии:
Способ и ключевые технологии реализации дополненной реальности
Существует две основные реализации AR [2][3]: оптическое сквозное изображение и сквозное видео. В настоящее время представленные на рынке устройства с креплением на голову обычно используют один или оба из двух методов, в то время как портативные устройства (мобильные телефоны, планшеты и т. д.) обычно используют сквозное видео. Оптическое просвечивание — это отображение сгенерированного компьютером цифрового изображения на слое полупрозрачной линзы перед глазами, так что на сетчатке одновременно могут появляться как реальные сцены, так и виртуальная информация. Технология видеоперспективы заключается в том, чтобы сначала записать реальную сцену в компьютер через камеру, интегрировать и сжать ее с виртуальным объектом, а затем единообразно представить ее перед пользователем. И то, и другое имеет свои преимущества и недостатки [4]: реальная сцена в оптической перспективе отображается более естественно и непосредственно, поскольку она не обрабатывается компьютером; хотя она проста в реализации, но также имеет низкую точность позиционирования, неточную совпадение, плохое отображение, задержки и т. д. Тип перспективы видео интегрирован, поэтому сопоставление является точным, окончательный эффект отображения высоко синхронизирован, а сгенерированные результаты отображения могут быть дополнительно обработаны в соответствии с потребностями пользователя, однако его трудно реализовать, и он теряет часть реализма.В настоящее время (конец 2017 г.) для достижения AR на переднем крае Интернета используется технология перспективы видео..
Кроме того, технология компьютерного зрения играет жизненно важную роль в дополненной реальности. потому чтоВ основе реализации AR лежит идентификация и отслеживание. Во-первых, камера должна идентифицировать реперные маркеры, ключевые точки, оптические изображения и т. д., затем она отслеживается в реальном времени на основе обнаружения особенностей, обнаружения границ или других методов обработки изображения, и, наконец, виртуальное изображение накладывается на изображение. реальная сцена. По статистике 2008 г. более 20% докладов по технологиям слежения на известной AR конференции ISMAR приходится на последнее десятилетие [3].
Web AR
Согласно изложению предыдущего раздела, мы можем сделать вывод, что для достижения AR требуетсяИдентифицируйте, отслеживайте и визуализируйтеТри шага, то же самое и в браузере. Кроме того, датчики можно комбинировать для обеспечения большего взаимодействия или повышения точности рендеринга дополненной реальности, подключения к облаку через сеть для ускорения вычислений или обмена большим объемом данных и т. д. Как показано на рисунке ниже, это блок-схема Web AR, которую я разобрал самостоятельно. Веб-AR или мобильная AR по-прежнему имеет большие преимущества в некоторых аспектах, таких как мобильность, богатые датчики и собственная сеть, поэтому я не буду говорить об этом здесь.
Блок-схема дополненной реальности в Интернете
Спецификация веб-VR
Прежде всего, Web AR по-прежнему является передовой технологией, и нет стандартной или зрелой библиотеки для использования, но уже есть крупные компании и некоторые разработчики, активно продвигающие ее. 2 октября 2017 г. W3CВебВР группаопубликованоПервый проект спецификации WebVR версии 1.1, Версия 2.0 еще в самом разгаре.
WebVR — это открытый стандарт, который позволяет вам испытать виртуальную реальность в браузере. Наша цель — сделать виртуальную реальность проще для всех, независимо от того, какое у вас устройство. - webvr.info
Почему название этой статьи Web AR, а здесь упоминается WebVR? потому чтоНекоторые API в спецификации WebVR также применимы к Web AR.. НапримерVRDevicePoseПоложение камеры может быть получено. Это единственный стандарт, который на данный момент близок к Web AR. Со стандартом мы можем разрабатывать только для стандартного интерфейса, чтобы адаптироваться к подавляющему большинству устройств. Дальнейшее чтение:WebVR для дополненной реальности,Расширение WebVR API для смартфонов AR.
WebARonARKit, WebARonARCore
ARKit и ARCore — мобильные AR SDK, выпускаемые двумя гигантами Apple и Google соответственно.Они обеспечивают схожие функции: отслеживание движения, восприятие окружающей среды и определение освещенности.Я полагаю, что многие разработчики, интересующиеся AR, знакомы с этими двумя SDK. Но оба они являются SDK для мобильной дополненной реальности, поэтому команда Google по дополненной реальности предоставилаWebARonARKitа такжеWebARonARCoreдве библиотеки для удобства разработчиковМожет использовать веб-технологии для разработки на основе ARKit и ARCore для реализации WebAR.. В настоящее время эти две библиотеки все еще находятся в экспериментальной стадии, и те, кто хочет есть крабов, должны попробовать это быстро. Принцип реализации заключается в расширении API WebVR в сочетании с конкретными системами (iOS и Android). Команда Google AR упаковалаthree.ar.jsБиблиотека, которая предоставляет некоторые полезные API AR, в том числе ARView, ARReicle, ARPerspectiveCamera, ARDebug, ARUtils и т. д.
AR.js
На SIGGRAPH 2017 (Лучшая конференция по графике)AR.jsМожно сказать гениально, кто-то сделал Web ARсвязанная сессияПросто используйте AR.js для объяснения. AR.js этоJerome EtienneРазработана библиотека веб-AR, которая можетAR в десяти строках HTML, и имеет частоту кадров 60 кадров в секунду. Но на самом деле то, что делает AR.js очень просто, в основном он инкапсулирует следующие библиотеки:
- Webrtc. Следующее объясняется подробно, главным образом для получения видеопотоков.
- JSARToolKit.ARToolKitВозможно, это первая среда дополненной реальности с открытым исходным кодом, она была выпущена в 1999 году и с тех пор постоянно обновляется. Хотя он имеет долгую историю, он до сих пор широко используется (Официальный сайтСтиль вообще не имеет чувства истории). Он в основном обеспечивает идентификацию и отслеживание маркеров функций, которые дополнены в приложении к настоящей статье.
- Three.js, Babylon.js, A-Frame. Все это библиотеки рендеринга на основе WebGL для рендеринга вещей, которые будут отображаться в среде AR, которая будет расширена ниже.
С этой точки зрения AR.js подобен швейцарскому армейскому ножу, который соединяет все колеса воедино, прост и удобен в использовании. Автор активен на GitHub и Twitter, и вы можете задать ему вопросы напрямую.
WebRTC для получения видеопотока
В первых трех разделах мы упомянули стандарт и два формирующихся фреймворка, которые являются последними разработками в области Web AR. Рассчитывая на стандартный выпуск, уверен, что лилейникам холодно, но мы можем сделать это сами.
Только что мы сказали, что сначала нужно идентифицировать AR, затем использовать технологию WebRTC. WebRTC (веб-связь в реальном времени), как следует из названия, представляет собой технологию, которая поддерживает веб-браузеры для голосовых или видеоразговоров в реальном времени. У него очень важный API:getUserMedia()Видеопоток с камеры может быть получен в режиме реального времени, что является предпосылкой реализации видео перспективы AR (в настоящее время iOS 11 только что поддержала этот API, а Android смог использовать его очень рано). С помощью видеопотока мы можем анализировать характерные точки и использовать алгоритмы компьютерного зрения для идентификации и отслеживания вещей в видеопотоке. здесь есть Также следует упомянуть два момента: во-первых, getUserMedia по умолчанию получает переднюю камеру. устройство.Подробнее см.demo; Второй — использовать https, чтобы открыть веб-страницу для доступа к камере.
Tracking.js, JSFeat, ConvNetJS, deeplearn.js, распознавание и отслеживание keras.js
После получения видеопотока задача состоит в его идентификации и отслеживании. Вы можете думать о видеопотоке как о покадровом изображении, поэтому процесс обработки видеопотока можно понимать как процесс обработки изображения. Но тут собственно вопрос как передавать видеопотоки, вообще есть два пути:
1. Непосредственно обрабатывать видеопоток во внешнем интерфейсе
Обработка изображений выполняется непосредственно на интерфейсе, и вы можете использоватьTracking.jsа такжеJSFeat. Эти две библиотеки похожи тем, что обе они выполняют компьютерное зрение на переднем крае, включая извлечение характерных точек, распознавание лиц и т. д. Получить нужный эффект можно, напрямую передав им видеопоток, полученный WebRTC, и вызвав API. Для некоторых зрелых алгоритмов, таких как распознавание лиц, вы можете получить результаты распознавания напрямую.Если объект, который вы хотите распознать, сложный, вы также можете самостоятельно рассчитать характерные точки, но этого может быть недостаточно во внешнем интерфейсе, и проблемы с производительностью Обсуждается далее ниже.
Когда речь заходит о компьютерном зрении, нельзя не упомянуть о глубоком обучении, ведь многие алгоритмы обработки изображений теперь проигрывают глубокому обучению.ConvNetJS, — это интерфейсная среда глубокого обучения с открытым исходным кодом Стэнфордского университета, которая позволяет завершить обучение глубоких нейронных сетей во внешнем интерфейсе.deeplearn.jsЭто делается командой Google Brain, и функция аналогична ConvNetJS. Теперь ConvNetJS Кажется, что он не очень поддерживается, deeplearn.js все еще часто обновляется, и заинтересованные студенты могут попробовать его. Еще одна хорошо разработанная библиотека для глубокого обучения.keras.jsОн позволяет запускать обученную модель Keras в браузере (Kears— известная среда разработки для глубокого обучения) и поддерживает WebGL 2.
Все эти фреймворки предоставляют на главной странице богатые демонстрации, которые очень интересны. Игра с ними может вдохновить вас.
2. Интерфейс передает видеопоток на сервер, а сервер возвращает результат на интерфейс после обработки.
Другой способ обработки видеопотока — отправить его на серверную часть для обработки.SLAMАлгоритм, внутренняя обработка может вернуть внешний результат. Итак, как передать, стало сложной проблемой для наших передовых студентов.В общем, есть два метода:
- Отправьте информацию об изображении на серверную часть. Canvas предоставляет два API: один — toDataURL, который может генерировать строку base64 изображения; другой — toBlob, этот метод является асинхронным и может преобразовывать изображение в объект файла Blob, поскольку он двоичный, поэтому его удобнее переход на бэкенд. С точки зрения конкретного использования, последний немного эффективнее первого.
- Передайте информацию о пикселях серверной части. Метод readPixels WebGL может получить значение пикселя в буфере кадра.
Кроме того, должны быть и другие методы.Короче говоря, цель состоит в том, чтобы передать информацию об изображении от внешнего интерфейса к внутреннему.Метод передачи может быть AJAX или WebSocket, в зависимости от сцены.
В этом разделе в основном говорится о распознавании и отслеживании, На самом деле, помимо простой обработки изображений и видеопотоков, мы также можем получать больше информации о расстоянии, глубине, освещенности и другой информации с помощью различных данных датчиков мобильных устройств, чтобы обеспечить распознавание и отслеживание. точнее.
A-Frame, Three.js, Babylon.js, Pixi.js, рендеринг и взаимодействие WebGL
После разговора об идентификации и отслеживании, наконец, пришло время поговорить о рендеринге.A-FrameЭто рамки для WebVR, которая была открыта благодаря команде Mozilla в 2015 году, но недавно выпущенная команда A-Crameaframe-xrОн включает в себя некоторые компоненты веб-AR. В начале мы также сказали, что некоторые реализации VR и AR перекрываются, поэтому использование различных компонентов A-кадра позволяет использовать очень мало кодСоздайте трехмерный стереоскопический мир, который вам нужен для дополненной реальности. Когда дело доходит до 3D, я должен упомянутьWebGL. WebGL — это реализация OpenGL ES на стороне браузера, которую можно понимать как подмножество OpenGL. С помощью WebGL вы можете управлять каждым пикселем во внешнем интерфейсе.Студенты, которые немного разбираются в графике, должны знать, насколько он мощный, и он может вызывать GPU, поэтому во внешнем интерфейсе задействованы В ней нет недостатка там, где есть GPU. Хотя WebGL является мощным, его чрезвычайно сложно написать, и стоимость обучения также очень высока, а самая известная 3D-библиотека во внешнем интерфейсеThree.jsУтомительный WebGL API инкапсулирован и оптимизирован, так что вы можете написать WebGL на внешнем интерфейсе с более читаемым кодом.Pixi.jsДелает что-то похожее на Three.js, но поддерживает только 2D-рендеринг, но все равно отлично, если вы просто хотите использовать WebGL. Для сложных визуализаций, которые не включают 3D-сцены, попробуйте.Babylon.jsБолее того, это игровой движок, и он также инкапсулирует WebGL для высокопроизводительного рендеринга во внешнем интерфейсе, но имеет другую направленность, чем Three.js, если у вас очень высокие требования к рендерингу, такие как свет, тени, д., то можно рассмотреть babylon.js, ведь это игровой движок, разработанный бывшими сотрудниками Microsoft...
У этих методов рендеринга на основе WebGL есть общая проблема, заключающаяся в том, как взаимодействовать, например, как добиться эффектов наведения и щелчка. На самом деле взаимодействие в Web AR очень ограничено: если это десктопное устройство, то есть компьютер, оно аналогично взаимодействию при просмотре веб-страницы, например наведение, клик, перетаскивание и т. д.; если это мобильное устройство, то есть мобильный телефон, планшет, то может быть зум.Взаимодействие (здесь много разговоров, на самом деле в мобильном AR взаимодействия пальцев для зумирования следует избегать как можно больше насколько это возможно, и пользователь должен получать инструкции по увеличению и уменьшению масштаба, перемещая устройство ближе или дальше). Эти реализации зависят отАлгоритм приведения лучей Приведение лучейметод. Three.js напрямую предоставляетRaycasterКласс для реализации алгоритма raycasting. На самом деле принцип очень простой, то есть камера (камера здесь не относится к камере мобильного телефона, но Камера при рендеринге может ссылаться на three.js в Three.js.Camera) в качестве точки обзора, луч, связанный с координатами точки, которой вы касаетесь на экране, и смотрите, какие объекты в вашем представлении пересекают этот луч.
Алгоритм приведения лучей
В этом разделе в основном говорится о рендеринге и взаимодействии. Фактически, при реализации AR отслеживание распознавания и взаимодействие с рендерингом выполняются одновременно. Как предоставить пользователям лучший и более плавный опыт — еще одна серьезная проблема в веб-AR.
представление
Производительность волнует многих. В настоящее время вычислительная мощность браузера действительно недостаточна для сравнения с мощностью клиента, но она также значительно улучшилась по сравнению с предыдущими версиями. Распознавание и отслеживание — это, по сути, расчеты на уровне пикселей, требующие высокой вычислительной мощности, поэтому эффективность AR-позиционирования на основе производителя обычно намного выше, чем без производителя. Кроме того, эффективность алгоритмов компьютерного зрения также оказывает большое влияние на производительность.Например, распознавание лиц в настоящее время гораздо более развито, чем другие виды распознавания, поэтому алгоритмы распознавания лиц без проблем работают на внешнем интерфейсе Интернета.
Есть много способов улучшить производительность.Как правило, люди сначала думают об использовании WebGL для вызова GPU-ускорения, а затем думают об использовании Web Worker и WebAssembly. Я попробовал первые два и переместил код чистых вычислений в шейдер или Web Worker WebGL.Хотя оба они являются ускоренными вычислениями, они применимы к разным сценариям. шейдер можно использовать для ускоренияКод, относящийся только к рендерингу (перерисовке), помещение в шейдер кода, который не имеет ничего общего с рендерингом, приведет к повторяющимся вычислениям. Веб-воркеры подходят для кода, который вычисляется заранее или не очень в реальном времени, например, для алгоритмов компоновки. Веб-сборка Я еще не использовал его, когда занимаюсь AR, и есть библиотекаgpu.jsЯ еще не пробовал, надеюсь, кто-нибудь скажет мне, каков эффект после того, как я попробую.
Другой способ завуалированного «улучшения» производительности — использование алгоритмов фильтрации (таких какФильтр Калмана), чтобы уменьшить заикание в меньшей степени, делая работу пользователя более плавной.
конец
Теперь, когда волна Web AR только началась, нужно покорить множество горных вершин, таких как оценка освещения, оптимизация производительности и т. д. Я надеюсь, что заинтересованные студенты смогут принять активное участие. А передняя часть сети быстро развивается, как в технологиях, так и в населении, полна бесконечных возможностей, ограниченных только вашим воображением. Я сделал это давным-давноНебольшая демонстрация распознавания лиц + AR, на ГитхабеGitHub.com/geek P маршрут/AR…Вы можете играть с ним, на самом деле, это всего лишь несколько строк кода. Следующая статья может быть написана Я чувствую, что я выкопал большую дыру для себя, когда я делаю ставки, связанные с распознаванием лица, связанные с ними, связанные с передним концом Интернета. Я надеюсь, что мое промедление будет вылечена как можно скорее.
Приложение: Технология разработки дополненной реальности
Ссылка [2] обобщила все технологии разработки дополненной реальности того времени, как показано в следующей таблице:
Технология разработки дополненной реальности
В этой таблице инструменты разработки дополненной реальности разделены на четыре категории, перечисленные отдельно. На самом деле большая часть разработки AR в настоящее время выполняется с помощью Unity, и многие сторонние SDK также сначала интегрируются в Unity, а затем выводятся Unity в формате, требуемом соответствующим устройством. в таблицеVuforiaПо моим наблюдениям, в настоящее время это самый используемый сторонний SDK.ARToolKitОн часто используется в веб-интерфейсе и на мобильных устройствах., его версия с открытым исходным кодом основана на разметке (на основе маркеров), он также предоставляет метод обучения для машинного обучения, позволяя вам обучать любое изображение маркеру. Кроме того, поскольку эта таблица относится к 2015 году, когда AppleARKitи GoogleARCoreЭти 2 SDK еще не вышли, и их можно сгруппировать в третьей строке таблицы.
использованная литература
- [1] Azuma R T. A survey of augmented reality[J]. Presence Teleoperators & Virtual Environments, 1997, 6(4): 355-385
- [2] Billinghurst M, Clark A, Lee G. A survey of augmented reality[J]. Foundations and Trends in Human-Computer Interaction, 2015, 8(2-3): 73-272
- [3] Zhou F, Duh B L, Billinghurst M. Trends in augmented reality tracking, interaction and display: a review of ten years of ISMAR[C] //Proceedings of the 7th IEEE/ACM International Symposium on Mixed and Augmented Reality. Washington: IEEE Computer Society Press, 2008: 193-202
- [4] Rolland J P, Fuchs H. Optical versus video see-through head-mounted displays in medical visualization[M]. Cambridge: MIT Press, 2000, 9: 287-309