Перенос встроенного отслеживания маркеров в Интернет с помощью WebAssembly
Отслеживание маркеров в Babylon.js с OpenCV
Мы экспериментируем с тем, как легко добавить отслеживание маркеров в веб-приложения Babylon.js и даже на игровые площадки!
Встречайте наш новейший эксперимент: отслеживание маркеров в Babylon.js! Инкапсулируя мощь замечательного модуля ArUco OpenCV, мы создали простую и легко добавляемую утилиту для отслеживания маркеров AR в любом веб-приложении Babylon.js.
- У нас есть простая игровая площадка, демонстрирующая этот эксперимент в действии; проверьте это здесь. Но чтобы опробовать отслеживание маркеров, вам понадобится маркер (и веб-камера), так что ...
- Мы сделали некоторые маркеры доступными в виде веб-страниц здесь. Попробуйте загрузить один на свой телефон и Playground на свой компьютер (или наоборот) и наблюдайте, как один экран отслеживает маркер на другом.
- Есть вопрос? Хотите обсудить, что мы можем с этим сделать? Думаете, нам следует создать официальное расширение Babylon.js? Оставьте комментарий ниже или присоединяйтесь к беседе на Вавилонском форуме!
Webpiling: перенос собственных библиотек в Интернет
На удивление легко взять существующие собственные библиотеки (C и C ++) и сделать их доступными для использования в веб-приложениях. Сообщество разработчиков ПО с открытым исходным кодом создало потрясающую коллекцию инструментов для этого. В оставшейся части статьи мы поговорим об этом процессе.
Если я сам так говорю, в нашем эксперименте по отслеживанию маркеров для Вавилона есть много вещей, которые могут понравиться, но есть два атрибута, которые наиболее выделяются в моем сознании.
- Чтобы использовать его, вам не нужны знания в области компьютерного зрения.
- Чтобы это сделать, вам не понадобится опыт в области компьютерного зрения.
Я действительно хочу это подчеркнуть, поэтому повторю еще раз: не обязательно быть экспертом. На мой взгляд, это одна из самых важных частей культуры веб-разработки, и это большая часть того, почему веб-технологии так удивительно разнообразны и разнообразны. Исторически сложилось так, что веб-разработка часто делала упор на скорость разработки и низкий порог входа; и в ходе создания отслеживания маркеров для Babylon я разработал процесс добавления собственных библиотек на вечеринку, который для удобства я называю webpiling.
webpile (noun): a portmanteau of “Web” (of World-Wide fame) and “compile” referring to the act of recompiling and encapsulating existing native (C and C++) utilities into a form that is accessible and easy to incorporate into browser-based Web apps.
Webpiling - не новая идея - люди работали над этой возможностью в течение многих лет, но только недавно технология достигла точки, когда мы действительно можем начать, на индивидуальной основе, привносить возможности собственных библиотек на веб-платформы. Пришло время, ребята! У нас есть инструменты; все, что нам нужно, это ты. Веб-сборка - это потрясающее и невероятно полезное занятие, и, если вы еще не уверены, вот еще три причины, чтобы узнать о веб-сборке.
- Это просто. Насколько легко? Это просто. Репозиторий по этой ссылке содержит сценарий bash - единственный сценарий, который выполняет все шаги, необходимые для создания из исходного кода OpenCV отслеживания маркеров для проекта Babylon. Вскоре мы обсудим этот сценарий более подробно, поскольку он работает как обзор самого процесса веб-пилинга. А пока просто подумайте об этом одном коротком скрипте, комментариях, пробелах и всем остальном и поймите, что веб-пилинг действительно так просто.
- Это мощно. Хотите создать приложение с компьютерным зрением? OpenCV имеет множество удивительных функций. Вам нужно извлечь текст из фотографии с веб-камеры? Тессеракт может вам в этом помочь. Или, может быть, вашему приложению требуется продвинутое физическое моделирование? Или синтез звука? Подобные ресурсоемкие задачи часто решаются в первую очередь и лучше всего в собственных библиотеках; и до настоящего времени такие возможности часто рассматривались за пределами того, что может быть эффективно реализовано в браузере. Но времена меняются. Браузерные технологии ускоряются. А с инструментами и методами веб-компиляции существует целая категория встроенных технологий, которые только и ждут, чтобы их разместили в сети.
- Это экологично. Это не первый случай, когда кто-то привносит в Интернет возможности нативной библиотеки. Это даже не первый случай, когда кто-то переносит модуль ArUco OpenCV в JavaScript. Однако многие из существующих усилий были сосредоточены на переносе вручную - изучении собственного исходного кода и его повторной реализации вручную для новой платформы. Иногда лучше всего использовать ручную транспиляцию; но это трудоемко, требует много времени и создает множество проблем, связанных с обслуживанием: новые функции и исправления ошибок, внесенные в исходный проект, не будут добавлены в переносимую вручную утилиту, пока кто-то не выполнит повторную обработку и не сделает это вручную. Но веб-компиляция не имеет этой проблемы, потому что для веб-компиляции мы строим непосредственно из исходного источника - ручная транспиляция не требуется. Таким образом, если в исходный проект добавляется новая функция или исправление ошибки, обновление версии, скомпилированной через Интернет, так же просто, как повторный запуск сценария сборки.
Я твердо верю, что лучший способ продвигать инновации - это предоставить мощные инструменты и возможность их использовать как можно большему количеству авторов. Webpiling - инкапсуляция мощных нативных библиотек для легкого и доступного использования в сети - это невероятно захватывающая возможность предоставить новые возможности огромному количеству разработчиков. Я надеюсь, что вам это покажется таким же увлекательным, как и мне. Если так, давайте сделаем это! Идите вперед и скопируйте что-нибудь!
Техническая часть: веб-пилинг всего сущего
Репозиторий, на который я ссылался выше, содержит сценарий bash под названием webpile_all_the_things.sh. (Не судите, именовать файлы сложно.) Этот сценарий существует только для одной цели: чтобы проиллюстрировать, что я имею в виду, когда говорю, что веб-пилинг - это легко.
Webpiling, на техническом уровне, представляет собой сочетание потрясающего количества инструментов с открытым исходным кодом. Когда я говорю, что это просто, я имею в виду, что нам очень мало нужно сделать, чтобы что-то собрать в Интернете. Однако нужно многое понять. Остальная часть этого поста, однако, даст общий обзор соответствующих инструментов, техник и целей, используемых в этом скрипте - короче говоря, что на самом деле означает веб-компиляция всех вещей.
Платформа: WebAssembly
Технология, которая непосредственно лежит в основе веб-пилинга, - это WebAssembly. Подробности лучше всего изложены на официальном сайте, но для наших целей вы можете рассматривать WebAssembly как своего рода платформу, такую как x86 или ARM, в которой вы можете компилировать собственные библиотеки для выполнения из этого формата. Результатом этого процесса компиляции является файл .wasm, который затем можно загрузить и вызвать из JavaScript для запуска встроенных функций в браузере. WebAssembly имеет ряд преимуществ, но два из них наиболее важны для веб-компиляции: (1) это логический формат вывода для реализаций собственных библиотек и (2) он выполняется очень, очень быстро.
Компилятор: Emscripten
Таким образом, техническая цель веб-компиляции - начать с исходного кода собственной библиотеки и закончить двоичным файлом .wasm, который упрощает использование желаемых функций в Интернете. Нашим основным инструментом для достижения этой цели является Emscripten, набор утилит с открытым исходным кодом для компиляции собственного кода (C и C ++) в asm.js и WebAssembly. Emscripten - это феноменальная утилита, и ее высокое качество - огромная часть того, почему веб-пилинг возможен и прост.
Emscripten сначала появляется в скрипте в строках с 25 по 28. Эти строки переходят в подмодуль Emscripten и выполняют несколько команд, чтобы убедиться, что инструменты правильно настроены и обновлены. Готово, наш компилятор готов, и у нас есть все, что нужно для перехода к…
Система сборки: CMake и Make
OpenCV имеет чрезвычайно надежную систему сборки "из коробки", поэтому на самом деле все, что нам нужно сделать, это вызвать ее. Эта система основана на CMake, который является хорошо зарекомендовавшим себя и очень мощным инструментом генерации скриптов сборки: в некотором роде система сборки для создания систем сборки. Мы будем использовать CMake для настройки сборки OpenCV, которая сгенерирует Makefile, который будет выполнять фактическую компиляцию.
Конечно, ни одна из этих систем сборки не была разработана с учетом веб-компиляции. К счастью, в Emscripten есть инструменты, упрощающие интеграцию с системами сборки на основе CMake. Для нашей команды настройки Emscripten предоставляет файл цепочки инструментов CMake, который изменяет поведение CMake для использования Emscripten вместо стандартных компиляторов. Затем для нашей команды компиляции Emscripten предоставляет оболочку, которая аналогичным образом изменяет поведение make: emmake.
Конфигурация и компиляция производятся только на двух строках скрипта: строки 42 и 43 соответственно. Строка конфигурации - безусловно, самая сложная команда в нашем процессе веб-компиляции, потому что она глубоко вникает в параметры сборки OpenCV. Тщательная разбивка этой команды выходит за рамки этого документа, но именно такие вещи я буду рад обсудить в комментариях или на форуме. Для сравнения: компиляция чрезвычайно проста. emmake обертывает make и сообщает ему, как использовать Emscripten, а opencv_aruco сообщает make, какое подмножество возможностей OpenCV мы действительно хотим создать.
Инкапсуляция: устранение разрыва между нативным и веб-интерфейсом
Этот последний шаг прост, но он является наиболее важной частью процесса, поскольку он точно определяет, как наши недавно скомпилированные собственные возможности будут доступны из Интернета. В моем случае я хотел, чтобы моя веб-утилита была как можно более простой и доступной, поэтому я написал небольшую нативную оболочку (на основе отличного видеоурока, которому я следил), чтобы скрыть API OpenCV и предоставить только простой, легкий в использовании используемая поверхность для вызывающего JavaScript. К сожалению, подробности того, почему и как я инкапсулировал таким образом, также выходят за рамки этого документа; но, как и команда CMake, они сделают отличные комментарии или обсуждения на форуме. 😃
Итак, после того, как статические библиотеки OpenCV были построены, остальная часть скрипта просто перемещает файлы, чтобы инкапсулирующий код мог построить так, как он ожидал. Затем сценарий вызывает другой сценарий для создания окончательного вывода, поэтому команда сборки для инкапсулирующего кода фактически находится в build.sh. Точно так же webpile_all_the_things.sh затем вызывает скрипт run.sh репозитория инкапсулирующего кода, который размещает ваш недавно собранный в Интернете файл .wasm на сервере отладки Emscripten, чтобы вы могли получить к нему доступ в браузере по адресу http: // localhost : 8080 .
Вот и все! Это все шаги. Сам скрипт webpile_all_the_things.sh содержит более подробный комментарий о том, что он делает; но помимо того, что я описал выше, большая часть того, что он делает, - это просто файловая логистика. Веб-пилинг действительно может быть таким простым: вы многое можете знать, но не так много, что вам нужно сделать.
Заключение
Возможно, вас не удивит, что эта статья в том виде, в котором она была написана, была намного длиннее. Целые разделы были посвящены деталям команды OpenCV CMake, важности использования статических библиотек, значимости основ Emscripten LLVM и мотивации инкапсулирующего кода. Мне очень нравятся подобные технологии, и я хотел поделиться с вами каждой деталью, которая, на мой взгляд, может быть интересной.
Но статья быстро стала настолько длинной, что я забеспокоился, что похоронил свое основное сообщение, которое я повторю еще раз, потому что я не могу говорить это достаточно часто: вам не нужно быть экспертом, чтобы сделать что-либо из этого . Самая важная вещь, о которой я хотел сообщить в этой статье, - это то, что веб-пилинг достижим; и если вам интересно - если есть какая-нибудь нативная библиотека, которую вы хотите увидеть в Интернете, - я хочу, чтобы вы почувствовали себя вправе сделать это.
Но я все же думаю, что подробности стоит знать - на самом деле, я очень хочу (возможно, даже чересчур) их обсудить! В этой статье не рассматривается множество деталей, поэтому я хочу еще раз пригласить вас оставить комментарий или написать мне на форумах, если есть что-нибудь о веб-пилинге, которое вы хотите обсудить. И учтите, что я тоже не эксперт: я никогда не делал ничего подобного до этого проекта. WebAssembly - это новая технология, веб-пилинг - это новый рубеж, и мы все учимся. Так что присоединяйтесь к обсуждению и учитесь вместе с нами!
Джастин Мюррей, команда Babylon.js
