JSARToolkit это JavaScript библиотека, портированная с FLARToolkit (Flash) и предназначенная для отслеживания AR Маркеров на видео. ARToolKit преобразует данные из маркеров в 3D-координаты, используя их можно наложить изображения или 3D-объекты на плоскую поверхность.
Вы уже наверно видели JSARToolkit в действии на демке Ilmari Heikkinen — Remixing Reality.
Демо Ilmari это часть Мозилловской “Web O’ Wonder”, — сайт, демонстрирующий новые технологии, которые будут добавлены в Firefox 4.
Исследования HTML5 клипов
Заказчик поставил нам задачу — оценить возможность использования JSARToolkit для онлайн HTML5 клипов. (Нас попросили рассмотреть только тех пользователей, которые использовали последнюю версию Firefox и Chrome)
Вот некоторые из вопросов, на которые мы бы хотели ответить:
— Будет ли обработка быстрой на медленных компьютерах?
— Сколько AR Маркеров мы можем отследить одновременно?
— На сколько быстро можно двигать маркер, чтобы он стал не отслеживаемым?
— Какое наибольшее расстояние на котором камера может отследить маркер?
Ответы на эти вопросы, исходный код и демки можно найти ниже.
Запись видео
Для записи тестового видео я использовал Flip Ultra HD. Качество видео Flip Ultra HD приемлемое, учитывая то, что это не профессиональная камера. Мы знали что ничего хорошего с такой камеры мы не получим, но этого было достаточно для теста. Основная проблема такой низкокачественной камерой — неспособность переключать скорость затвора.
Это означало, что мы ничего не сможем поделать с размытыми AR Метками если мы будем двигаться слишком быстро. Мы были удивлены на сколько быстро мы теряем маркер, кода мы двигаемся из стороны в сторону.
Тем не менее, мы уверены, что при съемке в хорошо освещенной студии с использованием камеры с высокой скоростью затвора будет очень мало не читаемых AR Меток.
Печать AR Маркеров
Я напечатал несколько маркеров, которые шли вместе с JSARToolkit и начал снимать тестовые кадры на кухне. Я даже и не ожидал, что все заработает с первого раза, каждое видео, добавленное в библиотеку оказалось рабочим.
Некоторые результаты были не качественные, но я хочу повторить, что качество нашей камеры было плохим по сравнению с профессиональными. Мы снимали видео без фокусировки на отдельных маркерах, что могло бы добавить точность их отслеживания.
Перекодирование видео в VP8 WebM
Мы записывали видео в формате H.264 Mpeg. Чтобы все работало с HTML5 video мы должны были сконвертировать видео в WebM. Первый декодер видео, который я попробовал был Ffmpeg2Theora, судя по названию он должен был кодировать видео в WebM. Однако я понял, что с Ffmpeg2Theora есть проблемы. Когда я кодировал видео под Linux оно могло не проигрываться в Windows и наоборот.
После тестов прочих кодировщиков я остановился на Miro Video Converter. К сожалению Miro не умеет обрабатывать несколько видео, но видео, которое он производит работает на всех ОС и браузерах.
Создание обертки
Я хотел написать простое API на основе JSARToolkit, которое можно было использовать повторно. Что-нибудь что я бы мог подключить к другой JavaScript библиотеке, например Popcorn.js. Код, который я нашел в демке Ilmari был специфичный для конкретной задачи. Так как код не изобиловал комментариями, у меня были проблемы с пониманием, что происходит. Пришлось экспериментировать. Я пришел к простому способу написания обертки для JSARToolkit.
Первый шаг в использовании обертки JSARToolkit — установка вашего трекера. Пример как это можно сделать:
// Пример создания трекера со всеми возможными опциями
var myTracker = jsartoolkit.tracker({
src : 'my-video.webm', // Исходник для видео
autoplay : true, // Стоит ли включить видео сразу
repeat : true, // Включить повтор
volume : 0, // Звук из видео
target : doc.getElementById('DOMTarget'), // DOM element в который будет добавлен canvas
width : 720, // Ширина кадра
height : 360, // Высота кадра
threshold : 100, // Настройка освещенности кадра
ratio : 0.5, // Настройка размера скрытого canvas для трекинга (1 = 1в1 как видео)
debug : false // Выводить ли отладочную информацию - для порога освещенности кадра
});
Как только трекер был создан, следующим шагом стало добавления контента маркерам.
Мы добавили статическое изображение, а затем и 3D объект, экспортированный из Blender3D:
// Добавления картинки первому маркеру
myTracker.marker(0).image('my-image_01.png');
// Добавление модели Blender3D
myTracker.marker(2).model('HTML5_Logo001');
Этот пример показывает как обновить свойства маркера после того как он был создан:
// Настройка свойств маркера 0
myTracker.marker(0)
.scale(1)
.axis(0, 0, 1)
.angle(0)
.position(0,0,0)
;
Вы также можете добавить более сложное поведение, используя JSARToolkit-Wrapper. Следующий пример демонстрирует как обновить свойства маркера в реальном времени. Этот код заставляет первый маркер крутиться и пульсировать:
// Анимация свойств маркера Marker_0 по таймеру
var interval = global.setInterval( function(){
var date = + new Date(),
scl = 1.5 + (Math.sin( date/200 ) * 0.5),
axs = Math.cos( date/300 ),
posX = Math.sin( date/300 ),
posY = Math.cos( date/300 )
;
myTracker.marker(0)
.scale(scl)
.axis(0, axs, 0)
.position(posY, posX, 0)
.angle(date / 230)
;
}, 20);
Для доступа к видео трекера вы можете сделать что-то такое:
// Доступ к видео элементу трекера и установка currentTime
myTracker.video.currentTime = 1;
Ответы на вопросы
Будет ли обработка быстрой на медленных компьютерах?
Обработка видео и определение положения маркера очень быстрое. Я практически не заметил разницы в отслеживании 1 маркера и 100 маркеров. Основная нагрузка — наложение контента на видео.
Сколько AR-Маркеров мы можем отследить одновременно?
Я отслеживал 100 маркеров одновременно без каких-либо проблем.
На сколько быстро можно двигать маркер, чтобы он стал не отслеживаемым?
Все зависит от вашей камеры и как вы снимаете. Если использовать камеру с высокой скоростью затвора, такие, которые используются для записи спортивных состязаний, то мы получим минимум размытых маркеров (если вообще получим) и они будут отслеживаться очень хорошо.
Какое наибольшее расстояние на котором камера может отследить маркер?
Опять все зависит от нескольких факторов — от скорости перемещения камеры/объектов и от освещения. В хорошо освещенной комнате (не профессиональной студии). У меня получилось отслеживать Маркеры с 10 метров в направлении объектива в разрешении 720р. Чем выше разрешение камеры, тем выше качество отслеживания маркеров. Одну вещь которую стоит отметить: вы можете снимать ваше видео в разрешении 1080, кэшировать результаты трекинга и уменьшить число обработок на стороне клиента. Можно покрутить ratio если что-то плохо отслеживается или threshold если кадр был плохо освещен.
Заключение
Плюсы
— Легко внедрить
— Оптимальный алгоритм отслеживания, не нагружает процессор
— Можно отслеживать по крайней мере 100 маркеров
— Можно экспортировать напрямую с Blender3D
— Можно накладывать любой контент: картинки, видео, 3D объекты
Минусы
— Слишком много глобальных переменных в коде исходной библиотеки
— Необходимо немного подкрутить экспорт из Blender3D
— Не поддерживается одновременная обработка нескольких видео
— Слишком много затратных вызовов getElementById()
Необходимо поделать большую работу если вы хотите использовать эту библиотеку на продкшене или сделать её частью большой библиотеки. Но после огромного числа тестов и экспериментов, я скажу, что этот код работает потрясающе!
Примеры, Тесты и ссылки
JSARToolkit-Wrapper Demo
JSARToolkit Video Tests
JSARToolkit Marker Images
JSARToolkit-Wrapper on Github
Для просмотра вам необходима последняя версия Firefox 4 или Chrome.
От переводчика
Автор к сожалению пока не выложил демку. Применение AR в таком виде в котором он представлен в переводе не очень широкое, но с появлением HTML5 Device Element (ещё статья) все может измениться.
AR Скоро и в вашем браузере ;)