Pull to refresh

JavaScript Augmented Reality — тест JSARToolkit

Reading time 5 min
Views 5.5K
Original author: Alistair MacDonald
Если картинка не отображается, пожалуйста, напишите об этом автору

JSARToolkit это JavaScript библиотека, портированная с FLARToolkit (Flash) и предназначенная для отслеживания AR Маркеров на видео. ARToolKit преобразует данные из маркеров в 3D-координаты, используя их можно наложить изображения или 3D-объекты на плоскую поверхность.

Вы уже наверно видели JSARToolkit в действии на демке Ilmari HeikkinenRemixing 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 Скоро и в вашем браузере ;)
Tags:
Hubs:
+28
Comments 9
Comments Comments 9

Articles